feat(v029): MoveStatusModal — 사유 입력 + 4 status 버튼 + AI 자동 분류 placeholder
Cut B Task 7 — NoteCard 메뉴가 여는 modal. - 사유 textarea (선택) + 활성/완료/보관/휴지통 버튼 (옮기기 즉시 setStatus + onMoved) - 빈 사유 → null reason 전달 (trim 처리) - AI 자동 분류 버튼 → classifyStatus(stub) 호출 + 추천 표시 + 확정 버튼 - statusLabel helper export (NoteCard 메뉴에서 재사용) - 4 단위 테스트 (render / 버튼 클릭 / AI 추천 흐름 / 빈 사유 null)
This commit is contained in:
altair823
141
src/renderer/inbox/components/MoveStatusModal.tsx
Normal file
141
src/renderer/inbox/components/MoveStatusModal.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
import React, { useState } from 'react';
|
||||
import { inboxApi } from '../api.js';
|
||||
import type { NoteStatus } from '@shared/types';
|
||||
|
||||
interface Props {
|
||||
noteId: string;
|
||||
rawText: string;
|
||||
summary: string;
|
||||
initialTarget: NoteStatus;
|
||||
onClose: () => void;
|
||||
onMoved: (status: NoteStatus, reason: string | null) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* v0.2.9 Cut B Task 7 — 메모 이동 Modal.
|
||||
*
|
||||
* 사유 입력 + 4 status 버튼 (활성/완료/보관/휴지통) + AI 자동 분류 placeholder.
|
||||
* AI 분류는 Task 9 에서 정식 구현 — 본 task 는 stub IPC (`ai:classify-status`)
|
||||
* 호출 path 만 working state. 추천 결과는 화면 표시 + 확정 버튼 두 단계.
|
||||
*/
|
||||
export function MoveStatusModal({
|
||||
noteId,
|
||||
initialTarget: _initialTarget,
|
||||
onClose,
|
||||
onMoved
|
||||
}: Props): React.ReactElement {
|
||||
const [reason, setReason] = useState('');
|
||||
const [recommendation, setRecommendation] = useState<{
|
||||
status: NoteStatus;
|
||||
rationale: string;
|
||||
} | null>(null);
|
||||
const [classifying, setClassifying] = useState(false);
|
||||
|
||||
async function move(status: NoteStatus): Promise<void> {
|
||||
const trimmedReason = reason.trim() === '' ? null : reason.trim();
|
||||
await inboxApi.setStatus(noteId, status, trimmedReason);
|
||||
onMoved(status, trimmedReason);
|
||||
}
|
||||
|
||||
async function classify(): Promise<void> {
|
||||
setClassifying(true);
|
||||
setRecommendation(null);
|
||||
try {
|
||||
const r = await inboxApi.classifyStatus(noteId, reason);
|
||||
setRecommendation({ status: r.recommended, rationale: r.rationale });
|
||||
} finally {
|
||||
setClassifying(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-label="이동"
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
background: 'rgba(0,0,0,0.4)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 100
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: '#fff',
|
||||
padding: 16,
|
||||
borderRadius: 8,
|
||||
minWidth: 400,
|
||||
maxWidth: 520
|
||||
}}
|
||||
>
|
||||
<h2 style={{ fontSize: 16, margin: '0 0 12px' }}>메모 이동</h2>
|
||||
<textarea
|
||||
value={reason}
|
||||
onChange={(e) => setReason(e.target.value)}
|
||||
placeholder="이동 사유 (선택사항)"
|
||||
rows={2}
|
||||
style={{ width: '100%', padding: 6, fontSize: 13, boxSizing: 'border-box' }}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: 8,
|
||||
marginTop: 8,
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<button onClick={() => void classify()} disabled={classifying}>
|
||||
{classifying ? '분류 중...' : 'AI 자동 분류'}
|
||||
</button>
|
||||
<button onClick={() => void move('completed')}>완료</button>
|
||||
<button onClick={() => void move('archived')}>보관</button>
|
||||
<button onClick={() => void move('trashed')}>휴지통</button>
|
||||
<button onClick={onClose} style={{ marginLeft: 'auto' }}>
|
||||
취소
|
||||
</button>
|
||||
</div>
|
||||
{recommendation !== null && (
|
||||
<div
|
||||
style={{
|
||||
marginTop: 12,
|
||||
padding: 8,
|
||||
background: '#f0f8ff',
|
||||
borderRadius: 4,
|
||||
fontSize: 12
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
AI 추천: <strong>{statusLabel(recommendation.status)}</strong>
|
||||
</div>
|
||||
<div style={{ marginTop: 4 }}>이유: {recommendation.rationale}</div>
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<button onClick={() => void move(recommendation.status)}>
|
||||
확정 ({statusLabel(recommendation.status)})
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function statusLabel(s: NoteStatus): string {
|
||||
switch (s) {
|
||||
case 'active':
|
||||
return '활성';
|
||||
case 'completed':
|
||||
return '완료';
|
||||
case 'archived':
|
||||
return '보관';
|
||||
case 'trashed':
|
||||
return '휴지통';
|
||||
}
|
||||
}
|
||||
102
tests/unit/MoveStatusModal.test.tsx
Normal file
102
tests/unit/MoveStatusModal.test.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
// @vitest-environment jsdom
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import '@testing-library/jest-dom/vitest';
|
||||
import { render, screen, fireEvent, cleanup, waitFor } from '@testing-library/react';
|
||||
|
||||
const { mockSetStatus, mockClassify } = vi.hoisted(() => ({
|
||||
mockSetStatus: vi.fn(async () => ({ ok: true as const })),
|
||||
mockClassify: vi.fn(async () => ({
|
||||
recommended: 'completed' as const,
|
||||
rationale: '결재 끝'
|
||||
}))
|
||||
}));
|
||||
|
||||
vi.mock('../../src/renderer/inbox/api.js', () => ({
|
||||
inboxApi: {
|
||||
setStatus: mockSetStatus,
|
||||
classifyStatus: mockClassify
|
||||
}
|
||||
}));
|
||||
|
||||
import { MoveStatusModal } from '../../src/renderer/inbox/components/MoveStatusModal';
|
||||
|
||||
describe('MoveStatusModal', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
cleanup();
|
||||
});
|
||||
|
||||
it('renders reason textarea + 4 buttons + AI classify button', () => {
|
||||
render(
|
||||
<MoveStatusModal
|
||||
noteId="n1"
|
||||
rawText="t"
|
||||
summary=""
|
||||
initialTarget="completed"
|
||||
onClose={vi.fn()}
|
||||
onMoved={vi.fn()}
|
||||
/>
|
||||
);
|
||||
expect(screen.getByRole('textbox')).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: '완료' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: '보관' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: '휴지통' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /AI 자동 분류/ })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('clicking 완료 calls setStatus with reason', async () => {
|
||||
const onMoved = vi.fn();
|
||||
render(
|
||||
<MoveStatusModal
|
||||
noteId="n1"
|
||||
rawText="t"
|
||||
summary=""
|
||||
initialTarget="completed"
|
||||
onClose={vi.fn()}
|
||||
onMoved={onMoved}
|
||||
/>
|
||||
);
|
||||
fireEvent.change(screen.getByRole('textbox'), { target: { value: '결재 끝' } });
|
||||
fireEvent.click(screen.getByRole('button', { name: '완료' }));
|
||||
await waitFor(() => {
|
||||
expect(mockSetStatus).toHaveBeenCalledWith('n1', 'completed', '결재 끝');
|
||||
expect(onMoved).toHaveBeenCalledWith('completed', '결재 끝');
|
||||
});
|
||||
});
|
||||
|
||||
it('AI 자동 분류 → recommendation 표시 + 확정 → setStatus', async () => {
|
||||
const onMoved = vi.fn();
|
||||
render(
|
||||
<MoveStatusModal
|
||||
noteId="n1"
|
||||
rawText="t"
|
||||
summary=""
|
||||
initialTarget="completed"
|
||||
onClose={vi.fn()}
|
||||
onMoved={onMoved}
|
||||
/>
|
||||
);
|
||||
fireEvent.change(screen.getByRole('textbox'), { target: { value: '결재 끝' } });
|
||||
fireEvent.click(screen.getByRole('button', { name: /AI 자동 분류/ }));
|
||||
await screen.findByText(/AI 추천/);
|
||||
expect(screen.getByText(/이유: 결재 끝/)).toBeInTheDocument();
|
||||
fireEvent.click(screen.getByRole('button', { name: /확정/ }));
|
||||
await waitFor(() => expect(onMoved).toHaveBeenCalledWith('completed', '결재 끝'));
|
||||
});
|
||||
|
||||
it('빈 사유 → null reason 전달', async () => {
|
||||
const onMoved = vi.fn();
|
||||
render(
|
||||
<MoveStatusModal
|
||||
noteId="n1"
|
||||
rawText="t"
|
||||
summary=""
|
||||
initialTarget="archived"
|
||||
onClose={vi.fn()}
|
||||
onMoved={onMoved}
|
||||
/>
|
||||
);
|
||||
fireEvent.click(screen.getByRole('button', { name: '보관' }));
|
||||
await waitFor(() => expect(mockSetStatus).toHaveBeenCalledWith('n1', 'archived', null));
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user