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,116 +113,123 @@
     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">
+    <div class="flex gap-2 mb-4">
-    <input
+      <input
-      data-search-input
+        data-search-input
-      type="text"
+        type="text"
-      bind:value={searchQuery}
+        bind:value={searchQuery}
-      oninput={handleSearchInput}
+        oninput={handleSearchInput}
-      placeholder="검색어 입력... (/ 키로 포커스)"
+        placeholder="검색어 입력... (/ 키로 포커스)"
-      class="flex-1 px-4 py-2 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[var(--text)] text-sm focus:border-[var(--accent)] outline-none"
+        class="flex-1 px-4 py-2 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[var(--text)] text-sm focus:border-[var(--accent)] outline-none"
-    />
+      />
-    <select
+      <select
-      bind:value={searchMode}
+        bind:value={searchMode}
-      onchange={() => { if (searchQuery) handleSearchInput(); }}
+        onchange={() => { if (searchQuery) handleSearchInput(); }}
-      class="px-3 py-2 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[var(--text)] text-sm"
+        class="px-3 py-2 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[var(--text)] text-sm"
-    >
+      >
-      <option value="hybrid">하이브리드</option>
+        <option value="hybrid">하이브리드</option>
-      <option value="fts">전문검색</option>
+        <option value="fts">전문검색</option>
-      <option value="trgm">부분매칭</option>
+        <option value="trgm">부분매칭</option>
-      <option value="vector">의미검색</option>
+        <option value="vector">의미검색</option>
-    </select>
+      </select>
-  </div>
+    </div>
 
