From 540bc00dba2470a6ded1a4b22d10de6593e3762e Mon Sep 17 00:00:00 2001
From: hyungi <hyun49196@gmail.com>
Date: Sat, 13 Jun 2026 15:18:15 +0900
Subject: [PATCH] =?UTF-8?q?feat(docpage):=20D3=20=EC=A0=88=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=20=ED=83=90=EC=83=89=EA=B8=B0=20=E2=80=94=20=EC=8A=AC?=
 =?UTF-8?q?=EB=A6=BC=20=EC=9D=B8=EC=82=AC=EC=9D=B4=ED=8A=B8=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=BC=20+=20=EC=A0=88=20=ED=8A=B8=EB=A6=AC=20(frontend=20on?=
 =?UTF-8?q?ly)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

문서 상세 /documents/[id] 재구성 (BE 무변경):
- 우측 탭(정보/AI/관리) → 슬림 전역 인사이트 레일: 요약·심층·불일치를 탭
  게이트 없이 상시 노출(details open, 모바일은 접기 가능), 정보/관리는 접이.
  → 가공 자료가 탭/온디맨드에 묻히던 IA 문제(G1) 해소.
- SectionOutline 절 목차 레벨 기반 들여쓰기(평탄→트리 모양).
- 모바일: 본문 메인 + 절목차/인사이트/정보/관리 접이 + 절 탭 본문 이동(기존 구조 활용).
관련 문서(See Also)는 v1 제외(자리만 유지). 심화 목업 = comparisons/2026-06-13-ds-docpage-d3-deepened.html.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../src/lib/components/SectionOutline.svelte  |   5 +-
 .../src/routes/documents/[id]/+page.svelte    | 110 ++++++++++--------
 2 files changed, 66 insertions(+), 49 deletions(-)

diff --git a/frontend/src/lib/components/SectionOutline.svelte b/frontend/src/lib/components/SectionOutline.svelte
index e9a5709..ab213aa 100644
--- a/frontend/src/lib/components/SectionOutline.svelte
+++ b/frontend/src/lib/components/SectionOutline.svelte
@@ -43,14 +43,17 @@
   {@const open = selectedId === s.chunk_id}
   {@const active = activeKey != null && activeKey === s.chunk_id}
   {@const typeLabel = sectionTypeLabel(s.section_type)}
+  {@const depth = Math.max(0, (s.level ?? 1) - 1)}
   <li>
     <button
       type="button"
       onclick={() => { toggle(item); onJump?.(s.chunk_id); }}
       aria-expanded={open}
       aria-current={active ? 'true' : undefined}
+      style="padding-left:{8 + depth * 13}px"
       class={[
-        'w-full text-left px-2 py-1.5 rounded-md text-xs flex items-start gap-1.5 transition-colors border-l-2',
+        'w-full text-left pr-2 py-1.5 rounded-md text-xs flex items-start gap-1.5 transition-colors border-l-2',
+        depth > 0 ? 'text-[11px]' : '',
         open ? 'bg-surface-active text-text border-accent' : active ? 'bg-surface text-accent-hover border-accent' : 'text-dim hover:bg-surface hover:text-text border-transparent',
       ].join(' ')}
     >
diff --git a/frontend/src/routes/documents/[id]/+page.svelte b/frontend/src/routes/documents/[id]/+page.svelte
index 4301f89..1016377 100644
--- a/frontend/src/routes/documents/[id]/+page.svelte
+++ b/frontend/src/routes/documents/[id]/+page.svelte
@@ -30,7 +30,6 @@
   import AnalysisPanel from '$lib/components/AnalysisPanel.svelte';
   import ReadCounter from '$lib/components/ReadCounter.svelte';
   import SectionOutline from '$lib/components/SectionOutline.svelte';
