From c1555fd6abd53e789d2eff9cc558edae5e11a288 Mon Sep 17 00:00:00 2001
From: hyungi <hyun49196@gmail.com>
Date: Sat, 13 Jun 2026 15:41:59 +0900
Subject: [PATCH] =?UTF-8?q?feat(docpage):=20=EC=A0=84=EC=B2=B4=20=EB=AC=B8?=
 =?UTF-8?q?=EC=84=9C=20=EB=AA=A9=EB=A1=9D=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C?=
 =?UTF-8?q?=20=EC=9D=B8=EB=9D=BC=EC=9D=B8=20=EB=AF=B8=EB=A6=AC=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0=20=EB=8C=80=EC=8B=A0=20D3=20=EC=83=81=EC=84=B8?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

사용자 결정 "개선된 페이지가 앞으로 표시되야지" — /documents 브라우저에서
문서를 열면 인라인 DocumentViewer(구) 대신 개선된 /documents/[id](D3 절 구조
탐색기)로 이동. /documents = 브라우즈/검색/필터/일괄 목록(풀폭 중앙) 역할로 정리:
- selectDoc → goto(/documents/[id]) (행 클릭·키보드 enter 공통)
- 인라인 리더(DocumentViewer)·인스펙터 패널 제거, 목록 max-w-5xl 중앙
- AI 답변 카드(질문형 검색)는 목록 상단 고정으로 이동(보존)
- 검색·필터칩·일괄작업·업로드·페이지네이션 전부 유지

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/routes/documents/+page.svelte | 76 +++++++---------------
 1 file changed, 22 insertions(+), 54 deletions(-)

diff --git a/frontend/src/routes/documents/+page.svelte b/frontend/src/routes/documents/+page.svelte
index 1f2d96d..606df39 100644
--- a/frontend/src/routes/documents/+page.svelte
+++ b/frontend/src/routes/documents/+page.svelte
@@ -8,8 +8,7 @@
   import { goto } from '$app/navigation';
   import { api } from '$lib/api';
   import { addToast } from '$lib/stores/toast';
-  import { Info, X, Plus, Trash2, Tag, FolderTree, Sparkles, ChevronLeft, ArrowUpDown } from 'lucide-svelte';
-  import DocumentViewer from '$lib/components/DocumentViewer.svelte';
+  import { X, Plus, Trash2, Tag, FolderTree, Sparkles, ArrowUpDown } from 'lucide-svelte';
   import MarkdownStatusBadge from '$lib/components/MarkdownStatusBadge.svelte';
   import { isMdStatusVisible } from '$lib/utils/mdStatus';
   import UploadDropzone from '$lib/components/UploadDropzone.svelte';
@@ -233,15 +232,12 @@
     goto(`/documents${qs ? '?' + qs : ''}`, { noScroll: true });
   }
 
