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

<script>
  import { api, getAccessToken } from '$lib/api';
  import { addToast } from '$lib/stores/toast';
  import { marked } from 'marked';
  import DOMPurify from 'dompurify';
  import { ExternalLink, Save, RefreshCw } from 'lucide-svelte';
  import Tabs from '$lib/components/ui/Tabs.svelte';

  // marked + sanitize
  marked.use({ mangle: false, headerIds: false });
  function renderMd(text) {
    return DOMPurify.sanitize(marked(text), {
      USE_PROFILES: { html: true },
      FORBID_TAGS: ['style', 'script'],
      FORBID_ATTR: ['onerror', 'onclick'],
      ALLOW_UNKNOWN_PROTOCOLS: false,
    });
  }

  let { doc } = $props();
  let fullDoc = $state(null);
  let loading = $state(true);
  let viewerType = $state('none');

  // Markdown 편집
  let editMode = $state(false);
  let editContent = $state('');
  let editTab = $state('edit');
  let saving = $state(false);
  let rawMarkdown = $state('');

  function getViewerType(format) {
    if (['md', 'txt'].includes(format)) return 'markdown';
    if (format === 'pdf') return 'pdf';
    if (['hwp', 'hwpx'].includes(format)) return 'preview-pdf';
    if (['odoc', 'osheet', 'docx', 'xlsx', 'pptx', 'odt', 'ods', 'odp'].includes(format)) return 'preview-pdf';
    if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff'].includes(format)) return 'image';
    if (['csv', 'json', 'xml', 'html'].includes(format)) return 'text';
    if (['dwg', 'dxf'].includes(format)) return 'cad';
    return 'unsupported';
  }

  const ODF_FORMATS = ['ods', 'odt', 'odp', 'odoc', 'osheet'];

  function getEditInfo(doc) {
    // DB에 저장된 편집 URL 우선
    if (doc.edit_url) return { url: doc.edit_url, label: '편집' };
    // ODF 포맷 → Synology Drive
    if (ODF_FORMATS.includes(doc.file_format)) return { url: 'https://link.hyungi.net', label: 'Synology Drive에서 열기' };
    // CAD
    if (['dwg', 'dxf'].includes(doc.file_format)) return { url: 'https://web.autocad.com', label: 'AutoCAD Web' };
    return null;
  }

  $effect(() => {
    if (doc?.id) {
      loadFullDoc(doc.id);
      editMode = false;
    }
  });

  async function loadFullDoc(id) {
    loading = true;
    try {
      fullDoc = await api(`/documents/${id}`);
      viewerType = fullDoc.source_channel === 'news' ? 'article' : getViewerType(fullDoc.file_format);

      // Markdown: extracted_text 없으면 원본 파일 직접 가져오기
      if (viewerType === 'markdown' && !fullDoc.extracted_text) {
        try {
          const resp = await fetch(`/api/documents/${id}/file?token=${getAccessToken()}`);
          if (resp.ok) rawMarkdown = await resp.text();
        } catch (e) { rawMarkdown = ''; }
      } else {
        rawMarkdown = '';
      }
    } catch (err) {
      fullDoc = null;
      viewerType = 'none';
    } finally {
      loading = false;
    }
  }

  function startEdit() {
    editContent = fullDoc?.extracted_text || rawMarkdown || '';
    editMode = true;
    editTab = 'edit';
  }

  async function saveContent() {
    saving = true;
    try {
      await api(`/documents/${fullDoc.id}/content`, {
        method: 'PUT',
        body: JSON.stringify({ content: editContent }),
      });
      fullDoc.extracted_text = editContent;
      editMode = false;
      addToast('success', '저장됨');
    } catch (err) {
      addToast('error', '저장 실패');
    } finally {
      saving = false;
    }
  }

  function handleKeydown(e) {
    if ((e.metaKey || e.ctrlKey) && e.key === 's' && editMode) {
      e.preventDefault();
      saveContent();
    }
  }

  let editInfo = $derived(fullDoc ? getEditInfo(fullDoc) : null);
</script>

<svelte:window on:keydown={handleKeydown} />

