From 9feb712c60ebcb5b930f68c4c3d5fbcbbe0815fd Mon Sep 17 00:00:00 2001
From: altair823 <kimth0734@gmail.com>
Date: Sun, 10 May 2026 00:39:36 +0900
Subject: [PATCH] =?UTF-8?q?feat(v0211):=20ReviewView=20=E2=80=94=20?=
 =?UTF-8?q?=EC=9D=BC/=EC=A3=BC/=EC=9B=94=20=ED=9A=8C=EA=B3=A0=20+=20?=
 =?UTF-8?q?=ED=97=A4=EB=8D=94=20dropdown=20=EC=A7=84=EC=9E=85=EC=A0=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/inbox/App.tsx                   | 20 ++++++
 src/renderer/inbox/components/ReviewView.tsx | 56 +++++++++++++++++
 tests/unit/ReviewView.test.tsx               | 64 ++++++++++++++++++++
 3 files changed, 140 insertions(+)
 create mode 100644 src/renderer/inbox/components/ReviewView.tsx
 create mode 100644 tests/unit/ReviewView.test.tsx

diff --git a/src/renderer/inbox/App.tsx b/src/renderer/inbox/App.tsx
index 9fb8f19..691fef6 100644
--- a/src/renderer/inbox/App.tsx
+++ b/src/renderer/inbox/App.tsx
@@ -15,6 +15,8 @@ import { RecallBanner } from './components/RecallBanner.js';
 import { SettingsPage } from './components/SettingsPage.js';
 import { OnboardingWizard } from './components/OnboardingWizard.js';
 import { SearchBox } from './components/SearchBox.js';
+import { ReviewView } from './components/ReviewView.js';
+import type { InboxView } from './store.js';
 
 export function App(): React.ReactElement {
   const {
@@ -69,6 +71,10 @@ export function App(): React.ReactElement {
   if (showOnboarding === null) return <></>;
   if (showOnboarding) return <OnboardingWizard onClose={() => setShowOnboarding(false)} />;
 
+  if (view === 'review-daily') return <ReviewView period="daily" />;
+  if (view === 'review-weekly') return <ReviewView period="weekly" />;
+  if (view === 'review-monthly') return <ReviewView period="monthly" />;
+
   if (showSettings) return <SettingsPage />;
 
   const showRecovery = continuity.showRecoveryToast && !recoveryDismissed;
@@ -108,6 +114,20 @@ export function App(): React.ReactElement {
             </button>
           ))}
         </div>
+        <select
+          aria-label="회고 기간"
+          value={view.startsWith('review-') ? view.replace('review-', '') : ''}
+          onChange={(e) => {
+            const v = e.target.value;
+            if (v === 'daily' || v === 'weekly' || v === 'monthly') setView(`review-${v}` as InboxView);
+          }}
+          style={{ marginLeft: 8, fontSize: 12, padding: '4px 6px', border: '1px solid #0a4b80', borderRadius: 4, color: '#0a4b80', background: 'transparent' }}
+        >
+          <option value="">📅 회고…</option>
+          <option value="daily">일간</option>
+          <option value="weekly">주간</option>
+          <option value="monthly">월간</option>
+        </select>
         <SearchBox />
         <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 2, marginLeft: 'auto' }}>
           <ContinuityBadge />
