feat(docpage): 전체 문서 목록 클릭 시 인라인 미리보기 대신 D3 상세로 이동

사용자 결정 "개선된 페이지가 앞으로 표시되야지" — /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>
This commit is contained in:
hyungi
2026-06-13 15:41:59 +09:00
parent 540bc00dba
commit c1555fd6ab
+22 -54
View File
@@ -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 (정보 하단/측면 시트) -->