-  async function selectDoc(doc) {
-    if (selectedDoc?.id === doc.id) { selectedDoc = null; return; }
-    selectedDoc = doc; // 즉시 표시(리더 + 기본 인스펙터)
-    // 인스펙터 풀 메타 하이드레이션 — 검색 결과(SearchResult)는 메타가 빈약(태그/크기/하위/md상태/읽음 없음).
-    // 풀 문서를 조회해 채운다(기존 GET /documents/{id}, 백엔드 무변). 리스트 모드도 md상태 등 보강.
-    try {
-      const full = await api(`/documents/${doc.id}`);
-      if (selectedDoc?.id === doc.id) selectedDoc = { ...doc, ...full };
-    } catch { /* 실패 시 기본 정보 유지 */ }
+  // 문서 열기 = 개선된 상세 페이지(D3 절 구조 탐색기)로 이동.
+  // 사용자 결정: "개선된 페이지가 앞으로 표시되야지" — 인라인 미리보기 폐기.
+  // /documents = 브라우즈/검색/필터/일괄 목록, 문서 열기 = /documents/[id] D3 리더.
+  function selectDoc(doc) {
+    if (!doc) return;
+    goto(`/documents/${doc.id}`);
   }
 
   // bulk 선택
@@ -386,8 +382,8 @@
 
 <div class="flex h-full min-h-0">
 
-  <!-- ═══ 좌: 리스트 컬럼 ═══ -->
-  <div class="{selectedDoc ? 'hidden lg:flex' : 'flex'} flex-col w-full lg:w-[340px] lg:shrink-0 lg:border-r border-default min-h-0">
+  <!-- ═══ 문서 목록 (풀폭 중앙) — 클릭 시 D3 상세로 이동 ═══ -->
+  <div class="flex flex-col w-full max-w-5xl mx-auto min-h-0">
     <UploadDropzone onupload={loadDocuments} />
 
     <!-- 검색바 -->
@@ -487,6 +483,19 @@
       {/if}
     </div>
 
+    <!-- AI 답변 (질문형 검색) — 목록 상단 고정, 아래로 목록 스크롤 -->
+    {#if showAskCard}
+      <div class="px-3 py-2 shrink-0 border-b border-default max-h-[55vh] overflow-y-auto">
+        <AskAnswerCard
+          data={askData}
+          loading={askLoading}
+          error={askError}
+          onCitationClick={(docId) => goto(`/documents/${docId}`)}
+          onDismiss={() => { askDismissed = true; }}
+        />
+      </div>
+    {/if}
+
     <!-- 선택 toolbar -->
     {#if selectionCount > 0}
       <div class="flex flex-wrap items-center gap-2 px-3 py-2 shrink-0 bg-accent/10 border-y border-accent/30">
@@ -587,47 +596,6 @@
     </div>
   </div>
 
-  <!-- ═══ 중앙: 리더 ═══ -->
-  <div class="{selectedDoc ? 'flex' : 'hidden lg:flex'} flex-1 min-w-0 flex-col min-h-0">
-    {#if selectedDoc}
-      <!-- 리더 상단 바: (모바일) 뒤로 / (lg) 인스펙터 토글 -->
-      <div class="flex items-center gap-2 px-3 py-1.5 shrink-0 border-b border-default bg-sidebar">
-        <button type="button" onclick={() => { selectedDoc = null; if (ui.isDrawerOpen('meta')) ui.closeDrawer(); }}
-          class="lg:hidden flex items-center gap-1 text-xs text-accent-hover font-medium" aria-label="목록으로">
-          <ChevronLeft size={15} /> 문서
-        </button>
-        <div class="flex-1"></div>
-        <button type="button" onclick={toggleInfoPanel} aria-pressed={isPanelActive} title="문서 정보"
-          class="p-1.5 rounded-lg border transition-colors {isPanelActive ? 'border-accent text-accent bg-accent/10' : 'border-default text-dim hover:text-accent hover:border-accent'}">
-          <Info size={16} />
-        </button>
-      </div>
-      <div class="flex-1 min-h-0">
-        <DocumentViewer doc={selectedDoc} />
-      </div>
-    {:else if showAskCard}
-      <div class="p-4 lg:p-6 overflow-y-auto">
-        <AskAnswerCard
-          data={askData}
-          loading={askLoading}
-          error={askError}
-          onCitationClick={(docId) => goto(`/documents/${docId}`)}
-          onDismiss={() => { askDismissed = true; }}
-        />
-      </div>
-    {:else}
-      <div class="hidden lg:flex flex-1 items-center justify-center text-dim text-sm">
-        왼쪽에서 문서를 선택하세요
-      </div>
-    {/if}
-  </div>
-
-  <!-- ═══ 우: 인스펙터 (xl+ inline) ═══ -->
-  {#if selectedDoc && inspectorOpen}
-    <aside class="hidden xl:flex flex-col w-[300px] shrink-0 border-l border-default bg-sidebar overflow-y-auto" aria-label="문서 정보">
-      {@render inspector(selectedDoc)}
-    </aside>
-  {/if}
 </div>
 
 <!-- < xl 폴백: Drawer (정보 하단/측면 시트) -->