diff --git a/src/renderer/inbox/components/ReviewView.tsx b/src/renderer/inbox/components/ReviewView.tsx
new file mode 100644
index 0000000..78be1e0
--- /dev/null
+++ b/src/renderer/inbox/components/ReviewView.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { useInbox } from '../store.js';
+import { NoteCard } from './NoteCard.js';
+
+interface Props {
+  period: 'daily' | 'weekly' | 'monthly';
+}
+
+const periodLabel: Record<Props['period'], string> = {
+  daily: '일간',
+  weekly: '주간',
+  monthly: '월간'
+};
+
+export function ReviewView({ period }: Props): React.ReactElement {
+  const reviewData = useInbox((s) => s.reviewData);
+  if (!reviewData) {
+    return <div style={{ padding: 16, fontSize: 13, color: '#666' }}>불러오는 중…</div>;
+  }
+  const max = reviewData.tagCounts[0]?.count ?? 1;
+  return (
+    <div style={{ padding: 16 }}>
+      <h2 style={{ fontSize: 18, margin: 0 }}>{periodLabel[period]} 회고</h2>
+      <div style={{ marginTop: 8, fontSize: 13, color: '#444' }}>
+        총 {reviewData.totalCount}건
+      </div>
+      <section style={{ marginTop: 16 }}>
+        <h3 style={{ fontSize: 14, marginBottom: 4 }}>태그 분포</h3>
+        {reviewData.tagCounts.length === 0 && (
+          <div style={{ fontSize: 12, color: '#888' }}>태그 없음</div>
+        )}
+        {reviewData.tagCounts.slice(0, 10).map((t) => (
+          <div key={t.tag} style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 2 }}>
+            <span style={{ fontSize: 12, width: 80 }}>{t.tag}</span>
+            <div style={{ flex: 1, background: '#eee', height: 8, borderRadius: 2 }}>
+              <div style={{ width: `${(t.count / max) * 100}%`, background: '#4ec5b8', height: 8, borderRadius: 2 }} />
+            </div>
+            <span style={{ fontSize: 12, color: '#666', width: 30, textAlign: 'right' }}>{t.count}</span>
+          </div>
+        ))}
+      </section>
+      <section style={{ marginTop: 16 }}>
+        <h3 style={{ fontSize: 14, marginBottom: 4 }}>마감 진행</h3>
+        <div style={{ fontSize: 13, color: '#444' }}>
+          완료 {reviewData.dueProgress.passed} / {reviewData.dueProgress.total} · 대기 {reviewData.dueProgress.pending}
+        </div>
+      </section>
+      <section style={{ marginTop: 16 }}>
+        <h3 style={{ fontSize: 14, marginBottom: 4 }}>최근 노트 ({reviewData.recentNotes.length})</h3>
+        {reviewData.recentNotes.map((n) => (
+          <NoteCard key={n.id} note={n} mode="inbox" onUpdated={() => {}} />
+        ))}
+      </section>
+    </div>
+  );
+}
diff --git a/tests/unit/ReviewView.test.tsx b/tests/unit/ReviewView.test.tsx
new file mode 100644
index 0000000..e94268a
--- /dev/null
+++ b/tests/unit/ReviewView.test.tsx
@@ -0,0 +1,64 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import React from 'react';
+
+const baseState = {
+  reviewData: {
+    totalCount: 12,
+    recentNotes: [],
+    tagCounts: [{ tag: '회의', count: 5 }, { tag: '결재', count: 3 }],
+    dueProgress: { total: 10, passed: 4, pending: 6 }
+  }
+};
+
+vi.mock('../../src/renderer/inbox/api.js', () => ({
+  inboxApi: {
+    openMedia: vi.fn(),
+    deleteNote: vi.fn(),
+    restoreNote: vi.fn(),
+    permanentDeleteNote: vi.fn(),
+    updateAiFields: vi.fn(),
+    setDueDate: vi.fn(),
+    setIntent: vi.fn(),
+    dismissIntent: vi.fn(),
+    setStatus: vi.fn(async () => ({ ok: true as const })),
+    classifyStatus: vi.fn(async () => ({ recommended: 'archived' as const, rationale: 'stub' })),
+    updateRawText: vi.fn(async () => ({ ok: true as const })),
+    listRevisions: vi.fn(async () => []),
+    getRevision: vi.fn()
+  }
+}));
+
+vi.mock('../../src/renderer/inbox/store.js', () => ({
+  useInbox: Object.assign(
+    (selector?: (s: typeof baseState) => unknown) => (selector ? selector(baseState) : baseState),
+    { getState: () => baseState }
+  )
+}));
+
+import { ReviewView } from '../../src/renderer/inbox/components/ReviewView';
+
+describe('ReviewView', () => {
+  beforeEach(() => { cleanup(); });
+
+  it('daily — 라벨 + totalCount + tagBar + dueProgress 렌더', () => {
+    render(<ReviewView period="daily" />);
+    expect(screen.getByText(/일간/)).toBeInTheDocument();
+    expect(screen.getByText(/총.*12건/)).toBeInTheDocument();
+    expect(screen.getByText('회의')).toBeInTheDocument();
+    expect(screen.getByText('결재')).toBeInTheDocument();
+    expect(screen.getByText(/4.*\/.*10/)).toBeInTheDocument();
+  });
+
+  it('weekly — 라벨 weekly', () => {
+    render(<ReviewView period="weekly" />);
+    expect(screen.getByText(/주간/)).toBeInTheDocument();
+  });
+
+  it('monthly — 라벨 monthly', () => {
+    render(<ReviewView period="monthly" />);
+    expect(screen.getByText(/월간/)).toBeInTheDocument();
+  });
+});