diff --git a/frontend/src/lib/components/DocumentMetaRail.svelte b/frontend/src/lib/components/DocumentMetaRail.svelte new file mode 100644 index 0000000..f387de7 --- /dev/null +++ b/frontend/src/lib/components/DocumentMetaRail.svelte @@ -0,0 +1,27 @@ + + +
+ +
diff --git a/frontend/src/lib/composables/useMedia.svelte.ts b/frontend/src/lib/composables/useMedia.svelte.ts new file mode 100644 index 0000000..ecb2d1a --- /dev/null +++ b/frontend/src/lib/composables/useMedia.svelte.ts @@ -0,0 +1,38 @@ +// matchMedia 기반 runes 반응형 flag. 컴포넌트 script 최상위에서만 호출해야 +// $effect가 owner를 찾는다. SSR에서는 초기값 false로 가정하고, 클라이언트 +// mount 후 실제 값으로 업데이트. +// +// Phase D.1 신규 — documents/+page.svelte 에서 xl 브레이크포인트 기반으로 +// 메타 rail(persistent) 과 Drawer(폴백) 중 어느 쪽을 쓸지 분기. +// +// 사용: +// import { useIsXl } from '$lib/composables/useMedia.svelte'; +// const isXl = useIsXl(); +// {#if isXl.current} ... {/if} +// +// Tailwind v4 xl breakpoint = 1280px (app.css @theme 기본값과 일치). + +export interface MediaFlag { + readonly current: boolean; +} + +export function useMedia(query: string): MediaFlag { + let matches = $state(false); + + $effect(() => { + if (typeof window === 'undefined') return; + const mql = window.matchMedia(query); + matches = mql.matches; + const handler = (e: MediaQueryListEvent) => (matches = e.matches); + mql.addEventListener('change', handler); + return () => mql.removeEventListener('change', handler); + }); + + return { + get current() { + return matches; + }, + }; +} + +export const useIsXl = (): MediaFlag => useMedia('(min-width: 1280px)'); diff --git a/frontend/src/routes/documents/+page.svelte b/frontend/src/routes/documents/+page.svelte index ee0e7f2..7dcbbf0 100644 --- a/frontend/src/routes/documents/+page.svelte +++ b/frontend/src/routes/documents/+page.svelte @@ -3,13 +3,15 @@ import { goto } from '$app/navigation'; import { api } from '$lib/api'; import { addToast } from '$lib/stores/toast'; - import { Info } from 'lucide-svelte'; - import { List, LayoutGrid } from 'lucide-svelte'; + import { Info, List, LayoutGrid, ChevronLeft } from 'lucide-svelte'; import DocumentCard from '$lib/components/DocumentCard.svelte'; import DocumentTable from '$lib/components/DocumentTable.svelte'; - import PreviewPanel from '$lib/components/PreviewPanel.svelte'; import DocumentViewer from '$lib/components/DocumentViewer.svelte'; + import DocumentMetaRail from '$lib/components/DocumentMetaRail.svelte'; import UploadDropzone from '$lib/components/UploadDropzone.svelte'; + import Drawer from '$lib/components/ui/Drawer.svelte'; + import { ui } from '$lib/stores/uiState.svelte'; + import { useIsXl } from '$lib/composables/useMedia.svelte'; // 뷰 모드 (localStorage 기억) let viewMode = $state(typeof localStorage !== 'undefined' ? (localStorage.getItem('viewMode') || 'card') : 'card'); @@ -25,7 +27,47 @@ let searchMode = $state('hybrid'); let searchResults = $state(null); let selectedDoc = $state(null); - let infoPanelOpen = $state(false); + + // D.1: 3-패널 레이아웃 상태. + // - xl+ : inline rail 사용 (metaRailOpen, localStorage persistent) + // - < xl: Drawer 프리미티브 사용 (ui.openDrawer('meta')) + const isXl = useIsXl(); + + let metaRailOpen = $state( + typeof localStorage !== 'undefined' + ? localStorage.getItem('metaRailOpen') !== 'false' + : true + ); + + function setMetaRailOpen(v) { + metaRailOpen = v; + if (typeof localStorage !== 'undefined') { + localStorage.setItem('metaRailOpen', String(v)); + } + } + + function toggleInfoPanel() { + if (!selectedDoc) return; + if (isXl.current) { + setMetaRailOpen(!metaRailOpen); + } else { + if (ui.isDrawerOpen('meta')) ui.closeDrawer(); + else ui.openDrawer('meta'); + } + } + + function handleDocDelete() { + selectedDoc = null; + if (ui.isDrawerOpen('meta')) ui.closeDrawer(); + loadDocuments(); + } + + // xl+ 진입 시 열려있던 drawer는 자동으로 닫는다 (rail로 승계). + $effect(() => { + if (isXl.current && ui.isDrawerOpen('meta')) { + ui.closeDrawer(); + } + }); // URL params → filter let currentPage = $derived(parseInt($page.url.searchParams.get('page') || '1')); @@ -46,7 +88,7 @@ searchQuery = urlQ; searchMode = urlMode; selectedDoc = null; - infoPanelOpen = false; + if (ui.isDrawerOpen('meta')) ui.closeDrawer(); if (urlQ) { doSearch(urlQ, urlMode); @@ -139,8 +181,8 @@ } function handleKeydown(e) { - if (e.key === 'Escape' && infoPanelOpen) { - infoPanelOpen = false; + if (e.key === 'Escape') { + ui.handleEscape(); // drawer/modal stack 우선순위로 중앙 처리 } } @@ -151,7 +193,9 @@ -
+
+ +
@@ -190,11 +234,15 @@ {/if} {#if selectedDoc} + {@const isPanelActive = isXl.current ? metaRailOpen : ui.isDrawerOpen('meta')}
{/if} +
+ + + + {#if selectedDoc} + + {/if}
- -{#if infoPanelOpen && selectedDoc} -
- -
- infoPanelOpen = false} ondelete={() => { selectedDoc = null; infoPanelOpen = false; loadDocuments(); }} /> -
-
-{/if} + + + {#if selectedDoc} + ui.closeDrawer()} + ondelete={handleDocDelete} + /> + {/if} +