-  import Tabs from '$lib/components/ui/Tabs.svelte';
 
   marked.use({ mangle: false, headerIds: false });
   function renderMd(text) {
@@ -460,53 +459,68 @@
         {/if}
       </div>
 
-      <!-- 오른쪽 — 메타 Tabs [정보 | AI | 관리] (카드 11개 수직 스프롤 해소) -->
-      <aside class="min-w-0">
-        <Card>
-          <Tabs
-            tabs={[
-              { id: 'info', label: '정보' },
-              { id: 'ai', label: 'AI' },
-              { id: 'manage', label: '관리' },
-            ]}
-          >
-            {#snippet children(tab)}
-              <div class="pt-3 space-y-4">
-                {#if tab === 'info'}
-                  {#if doc.category === 'library'}
-                    <ReadCounter
-                      documentId={doc.id}
-                      initialCount={doc.read_count ?? 0}
-                      initialLastReadAt={doc.last_read_at ?? null}
-                    />
-                  {/if}
-                  <FileInfoView {doc} />
-                  <ProcessingStatusView {doc} />
-                {:else if tab === 'ai'}
-                  <AnalysisPanel docId={doc.id} doc={doc} />
-                  <AIClassificationEditor {doc} />
-                  <div>
-                    <h4 class="text-xs font-semibold text-dim uppercase mb-1.5">관련 문서</h4>
-                    <!-- TODO(backend): GET /documents/{id}/related?limit=10 (벡터 유사도) -->
-                    <EmptyState
-                      icon={FileText}
-                      title="추후 지원"
-                      description="관련 문서 추천은 backend 연동 후 제공됩니다."
-                    />
-                  </div>
-                {:else}
-                  <LibraryPathEditor {doc} />
-                  <NoteEditor {doc} />
-                  <EditUrlEditor {doc} />
-                  <TagsEditor {doc} />
-                  <div class="pt-2 border-t border-default">
-                    <DocumentDangerZone {doc} ondelete={handleDocDelete} />
-                  </div>
-                {/if}
-              </div>
-            {/snippet}
-          </Tabs>
-        </Card>
+      <!-- 오른쪽 — 슬림 전역 인사이트 레일 (D3: 탭 게이트 제거, 요약·심층·불일치 상시 노출).
+           정보/관리는 접이(<details>) — 데스크탑은 인사이트 상시, 모바일은 본문 메인 + 열어서 확인. -->
+      <aside class="min-w-0 space-y-3">
+        {#if doc.category === 'library'}
+          <Card>
+            <ReadCounter
+              documentId={doc.id}
+              initialCount={doc.read_count ?? 0}
+              initialLastReadAt={doc.last_read_at ?? null}
+            />
+          </Card>
+        {/if}
+
+        <!-- 요약·분석 — 기본 펼침(데스크탑 상시감, 모바일 접기 가능) -->
+        <details open class="bg-surface border border-default rounded-card overflow-hidden group">
+          <summary class="cursor-pointer list-none flex items-center justify-between px-3.5 py-2.5 text-xs font-semibold text-dim uppercase tracking-wide select-none">
+            <span>요약 · 분석</span>
+            <ChevronRight size={14} class="transition-transform group-open:rotate-90 text-faint" />
+          </summary>
+          <div class="px-3.5 pb-3.5 space-y-4">
+            <AnalysisPanel docId={doc.id} doc={doc} />
+            <AIClassificationEditor {doc} />
+            <div>
+              <h4 class="text-xs font-semibold text-dim uppercase mb-1.5">관련 문서</h4>
+              <!-- TODO(backend): GET /documents/{id}/related?limit=10 (벡터 유사도) — v1 제외(자리만) -->
+              <EmptyState
+                icon={FileText}
+                title="추후 지원"
+                description="관련 문서 추천은 backend 연동 후 제공됩니다."
+              />
+            </div>
+          </div>
+        </details>
+
+        <!-- 문서 정보 — 접이(기본 닫힘) -->
+        <details class="bg-surface border border-default rounded-card overflow-hidden group">
+          <summary class="cursor-pointer list-none flex items-center justify-between px-3.5 py-2.5 text-xs font-semibold text-dim uppercase tracking-wide select-none">
+            <span>문서 정보</span>
+            <ChevronRight size={14} class="transition-transform group-open:rotate-90 text-faint" />
+          </summary>
+          <div class="px-3.5 pb-3.5 space-y-3">
+            <FileInfoView {doc} />
+            <ProcessingStatusView {doc} />
+          </div>
+        </details>
+
+        <!-- 관리 — 접이(기본 닫힘) -->
+        <details class="bg-surface border border-default rounded-card overflow-hidden group">
+          <summary class="cursor-pointer list-none flex items-center justify-between px-3.5 py-2.5 text-xs font-semibold text-dim uppercase tracking-wide select-none">
+            <span>관리</span>
+            <ChevronRight size={14} class="transition-transform group-open:rotate-90 text-faint" />
+          </summary>
+          <div class="px-3.5 pb-3.5 space-y-3">
+            <LibraryPathEditor {doc} />
+            <NoteEditor {doc} />
+            <EditUrlEditor {doc} />
+            <TagsEditor {doc} />
+            <div class="pt-2 border-t border-default">
+              <DocumentDangerZone {doc} ondelete={handleDocDelete} />
+            </div>
+          </div>
+        </details>
       </aside>
     </div>