hyungi_document_server/frontend/src/lib/components/PreviewPanel.svelte

<script>
  import { X, ExternalLink, Plus, Save, Trash2 } from 'lucide-svelte';
  import { api } from '$lib/api';
  import { addToast } from '$lib/stores/toast';
  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-sidebar border-l border-default overflow-y-auto">
  <!-- 헤더 -->
  <div class="flex items-center justify-between px-4 py-3 border-b border-default 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-surface text-dim" title="전체 보기">
        <ExternalLink size={14} />
      </a>
      <button onclick={onclose} class="p-1 rounded hover:bg-surface 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-dim uppercase mb-1.5">메모</h4>
      {#if noteEditing}
        <textarea
          bind:value={noteText}
          class="w-full h-24 px-3 py-2 bg-bg border border-default rounded-lg text-sm text-text resize-none outline-none focus:border-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-accent text-white rounded hover:bg-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-dim hover:text-text"
          >취소</button>
        </div>
      {:else}
        <button
          onclick={() => noteEditing = true}
          class="w-full text-left px-3 py-2 bg-bg border border-default rounded-lg text-sm min-h-[40px]
            {noteText ? 'text-text' : 'text-dim'}"
        >
          {noteText || '메모 추가...'}
        </button>
      {/if}
    </div>

    <!-- 편집 URL -->
    <div>
      <h4 class="text-xs font-semibold 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-bg border border-default rounded text-xs text-text outline-none focus:border-accent"
          />
          <button onclick={saveEditUrl} class="px-2 py-1 text-xs bg-accent text-white rounded">저장</button>
          <button onclick={() => { editUrlEditing = false; editUrlText = doc.edit_url || ''; }} class="px-2 py-1 text-xs 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-accent truncate hover:underline">{doc.edit_url}</a>
          <button onclick={() => editUrlEditing = true} class="text-[10px] text-dim hover:text-text">수정</button>
        </div>
      {:else}
        <button
          onclick={() => editUrlEditing = true}
          class="text-xs text-dim hover:text-accent"
        >+ URL 추가</button>
      {/if}
    </div>

    <!-- 태그 -->
    <div>
      <h4 class="text-xs font-semibold 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-dim hover:text-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-bg border border-default rounded text-xs text-text outline-none focus:border-accent"
          />
          <button type="submit" class="px-2 py-1 text-xs bg-accent text-white rounded">추가</button>
        </form>
      {:else}
        <button
          onclick={() => tagEditing = true}
          class="flex items-center gap-1 text-xs text-dim hover:text-accent"
        >
          <Plus size={12} /> 태그 추가
        </button>
      {/if}
    </div>

    <!-- AI 분류 -->
    {#if doc.ai_domain}
      <div>
        <h4 class="text-xs font-semibold 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-dim">›</span>{/if}
            <span class="text-xs text-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-dim uppercase mb-1.5">정보</h4>
      <dl class="space-y-1.5 text-xs">
        <div class="flex justify-between">
          <dt class="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-dim">크기</dt>
          <dd>{formatSize(doc.file_size)}</dd>
        </div>
        {#if doc.source_channel}
          <div class="flex justify-between">
            <dt class="text-dim">출처</dt>
            <dd>{doc.source_channel}</dd>
          </div>
        {/if}
        {#if doc.data_origin}
          <div class="flex justify-between">
            <dt class="text-dim">구분</dt>
            <dd>{doc.data_origin}</dd>
          </div>
        {/if}
        <div class="flex justify-between">
          <dt class="text-dim">등록일</dt>
          <dd>{formatDate(doc.created_at)}</dd>
        </div>
      </dl>
    </div>

    <!-- 처리 상태 -->
    <div>
      <h4 class="text-xs font-semibold text-dim uppercase mb-1.5">처리</h4>
      <dl class="space-y-1 text-xs">
        <div class="flex justify-between">
          <dt class="text-dim">추출</dt>
          <dd class={doc.extracted_at ? 'text-success' : 'text-dim'}>{doc.extracted_at ? '완료' : '대기'}</dd>
        </div>
        <div class="flex justify-between">
          <dt class="text-dim">분류</dt>
          <dd class={doc.ai_processed_at ? 'text-success' : 'text-dim'}>{doc.ai_processed_at ? '완료' : '대기'}</dd>
        </div>
        <div class="flex justify-between">
          <dt class="text-dim">임베딩</dt>
          <dd class={doc.embedded_at ? 'text-success' : 'text-dim'}>{doc.embedded_at ? '완료' : '대기'}</dd>
        </div>
      </dl>
    </div>

    <!-- 삭제 -->
    <div class="pt-2 border-t border-default">
      {#if deleteConfirm}
        <div class="flex items-center gap-2">
          <span class="text-xs text-error">정말 삭제?</span>
          <button
            onclick={deleteDoc}
            disabled={deleting}
            class="px-2 py-1 text-xs bg-error text-white rounded disabled:opacity-50"
          >{deleting ? '삭제 중...' : '확인'}</button>
          <button
            onclick={() => deleteConfirm = false}
            class="px-2 py-1 text-xs text-dim"
          >취소</button>
        </div>
      {:else}
        <button
          onclick={() => deleteConfirm = true}
          class="flex items-center gap-1 text-xs text-dim hover:text-error"
        >
          <Trash2 size={12} /> 문서 삭제
        </button>
      {/if}
    </div>
  </div>
</aside>