Hyungi Ahn
4938b25d12
E.1 PreviewPanel 7개 editors/* 분할:
- frontend/src/lib/components/editors/ 신설 (7개 컴포넌트):
* NoteEditor — 사용자 메모 편집
* EditUrlEditor — 외부 편집 URL (Synology Drive 등)
* TagsEditor — 태그 추가/삭제
* AIClassificationEditor — AI 분류 read-only 표시
(breadcrumb + document_type + confidence tone Badge + importance)
* FileInfoView — 파일 메타 dl
* ProcessingStatusView — 파이프라인 단계 status dl
* DocumentDangerZone — 삭제 (ConfirmDialog 프리미티브 + id 고유화)
- PreviewPanel.svelte 344줄 → 60줄 얇은 wrapper로 축소
(header + 7개 editors 조합만)
- DocumentMetaRail (D.1)과 detail 페이지(E.2)가 동일 editors 재사용
E.2 detail 페이지 inline 편집:
- documents/[id]/+page.svelte: 기존 read-only 메타 패널 전면 교체
- 오른쪽 aside = 7개 editors 스택 (Card 프리미티브로 감쌈)
- 왼쪽 affordance row: Synology 편집 / 다운로드 / 링크 복사
- 삭제는 DocumentDangerZone이 담당 (ondelete → goto /documents)
- loading/error 상태도 EmptyState 프리미티브로 교체
- marked/DOMPurify renderer 유지, viewer 분기 그대로
E.3 관련 문서 stub:
- detail 페이지 오른쪽 aside에 "관련 문서" Card
- EmptyState "추후 지원" + TODO(backend) GET /documents/{id}/related
E.4 DocumentViewer Tabs 프리미티브:
- Markdown 편집 모드의 편집/미리보기 토글 → Tabs 프리미티브
- 키보드 nav (←→/Home/End), ARIA tablist/tab/tabpanel 자동 적용
검증:
- npm run build 통과 (editors/* 7개 모두 clean, $state 초기값
warning은 빈 문자열로 초기화하고 $effect로 doc 동기화해 해결)
- npm run lint:tokens 204 → 168 (detail 페이지 + PreviewPanel 전면
token 기반 재작성으로 -36)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
35 lines
975 B
Svelte
35 lines
975 B
Svelte
<script>
|
|
// Phase E.1 — 파이프라인 처리 단계 상태 표시.
|
|
import { CheckCircle2, Clock } from 'lucide-svelte';
|
|
|
|
let { doc } = $props();
|
|
|
|
const STAGES = [
|
|
{ key: 'extracted_at', label: '추출' },
|
|
{ key: 'ai_processed_at', label: '분류' },
|
|
{ key: 'embedded_at', label: '임베딩' },
|
|
];
|
|
</script>
|
|
|
|
<div>
|
|
<h4 class="text-xs font-semibold text-dim uppercase mb-1.5">처리</h4>
|
|
<dl class="space-y-1 text-xs">
|
|
{#each STAGES as stage}
|
|
{@const done = !!doc[stage.key]}
|
|
<div class="flex items-center justify-between">
|
|
<dt class="text-dim flex items-center gap-1">
|
|
{#if done}
|
|
<CheckCircle2 size={10} class="text-success" />
|
|
{:else}
|
|
<Clock size={10} class="text-faint" />
|
|
{/if}
|
|
{stage.label}
|
|
</dt>
|
|
<dd class={done ? 'text-success' : 'text-dim'}>
|
|
{done ? '완료' : '대기'}
|
|
</dd>
|
|
</div>
|
|
{/each}
|
|
</dl>
|
|
</div>
|