feat(v0211): ReviewView — 일/주/월 회고 + 헤더 dropdown 진입점

This commit is contained in:
altair823
2026-05-10 00:39:36 +09:00
parent be125b8ace
commit 9feb712c60
3 changed files with 140 additions and 0 deletions

View File

@@ -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 />

View File

@@ -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>
);
}

View File

@@ -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();
});
});