bf0506023c
- domain 경로를 breadcrumb으로 표시 (Industrial_Safety › Practice › Patrol_Inspection) - document_type 배지 (파란색) - confidence 배지 (85%+ 초록, 60~85% 주황, <60% 빨강) - importance 배지 (high만 표시) - 원본 포맷 표시 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
345 lines
12 KiB
Svelte
345 lines
12 KiB
Svelte
<script>
|
||
import { X, ExternalLink, Plus, Save, Trash2 } from 'lucide-svelte';
|
||
import { api } from '$lib/api';
|
||
import { addToast } from '$lib/stores/ui';
|
||
import FormatIcon from './FormatIcon.svelte';
|
||
import TagPill from './TagPill.svelte';
|
||
|
||
let { doc, onclose, ondelete = () => {} } = $props();
|
||
|
||
// 메모 상태
|
||
let noteText = $state('');
|
||
let noteEditing = $state(false);
|
||
let noteSaving = $state(false);
|
||
|
||
// 태그 편집
|
||
let newTag = $state('');
|
||
let tagEditing = $state(false);
|
||
|
||
// 삭제
|
||
let deleteConfirm = $state(false);
|
||
let deleting = $state(false);
|
||
|
||
async function deleteDoc() {
|
||
deleting = true;
|
||
try {
|
||
await api(`/documents/${doc.id}?delete_file=true`, { method: 'DELETE' });
|
||
addToast('success', '문서 삭제됨');
|
||
ondelete();
|
||
} catch (err) {
|
||
addToast('error', '삭제 실패');
|
||
} finally {
|
||
deleting = false;
|
||
deleteConfirm = false;
|
||
}
|
||
}
|
||
|
||
// 편집 URL
|
||
let editUrlText = $state('');
|
||
let editUrlEditing = $state(false);
|
||
|
||
// doc 변경 시 초기화
|
||
$effect(() => {
|
||
if (doc) {
|
||
noteText = doc.user_note || '';
|
||
editUrlText = doc.edit_url || '';
|
||
noteEditing = false;
|
||
tagEditing = false;
|
||
editUrlEditing = false;
|
||
newTag = '';
|
||
}
|
||
});
|
||
|
||
async function saveNote() {
|
||
noteSaving = true;
|
||
try {
|
||
await api(`/documents/${doc.id}`, {
|
||
method: 'PATCH',
|
||
body: JSON.stringify({ user_note: noteText }),
|
||
});
|
||
doc.user_note = noteText;
|
||
noteEditing = false;
|
||
addToast('success', '메모 저장됨');
|
||
} catch (err) {
|
||
addToast('error', '메모 저장 실패');
|
||
} finally {
|
||
noteSaving = false;
|
||
}
|
||
}
|
||
|
||
async function saveEditUrl() {
|
||
try {
|
||
await api(`/documents/${doc.id}`, {
|
||
method: 'PATCH',
|
||
body: JSON.stringify({ edit_url: editUrlText.trim() || null }),
|
||
});
|
||
doc.edit_url = editUrlText.trim() || null;
|
||
editUrlEditing = false;
|
||
addToast('success', '편집 URL 저장됨');
|
||
} catch (err) {
|
||
addToast('error', '편집 URL 저장 실패');
|
||
}
|
||
}
|
||
|
||
async function addTag() {
|
||
const tag = newTag.trim();
|
||
if (!tag) return;
|
||
const updatedTags = [...(doc.ai_tags || []), tag];
|
||
try {
|
||
await api(`/documents/${doc.id}`, {
|
||
method: 'PATCH',
|
||
body: JSON.stringify({ ai_tags: updatedTags }),
|
||
});
|
||
doc.ai_tags = updatedTags;
|
||
newTag = '';
|
||
addToast('success', '태그 추가됨');
|
||
} catch (err) {
|
||
addToast('error', '태그 추가 실패');
|
||
}
|
||
}
|
||
|
||
async function removeTag(tagToRemove) {
|
||
const updatedTags = (doc.ai_tags || []).filter(t => t !== tagToRemove);
|
||
try {
|
||
await api(`/documents/${doc.id}`, {
|
||
method: 'PATCH',
|
||
body: JSON.stringify({ ai_tags: updatedTags }),
|
||
});
|
||
doc.ai_tags = updatedTags;
|
||
addToast('success', '태그 삭제됨');
|
||
} catch (err) {
|
||
addToast('error', '태그 삭제 실패');
|
||
}
|
||
}
|
||
|
||
function formatDate(dateStr) {
|
||
if (!dateStr) return '-';
|
||
return new Date(dateStr).toLocaleDateString('ko-KR', { year: 'numeric', month: 'short', day: 'numeric' });
|
||
}
|
||
|
||
function formatSize(bytes) {
|
||
if (!bytes) return '-';
|
||
if (bytes < 1024) return `${bytes}B`;
|
||
if (bytes < 1048576) return `${(bytes / 1024).toFixed(0)}KB`;
|
||
return `${(bytes / 1048576).toFixed(1)}MB`;
|
||
}
|
||
</script>
|
||
|
||
<aside class="h-full flex flex-col bg-[var(--sidebar-bg)] border-l border-[var(--border)] overflow-y-auto">
|
||
<!-- 헤더 -->
|
||
<div class="flex items-center justify-between px-4 py-3 border-b border-[var(--border)] shrink-0">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<FormatIcon format={doc.file_format} size={16} />
|
||
<span class="text-sm font-medium truncate">{doc.title || '제목 없음'}</span>
|
||
</div>
|
||
<div class="flex items-center gap-1">
|
||
<a href="/documents/{doc.id}" class="p-1 rounded hover:bg-[var(--surface)] text-[var(--text-dim)]" title="전체 보기">
|
||
<ExternalLink size={14} />
|
||
</a>
|
||
<button onclick={onclose} class="p-1 rounded hover:bg-[var(--surface)] text-[var(--text-dim)]" aria-label="닫기">
|
||
<X size={16} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex-1 p-4 space-y-4">
|
||
<!-- 메모 -->
|
||
<div>
|
||
<h4 class="text-xs font-semibold text-[var(--text-dim)] uppercase mb-1.5">메모</h4>
|
||
{#if noteEditing}
|
||
<textarea
|
||
bind:value={noteText}
|
||
class="w-full h-24 px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg text-sm text-[var(--text)] resize-none outline-none focus:border-[var(--accent)]"
|
||
placeholder="메모 입력..."
|
||
></textarea>
|
||
<div class="flex gap-2 mt-1.5">
|
||
<button
|
||
onclick={saveNote}
|
||
disabled={noteSaving}
|
||
class="flex items-center gap-1 px-2 py-1 text-xs bg-[var(--accent)] text-white rounded hover:bg-[var(--accent-hover)] disabled:opacity-50"
|
||
>
|
||
<Save size={12} /> 저장
|
||
</button>
|
||
<button
|
||
onclick={() => { noteEditing = false; noteText = doc.user_note || ''; }}
|
||
class="px-2 py-1 text-xs text-[var(--text-dim)] hover:text-[var(--text)]"
|
||
>취소</button>
|
||
</div>
|
||
{:else}
|
||
<button
|
||
onclick={() => noteEditing = true}
|
||
class="w-full text-left px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg text-sm min-h-[40px]
|
||
{noteText ? 'text-[var(--text)]' : 'text-[var(--text-dim)]'}"
|
||
>
|
||
{noteText || '메모 추가...'}
|
||
</button>
|
||
{/if}
|
||
</div>
|
||
|
||
<!-- 편집 URL -->
|
||
<div>
|
||
<h4 class="text-xs font-semibold text-[var(--text-dim)] uppercase mb-1.5">편집 링크</h4>
|
||
{#if editUrlEditing}
|
||
<div class="flex gap-1">
|
||
<input
|
||
bind:value={editUrlText}
|
||
placeholder="Synology Drive URL 붙여넣기..."
|
||
class="flex-1 px-2 py-1 bg-[var(--bg)] border border-[var(--border)] rounded text-xs text-[var(--text)] outline-none focus:border-[var(--accent)]"
|
||
/>
|
||
<button onclick={saveEditUrl} class="px-2 py-1 text-xs bg-[var(--accent)] text-white rounded">저장</button>
|
||
<button onclick={() => { editUrlEditing = false; editUrlText = doc.edit_url || ''; }} class="px-2 py-1 text-xs text-[var(--text-dim)]">취소</button>
|
||
</div>
|
||
{:else if doc.edit_url}
|
||
<div class="flex items-center gap-1">
|
||
<a href={doc.edit_url} target="_blank" class="text-xs text-[var(--accent)] truncate hover:underline">{doc.edit_url}</a>
|
||
<button onclick={() => editUrlEditing = true} class="text-[10px] text-[var(--text-dim)] hover:text-[var(--text)]">수정</button>
|
||
</div>
|
||
{:else}
|
||
<button
|
||
onclick={() => editUrlEditing = true}
|
||
class="text-xs text-[var(--text-dim)] hover:text-[var(--accent)]"
|
||
>+ URL 추가</button>
|
||
{/if}
|
||
</div>
|
||
|
||
<!-- 태그 -->
|
||
<div>
|
||
<h4 class="text-xs font-semibold text-[var(--text-dim)] uppercase mb-1.5">태그</h4>
|
||
<div class="flex flex-wrap gap-1 mb-2">
|
||
{#each doc.ai_tags || [] as tag}
|
||
<span class="inline-flex items-center gap-0.5">
|
||
<TagPill {tag} clickable={false} />
|
||
<button
|
||
onclick={() => removeTag(tag)}
|
||
class="text-[var(--text-dim)] hover:text-[var(--error)] text-[10px]"
|
||
title="삭제"
|
||
>×</button>
|
||
</span>
|
||
{/each}
|
||
</div>
|
||
{#if tagEditing}
|
||
<form onsubmit={(e) => { e.preventDefault(); addTag(); }} class="flex gap-1">
|
||
<input
|
||
bind:value={newTag}
|
||
placeholder="태그 입력..."
|
||
class="flex-1 px-2 py-1 bg-[var(--bg)] border border-[var(--border)] rounded text-xs text-[var(--text)] outline-none focus:border-[var(--accent)]"
|
||
/>
|
||
<button type="submit" class="px-2 py-1 text-xs bg-[var(--accent)] text-white rounded">추가</button>
|
||
</form>
|
||
{:else}
|
||
<button
|
||
onclick={() => tagEditing = true}
|
||
class="flex items-center gap-1 text-xs text-[var(--text-dim)] hover:text-[var(--accent)]"
|
||
>
|
||
<Plus size={12} /> 태그 추가
|
||
</button>
|
||
{/if}
|
||
</div>
|
||
|
||
<!-- AI 분류 -->
|
||
{#if doc.ai_domain}
|
||
<div>
|
||
<h4 class="text-xs font-semibold text-[var(--text-dim)] uppercase mb-1.5">분류</h4>
|
||
<!-- domain breadcrumb -->
|
||
<div class="flex flex-wrap gap-1 mb-2">
|
||
{#each doc.ai_domain.split('/') as part, i}
|
||
{#if i > 0}<span class="text-[10px] text-[var(--text-dim)]">›</span>{/if}
|
||
<span class="text-xs text-[var(--accent)]">{part}</span>
|
||
{/each}
|
||
</div>
|
||
<!-- document_type + confidence -->
|
||
<div class="flex items-center gap-2">
|
||
{#if doc.document_type}
|
||
<span class="text-[10px] px-1.5 py-0.5 rounded bg-blue-900/30 text-blue-400">{doc.document_type}</span>
|
||
{/if}
|
||
{#if doc.ai_confidence}
|
||
<span class="text-[10px] px-1.5 py-0.5 rounded {doc.ai_confidence >= 0.85 ? 'bg-green-900/30 text-green-400' : doc.ai_confidence >= 0.6 ? 'bg-amber-900/30 text-amber-400' : 'bg-red-900/30 text-red-400'}">
|
||
{(doc.ai_confidence * 100).toFixed(0)}%
|
||
</span>
|
||
{/if}
|
||
{#if doc.importance && doc.importance !== 'medium'}
|
||
<span class="text-[10px] px-1.5 py-0.5 rounded {doc.importance === 'high' ? 'bg-red-900/30 text-red-400' : 'bg-gray-800 text-gray-400'}">
|
||
{doc.importance}
|
||
</span>
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
|
||
<!-- 파일 정보 -->
|
||
<div>
|
||
<h4 class="text-xs font-semibold text-[var(--text-dim)] uppercase mb-1.5">정보</h4>
|
||
<dl class="space-y-1.5 text-xs">
|
||
<div class="flex justify-between">
|
||
<dt class="text-[var(--text-dim)]">포맷</dt>
|
||
<dd class="uppercase">{doc.file_format}{doc.original_format ? ` (원본: ${doc.original_format})` : ''}</dd>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<dt class="text-[var(--text-dim)]">크기</dt>
|
||
<dd>{formatSize(doc.file_size)}</dd>
|
||
</div>
|
||
{#if doc.source_channel}
|
||
<div class="flex justify-between">
|
||
<dt class="text-[var(--text-dim)]">출처</dt>
|
||
<dd>{doc.source_channel}</dd>
|
||
</div>
|
||
{/if}
|
||
{#if doc.data_origin}
|
||
<div class="flex justify-between">
|
||
<dt class="text-[var(--text-dim)]">구분</dt>
|
||
<dd>{doc.data_origin}</dd>
|
||
</div>
|
||
{/if}
|
||
<div class="flex justify-between">
|
||
<dt class="text-[var(--text-dim)]">등록일</dt>
|
||
<dd>{formatDate(doc.created_at)}</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
|
||
<!-- 처리 상태 -->
|
||
<div>
|
||
<h4 class="text-xs font-semibold text-[var(--text-dim)] uppercase mb-1.5">처리</h4>
|
||
<dl class="space-y-1 text-xs">
|
||
<div class="flex justify-between">
|
||
<dt class="text-[var(--text-dim)]">추출</dt>
|
||
<dd class={doc.extracted_at ? 'text-[var(--success)]' : 'text-[var(--text-dim)]'}>{doc.extracted_at ? '완료' : '대기'}</dd>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<dt class="text-[var(--text-dim)]">분류</dt>
|
||
<dd class={doc.ai_processed_at ? 'text-[var(--success)]' : 'text-[var(--text-dim)]'}>{doc.ai_processed_at ? '완료' : '대기'}</dd>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<dt class="text-[var(--text-dim)]">임베딩</dt>
|
||
<dd class={doc.embedded_at ? 'text-[var(--success)]' : 'text-[var(--text-dim)]'}>{doc.embedded_at ? '완료' : '대기'}</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
|
||
<!-- 삭제 -->
|
||
<div class="pt-2 border-t border-[var(--border)]">
|
||
{#if deleteConfirm}
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-xs text-[var(--error)]">정말 삭제?</span>
|
||
<button
|
||
onclick={deleteDoc}
|
||
disabled={deleting}
|
||
class="px-2 py-1 text-xs bg-[var(--error)] text-white rounded disabled:opacity-50"
|
||
>{deleting ? '삭제 중...' : '확인'}</button>
|
||
<button
|
||
onclick={() => deleteConfirm = false}
|
||
class="px-2 py-1 text-xs text-[var(--text-dim)]"
|
||
>취소</button>
|
||
</div>
|
||
{:else}
|
||
<button
|
||
onclick={() => deleteConfirm = true}
|
||
class="flex items-center gap-1 text-xs text-[var(--text-dim)] hover:text-[var(--error)]"
|
||
>
|
||
<Trash2 size={12} /> 문서 삭제
|
||
</button>
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
</aside>
|