feat(v029): NoteCard 이동 메뉴 (status 4분기 dropdown)
Cut B Task 6 — 모든 view 공통 "이동 ▾" dropdown. - 기존 휴지통/삭제 버튼 위치에 dropdown 추가 (모든 mode 공통) - 현재 status 외 3개 목적지만 표시 (active 노트 → 완료/보관/휴지통) - 메뉴 항목 클릭 → MoveStatusModal(initialTarget) 열기 - onMoved → local 상태 갱신 + onUpdated + (status 변경 시) onDeleted (list 제거) - trash mode 의 영구 삭제/복구 버튼은 보존 (휴지통 단독 액션) - 사용되지 않게 된 handleDelete 제거 (deleteNote 는 capture path 만) - NoteCard 메뉴 단위 테스트 2건 (메뉴 표시 / 클릭 → modal → setStatus)
This commit is contained in:
@@ -1,10 +1,11 @@
|
||||
import React, { useState } from 'react';
|
||||
import type { Note } from '@shared/types';
|
||||
import type { Note, NoteStatus } from '@shared/types';
|
||||
import { inboxApi } from '../api.js';
|
||||
import { useInbox } from '../store.js';
|
||||
import { EditableField } from './EditableField.js';
|
||||
import { IntentBanner } from './IntentBanner.js';
|
||||
import { pushTagUndo } from './TagUndoToast.js';
|
||||
import { MoveStatusModal, statusLabel } from './MoveStatusModal.js';
|
||||
|
||||
interface Props {
|
||||
note: Note;
|
||||
@@ -111,17 +112,18 @@ export function NoteCard({ note, onDeleted, onUpdated, mode = 'inbox', onRestore
|
||||
const isTrash = mode === 'trash';
|
||||
const [rawOpen, setRawOpen] = useState(note.aiStatus !== 'done');
|
||||
const [local, setLocal] = useState(note);
|
||||
// v0.2.9 Cut B Task 6 — 이동 메뉴 dropdown + MoveStatusModal target.
|
||||
const [moveTarget, setMoveTarget] = useState<NoteStatus | null>(null);
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
||||
const possibleTargets: NoteStatus[] = (
|
||||
['active', 'completed', 'archived', 'trashed'] as NoteStatus[]
|
||||
).filter((s) => s !== local.status);
|
||||
|
||||
React.useEffect(() => { setLocal(note); }, [note]);
|
||||
|
||||
const formatted = new Date(note.createdAt).toLocaleString('ko-KR');
|
||||
|
||||
async function handleDelete() {
|
||||
if (!window.confirm('이 기억을 버릴까요? 되돌릴 수 없습니다.')) return;
|
||||
await inboxApi.deleteNote(note.id);
|
||||
onDeleted?.();
|
||||
}
|
||||
|
||||
async function saveTitle(next: string) {
|
||||
await inboxApi.updateAiFields(note.id, { title: next });
|
||||
const updated = { ...local, aiTitle: next, titleEditedByUser: true };
|
||||
@@ -366,33 +368,116 @@ export function NoteCard({ note, onDeleted, onUpdated, mode = 'inbox', onRestore
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: 10, textAlign: 'right' }}>
|
||||
{isTrash ? (
|
||||
<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: 8,
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
{/* v0.2.9 Cut B Task 6 — 모든 view 공통 "이동 ▾" dropdown.
|
||||
현재 status 와 다른 3개 목적지만 표시. */}
|
||||
<div style={{ position: 'relative' }}>
|
||||
<button
|
||||
onClick={onRestore}
|
||||
onClick={() => setMenuOpen((o) => !o)}
|
||||
aria-label="이동"
|
||||
style={{
|
||||
background: 'none', border: '1px solid #0a4b80', color: '#0a4b80',
|
||||
cursor: 'pointer', fontSize: 12, padding: '4px 10px', borderRadius: 4
|
||||
background: 'none',
|
||||
border: '1px solid #ccc',
|
||||
color: '#444',
|
||||
cursor: 'pointer',
|
||||
fontSize: 12,
|
||||
padding: '4px 10px',
|
||||
borderRadius: 4
|
||||
}}
|
||||
>
|
||||
🔄 복구
|
||||
</button>
|
||||
<button
|
||||
onClick={onPermanentDelete}
|
||||
style={{
|
||||
background: 'none', border: '1px solid #c93030', color: '#c93030',
|
||||
cursor: 'pointer', fontSize: 12, padding: '4px 10px', borderRadius: 4
|
||||
}}
|
||||
>
|
||||
🗑 영구 삭제
|
||||
이동 ▾
|
||||
</button>
|
||||
{menuOpen && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '100%',
|
||||
marginTop: 2,
|
||||
background: '#fff',
|
||||
border: '1px solid #ccc',
|
||||
borderRadius: 4,
|
||||
padding: 4,
|
||||
zIndex: 10,
|
||||
minWidth: 140,
|
||||
boxShadow: '0 2px 6px rgba(0,0,0,0.08)'
|
||||
}}
|
||||
>
|
||||
{possibleTargets.map((t) => (
|
||||
<button
|
||||
key={t}
|
||||
onClick={() => {
|
||||
setMoveTarget(t);
|
||||
setMenuOpen(false);
|
||||
}}
|
||||
style={{
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
textAlign: 'left',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
padding: '6px 8px',
|
||||
fontSize: 12,
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
{statusLabel(t)}로 이동
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<button onClick={() => void handleDelete()} style={{ background: 'none', border: 'none', color: '#c93030', cursor: 'pointer', fontSize: 12 }}>
|
||||
🗑 삭제
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* trash mode 만 영구 삭제 + 복구 보존 (휴지통 단독 액션). */}
|
||||
{isTrash && (
|
||||
<>
|
||||
<button
|
||||
onClick={onRestore}
|
||||
style={{
|
||||
background: 'none', border: '1px solid #0a4b80', color: '#0a4b80',
|
||||
cursor: 'pointer', fontSize: 12, padding: '4px 10px', borderRadius: 4
|
||||
}}
|
||||
>
|
||||
🔄 복구
|
||||
</button>
|
||||
<button
|
||||
onClick={onPermanentDelete}
|
||||
style={{
|
||||
background: 'none', border: '1px solid #c93030', color: '#c93030',
|
||||
cursor: 'pointer', fontSize: 12, padding: '4px 10px', borderRadius: 4
|
||||
}}
|
||||
>
|
||||
🗑 영구 삭제
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{moveTarget !== null && (
|
||||
<MoveStatusModal
|
||||
noteId={local.id}
|
||||
rawText={local.rawText}
|
||||
summary={local.aiSummary ?? ''}
|
||||
initialTarget={moveTarget}
|
||||
onClose={() => setMoveTarget(null)}
|
||||
onMoved={(newStatus, reason) => {
|
||||
const updated = { ...local, status: newStatus, moveReason: reason };
|
||||
setLocal(updated);
|
||||
onUpdated(updated);
|
||||
// inbox/trash mode 의 list 가 status 별로 필터되므로 onDeleted (제거) 도 호출.
|
||||
if (newStatus !== local.status) onDeleted?.();
|
||||
setMoveTarget(null);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user