-  <!-- 결과 헤더 -->
+    <!-- 결과 헤더 -->
-  {#if !loading}
+    {#if !loading}
-    <div class="flex items-center justify-between mb-3">
+      <div class="flex items-center justify-between mb-3">
-      <div class="flex items-center gap-2">
+        <div class="flex items-center gap-2">
-        <span class="text-xs text-[var(--text-dim)]">{total}건</span>
+          <span class="text-xs text-[var(--text-dim)]">{total}건</span>
-        {#if filterDomain}
+          {#if filterDomain}
-          <span class="text-xs text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded">
+            <span class="text-xs text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded">
-            {filterDomain.replace('Knowledge/', '')}{filterSubGroup ? ` / ${filterSubGroup}` : ''}
+              {filterDomain.replace('Knowledge/', '')}{filterSubGroup ? ` / ${filterSubGroup}` : ''}
-          </span>
+            </span>
+          {/if}
+        </div>
+        {#if hasActiveFilters}
+          <button
+            onclick={clearAllFilters}
+            class="text-xs text-[var(--text-dim)] hover:text-[var(--text)] px-2 py-1 rounded border border-[var(--border)]"
+          >
+            필터 초기화
+          </button>
         {/if}
       </div>
-      {#if hasActiveFilters}
+    {/if}
-        <button
-          onclick={clearAllFilters}
-          class="text-xs text-[var(--text-dim)] hover:text-[var(--text)] px-2 py-1 rounded border border-[var(--border)]"
-        >
-          필터 초기화
-        </button>
-      {/if}
-    </div>
-  {/if}
 
-  <!-- 결과 -->
+    <!-- 결과 -->
-  {#if loading}
+    {#if loading}
-    <div class="space-y-2">
+      <div class="space-y-2">
-      {#each Array(6) as _}
+        {#each Array(6) as _}
-        <div class="bg-[var(--surface)] rounded-lg p-4 border border-[var(--border)] animate-pulse h-16"></div>
+          <div class="bg-[var(--surface)] rounded-lg p-4 border border-[var(--border)] animate-pulse h-16"></div>
-      {/each}
-    </div>
-  {:else if items.length === 0}
-    <div class="text-center py-16 text-[var(--text-dim)]">
-      {#if searchQuery}
-        <p class="text-base mb-2">'{searchQuery}'에 대한 결과가 없습니다</p>
-        <p class="text-sm mb-4">다른 검색어를 시도하거나 검색 모드를 변경해보세요</p>
-        <button onclick={clearAllFilters} class="text-sm text-[var(--accent)] hover:underline">필터 초기화</button>
-      {:else if hasActiveFilters}
-        <p class="text-base mb-2">이 분류에 문서가 없습니다</p>
-        <button onclick={clearAllFilters} class="text-sm text-[var(--accent)] hover:underline">필터 초기화</button>
-      {:else}
-        <p class="text-base mb-2">등록된 문서가 없습니다</p>
-        <p class="text-sm">문서를 업로드하거나 Inbox에 추가하세요</p>
-      {/if}
-    </div>
-  {:else}
-    <div class="space-y-1.5">
-      {#each items as doc}
-        <DocumentCard
-          {doc}
-          showDomain={!filterDomain}
-          selected={selectedDoc?.id === doc.id}
-          onselect={selectDoc}
-        />
-      {/each}
-    </div>
-
-    <!-- 페이지네이션 -->
-    {#if !searchResults && totalPages > 1}
-      <div class="flex justify-center gap-1.5 mt-6">
-        {#each Array(totalPages) as _, i}
-          <button
-            onclick={() => changePage(i + 1)}
-            class="px-3 py-1 rounded text-sm transition-colors
-              {currentPage === i + 1 ? 'bg-[var(--accent)] text-white' : 'bg-[var(--surface)] text-[var(--text-dim)] hover:text-[var(--text)]'}"
-          >
-            {i + 1}
-          </button>
         {/each}
       </div>
+    {:else if items.length === 0}
+      <div class="text-center py-16 text-[var(--text-dim)]">
+        {#if searchQuery}
+          <p class="text-base mb-2">'{searchQuery}'에 대한 결과가 없습니다</p>
+          <p class="text-sm mb-4">다른 검색어를 시도하거나 검색 모드를 변경해보세요</p>
+          <button onclick={clearAllFilters} class="text-sm text-[var(--accent)] hover:underline">필터 초기화</button>
+        {:else if hasActiveFilters}
+          <p class="text-base mb-2">이 분류에 문서가 없습니다</p>
+          <button onclick={clearAllFilters} class="text-sm text-[var(--accent)] hover:underline">필터 초기화</button>
+        {:else}
+          <p class="text-base mb-2">등록된 문서가 없습니다</p>
+          <p class="text-sm">문서를 업로드하거나 Inbox에 추가하세요</p>
+        {/if}
+      </div>
+    {:else}
+      <div class="space-y-1.5">
+        {#each items as doc}
+          <DocumentCard
+            {doc}
+            showDomain={!filterDomain}
+            selected={selectedDoc?.id === doc.id}
+            onselect={selectDoc}
+          />
+        {/each}
+      </div>
+
+      <!-- 페이지네이션 -->
+      {#if !searchResults && totalPages > 1}
+        <div class="flex justify-center gap-1.5 mt-6">
+          {#each Array(totalPages) as _, i}
+            <button
+              onclick={() => changePage(i + 1)}
+              class="px-3 py-1 rounded text-sm transition-colors
+                {currentPage === i + 1 ? 'bg-[var(--accent)] text-white' : 'bg-[var(--surface)] text-[var(--text-dim)] hover:text-[var(--text)]'}"
+            >
+              {i + 1}
+            </button>
+          {/each}
+        </div>
+      {/if}
     {/if}
+  </div>
+
+  <!-- 하단: 뷰어 + 정보 패널 (문서 선택 시) -->
+  {#if selectedDoc}
+    <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>
-
-<!-- 프리뷰 패널 (데스크톱만) -->
-{#if selectedDoc}
-  <div class="hidden lg:block shrink-0" style="width: 360px">
-    <PreviewPanel doc={selectedDoc} onclose={() => selectedDoc = null} />
-  </div>
-{/if}
-</div>