<div class="h-full flex flex-col bg-surface border-t border-default">
  <!-- 뷰어 툴바 -->
  {#if fullDoc && !loading}
    <div class="flex items-center justify-between px-3 py-1.5 border-b border-default bg-sidebar shrink-0">
      <span class="text-xs text-dim truncate">{fullDoc.title || '제목 없음'}</span>
      <div class="flex items-center gap-2">
        {#if viewerType === 'markdown'}
          {#if editMode}
            <button
              onclick={saveContent}
              disabled={saving}
              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} /> {saving ? '저장 중...' : '저장'}
            </button>
            <button
              onclick={() => editMode = false}
              class="px-2 py-1 text-xs text-dim hover:text-text"
            >취소</button>
          {:else}
            <button
              onclick={startEdit}
              class="px-2 py-1 text-xs text-dim hover:text-accent border border-default rounded"
            >편집</button>
          {/if}
        {/if}
        {#if editInfo}
          <a
            href={editInfo.url}
            target="_blank"
            rel="noopener"
            class="flex items-center gap-1 px-2 py-1 text-xs text-dim hover:text-accent border border-default rounded"
          >
            <ExternalLink size={12} /> {editInfo.label}
          </a>
        {/if}
        <a
          href="/documents/{fullDoc.id}"
          class="px-2 py-1 text-xs text-dim hover:text-accent border border-default rounded"
        >전체 보기</a>
      </div>
    </div>
  {/if}

  <!-- 뷰어 본문 -->
  <div class="flex-1 overflow-auto min-h-0">
    {#if loading}
      <div class="flex items-center justify-center h-full">
        <p class="text-sm text-dim">로딩 중...</p>
      </div>
    {:else if fullDoc}
      {#if viewerType === 'markdown'}
        {#if editMode}
          <!-- Markdown 편집 (Tabs 프리미티브 — E.4) -->
          <div class="flex flex-col h-full">
            <Tabs
              tabs={[
                { id: 'edit', label: '편집' },
                { id: 'preview', label: '미리보기' },
              ]}
              bind:value={editTab}
              class="flex flex-col h-full"
            >
              {#snippet children(activeId)}
                {#if activeId === 'edit'}
                  <textarea
                    bind:value={editContent}
                    class="flex-1 w-full p-4 bg-bg text-text text-sm font-mono resize-none outline-none min-h-[300px]"
                    spellcheck="false"
                    aria-label="마크다운 편집"
                  ></textarea>
                {:else}
                  <div class="flex-1 overflow-auto p-4 markdown-body">
                    {@html renderMd(editContent)}
                  </div>
                {/if}
              {/snippet}
            </Tabs>
          </div>
        {:else}
          <div class="p-4 markdown-body">
            {@html renderMd(fullDoc.extracted_text || rawMarkdown || '*텍스트 추출 대기 중*')}
          </div>
        {/if}
      {:else if viewerType === 'pdf'}
        <iframe
          src="/api/documents/{fullDoc.id}/file?token={getAccessToken()}"
          class="w-full h-full border-0"
          title={fullDoc.title}
        ></iframe>
      {:else if viewerType === 'preview-pdf'}
        <iframe
          src="/api/documents/{fullDoc.id}/preview?token={getAccessToken()}"
          class="w-full h-full border-0"
          title={fullDoc.title}
          onerror={() => {}}
        ></iframe>
      {:else if viewerType === 'image'}
        <div class="flex items-center justify-center h-full p-4">
          <img
            src="/api/documents/{fullDoc.id}/file?token={getAccessToken()}"
            alt={fullDoc.title}
            class="max-w-full max-h-full object-contain rounded"
          />
        </div>
      {:else if viewerType === 'text'}
        <div class="p-4">
          <pre class="text-sm text-text whitespace-pre-wrap font-mono">{fullDoc.extracted_text || '텍스트 없음'}</pre>
        </div>
      {:else if viewerType === 'cad'}
        <div class="flex flex-col items-center justify-center h-full gap-3">
          <p class="text-sm text-dim">CAD 미리보기 (향후 지원 예정)</p>
          <a
            href="https://web.autocad.com"
            target="_blank"
            class="px-3 py-1.5 text-sm bg-accent text-white rounded hover:bg-accent-hover"
          >AutoCAD Web에서 열기</a>
        </div>
      {:else if viewerType === 'article'}
        <!-- 뉴스 전용 뷰어 -->
        <div class="p-5 max-w-3xl mx-auto">
          <h1 class="text-lg font-bold mb-2">{fullDoc.title}</h1>
          <div class="flex items-center gap-2 mb-4 text-xs text-dim">
            {#if fullDoc.ai_tags?.length}
              {#each fullDoc.ai_tags.filter(t => t.startsWith('News/')) as tag}
                <span class="px-1.5 py-0.5 rounded bg-blue-900/30 text-blue-400">{tag.replace('News/', '')}</span>
              {/each}
            {/if}
            <span>{new Date(fullDoc.created_at).toLocaleDateString('ko-KR', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</span>
          </div>
          <div class="markdown-body mb-6">
            {@html renderMd(fullDoc.extracted_text || '')}
          </div>
          <div class="flex items-center gap-3 pt-4 border-t border-default">
            {#if fullDoc.edit_url}
              <a
                href={fullDoc.edit_url}
                target="_blank"
                rel="noopener noreferrer"
                class="flex items-center gap-1 px-3 py-1.5 text-sm bg-accent text-white rounded-lg hover:bg-accent-hover"
              >
                <ExternalLink size={14} /> 원문 보기
              </a>
            {/if}
          </div>
        </div>
      {:else}
        <div class="flex items-center justify-center h-full">
          <p class="text-sm text-dim">미리보기를 지원하지 않는 형식입니다 ({fullDoc.file_format})</p>
        </div>
      {/if}
    {/if}
  </div>
</div>