feat(v0211): ReviewView — 일/주/월 회고 + 헤더 dropdown 진입점
This commit is contained in:
@@ -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 />
|
||||
|
||||
56
src/renderer/inbox/components/ReviewView.tsx
Normal file
56
src/renderer/inbox/components/ReviewView.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
64
tests/unit/ReviewView.test.tsx
Normal file
64
tests/unit/ReviewView.test.tsx
Normal 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();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user