feat: 하단 문서 뷰어 + 우측 정보 패널 (DEVONthink 레이아웃)

- DocumentViewer: 문서 선택 시 하단에 본문 미리보기/편집
  (Markdown 렌더링, PDF iframe, 이미지, Synology Office iframe)
- 레이아웃 변경: 상단(목록 45%) + 하단(뷰어+정보 55%)
- 우측 패널은 문서 정보/태그/처리상태 (메모/태그 편집은 Phase 2)
- 문서 선택 해제 시 목록 전체 표시로 복원

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/lib/components/DocumentViewer.svelte

@@ -0,0 +1,80 @@
+<script>
+  import { api, getAccessToken } from '$lib/api';
+  import { marked } from 'marked';
+
+  let { doc } = $props();
+  let fullDoc = $state(null);
+  let loading = $state(true);
+  let viewerType = $state('none');
+
+  function getViewerType(format) {
+    if (['md', 'txt', 'csv', 'html'].includes(format)) return 'markdown';
+    if (format === 'pdf') return 'pdf';
+    if (['hwp', 'hwpx'].includes(format)) return 'hwp-markdown';
+    if (['odoc', 'osheet'].includes(format)) return 'synology';
+    if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(format)) return 'image';
+    return 'unsupported';
+  }
+
+  // doc이 바뀌면 상세 데이터 로딩
+  $effect(() => {
+    if (doc?.id) {
+      loadFullDoc(doc.id);
+    }
+  });
+
+  async function loadFullDoc(id) {
+    loading = true;
+    try {
+      fullDoc = await api(`/documents/${id}`);
+      viewerType = getViewerType(fullDoc.file_format);
+    } catch (err) {
+      fullDoc = null;
+      viewerType = 'none';
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<div class="h-full bg-[var(--surface)] border-t border-[var(--border)] overflow-auto">
+  {#if loading}
+    <div class="flex items-center justify-center h-full">
+      <p class="text-sm text-[var(--text-dim)]">로딩 중...</p>
+    </div>
+  {:else if fullDoc}
+    {#if viewerType === 'markdown' || viewerType === 'hwp-markdown'}
+      <div class="p-4 prose prose-invert prose-sm max-w-none">
+        {@html marked(fullDoc.extracted_text || '*텍스트 추출 대기 중*')}
+      </div>
+    {: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 === '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 === 'synology'}
+      <iframe
+        src="https://ds1525.hyungi.net:15001/oo/r/{fullDoc.file_path}"
+        class="w-full h-full border-0"
+        title={fullDoc.title}
+        allow="clipboard-read; clipboard-write"
+      ></iframe>
+    {:else}
+      <div class="flex items-center justify-center h-full">
+        <div class="text-center">
+          <p class="text-sm text-[var(--text-dim)] mb-1">미리보기를 지원하지 않는 형식입니다</p>
+          <p class="text-xs text-[var(--text-dim)]">{fullDoc.file_format}</p>
+        </div>
+      </div>
+    {/if}
+  {/if}
+</div>

frontend/src/routes/documents/+page.svelte

@@ -5,14 +5,15 @@
   import { addToast } from '$lib/stores/ui';
   import DocumentCard from '$lib/components/DocumentCard.svelte';
   import PreviewPanel from '$lib/components/PreviewPanel.svelte';
+  import DocumentViewer from '$lib/components/DocumentViewer.svelte';
 
   let documents = $state([]);
-  let selectedDoc = $state(null);
   let total = $state(0);
   let loading = $state(true);
   let searchQuery = $state('');
   let searchMode = $state('hybrid');
   let searchResults = $state(null);
+  let selectedDoc = $state(null);
   let debounceTimer;
 
   // URL params → filter (source of truth)
@@ -30,8 +31,7 @@
 
     searchQuery = urlQ;
     searchMode = urlMode;
-
+    selectedDoc = null;
-    selectedDoc = null; // 필터 변경 시 선택 해제
 
     if (urlQ) {
       doSearch(urlQ, urlMode);
@@ -113,19 +113,19 @@
     searchQuery = '';
   }
 
-  let totalPages = $derived(Math.ceil(total / 20));
-  let items = $derived(searchResults || documents);
-  let hasActiveFilters = $derived(!!filterDomain || !!filterSubGroup || !!searchQuery);
-
   function selectDoc(doc) {
     selectedDoc = selectedDoc?.id === doc.id ? null : doc;
   }
+
+  let totalPages = $derived(Math.ceil(total / 20));
+  let items = $derived(searchResults || documents);
+  let hasActiveFilters = $derived(!!filterDomain || !!filterSubGroup || !!searchQuery);
 </script>
 
-<div class="flex h-full">
+<div class="flex flex-col h-full">
-<!-- 문서 목록 영역 -->
+  <!-- 상단: 문서 목록 -->
-<div class="flex-1 overflow-y-auto p-4 lg:p-6">
+  <div class="overflow-y-auto p-4 lg:p-6 {selectedDoc ? 'h-[45%] shrink-0 border-b border-[var(--border)]' : 'flex-1'}">
-  <!-- 검색바 + 필터 상태 -->
+    <!-- 검색바 -->
     <div class="flex gap-2 mb-4">
       <input
         data-search-input
@@ -219,10 +219,17 @@
     {/if}
   </div>
 
-<!-- 프리뷰 패널 (데스크톱만) -->
+  <!-- 하단: 뷰어 + 정보 패널 (문서 선택 시) -->
   {#if selectedDoc}
-  <div class="hidden lg:block shrink-0" style="width: 360px">
+    <div class="flex flex-1 min-h-0">
+      <!-- 문서 뷰어 (좌측, 넓게) -->
+      <div class="flex-1 min-w-0">
+        <DocumentViewer doc={selectedDoc} />
+      </div>
+      <!-- 정보 패널 (우측) -->
+      <div class="hidden lg:block shrink-0" style="width: 300px">
         <PreviewPanel doc={selectedDoc} onclose={() => selectedDoc = null} />
       </div>
+    </div>
   {/if}
 </div>