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

<script>
  import { X, ExternalLink } from 'lucide-svelte';
  import FormatIcon from './FormatIcon.svelte';
  import TagPill from './TagPill.svelte';

  let { doc, onclose } = $props();

  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>
    <button onclick={onclose} class="p-1 rounded hover:bg-[var(--surface)] text-[var(--text-dim)]" aria-label="닫기">
      <X size={16} />
    </button>
  </div>

  <div class="flex-1 p-4 space-y-4">
    <!-- 전체 보기 버튼 -->
    <a
      href="/documents/{doc.id}"
      class="flex items-center justify-center gap-2 w-full px-3 py-2 bg-[var(--accent)] text-white text-sm rounded-lg hover:bg-[var(--accent-hover)] transition-colors"
    >
      <ExternalLink size={14} />
      전체 보기
    </a>

    <!-- AI 요약 -->
    {#if doc.ai_summary}
      <div>
        <h4 class="text-xs font-semibold text-[var(--text-dim)] uppercase mb-1.5">AI 요약</h4>
        <p class="text-sm leading-relaxed">{doc.ai_summary}</p>
      </div>
    {/if}

    <!-- 태그 -->
    {#if doc.ai_tags?.length}
      <div>
        <h4 class="text-xs font-semibold text-[var(--text-dim)] uppercase mb-1.5">태그</h4>
        <div class="flex flex-wrap gap-1">
          {#each doc.ai_tags as tag}
            <TagPill {tag} />
          {/each}
        </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}</dd>
        </div>
        <div class="flex justify-between">
          <dt class="text-[var(--text-dim)]">크기</dt>
          <dd>{formatSize(doc.file_size)}</dd>
        </div>
        {#if doc.ai_domain}
          <div class="flex justify-between">
            <dt class="text-[var(--text-dim)]">분류</dt>
            <dd class="text-right">{doc.ai_domain.replace('Knowledge/', '')}{doc.ai_sub_group ? ` / ${doc.ai_sub_group}` : ''}</dd>
          </div>
        {/if}
        {#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>
</aside>