hyungi/hyungi_document_server
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 레이아웃 개선 — 30:70 비율, 사이드바 접힘, 정보 패널 drawer

Browse Source 
- 사이드바: 데스크톱도 기본 접힘, ☰로 오버레이, localStorage 상태 기억
- 상단 30%: 문서 목록 + 검색 (문서 미선택 시 100%)
- 하단 70%: 뷰어 전체 너비 (우측 패널 제거)
- 정보 패널: ℹ 버튼 → 우측 전체 높이 drawer (ESC/외부 클릭 닫기)
- nav 높이 축소, 폰트 크기 최적화

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-04-03 10:05:47 +09:00
parent 17d41a8526
commit 3546c8cefb
2 changed files with 95 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/routes/+layout.svelte
View File

@@ -9,27 +9,36 @@
import '../app.css'; import '../app.css';
const PUBLIC_PATHS = ['/login', '/setup']; const PUBLIC_PATHS = ['/login', '/setup'];
const NO_SIDEBAR_PATHS = ['/login', '/setup']; const NO_CHROME_PATHS = ['/login', '/setup'];
let authChecked = $state(false); let authChecked = $state(false);
let sidebarOpen = $state(false); let sidebarOpen = $state(false);
onMount(async () => { onMount(async () => {
// localStorage에서 사이드바 상태 복원
const saved = localStorage.getItem('sidebarOpen');
if (saved === 'true') sidebarOpen = true;
if (!$isAuthenticated) { if (!$isAuthenticated) {
await tryRefresh(); await tryRefresh();
} }
authChecked = true; authChecked = true;
}); });
// 사이드바 상태 저장
$effect(() => {
if (browser) {
localStorage.setItem('sidebarOpen', String(sidebarOpen));
}
});
$effect(() => { $effect(() => {
if (browser && authChecked && !$isAuthenticated && !PUBLIC_PATHS.some(p => $page.url.pathname.startsWith(p))) { if (browser && authChecked && !$isAuthenticated && !PUBLIC_PATHS.some(p => $page.url.pathname.startsWith(p))) {
goto('/login'); goto('/login');
} }
}); });
// 사이드바 표시 여부 let showChrome = $derived($isAuthenticated && !NO_CHROME_PATHS.some(p => $page.url.pathname.startsWith(p)));
let showSidebar = $derived($isAuthenticated && !NO_SIDEBAR_PATHS.some(p => $page.url.pathname.startsWith(p)));
// 키보드 단축키
function handleKeydown(e) { function handleKeydown(e) {
if (e.key === '/' && !['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) { if (e.key === '/' && !['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
e.preventDefault(); e.preventDefault();
@@ -48,57 +57,52 @@
<p class="text-[var(--text-dim)]">로딩 중...</p> <p class="text-[var(--text-dim)]">로딩 중...</p>
</div> </div>
{:else if $isAuthenticated || PUBLIC_PATHS.some(p => $page.url.pathname.startsWith(p))} {:else if $isAuthenticated || PUBLIC_PATHS.some(p => $page.url.pathname.startsWith(p))}
{#if showSidebar} {#if showChrome}
<div class="h-screen flex flex-col"> <div class="h-screen flex flex-col">
<!-- 상단 nav --> <!-- 상단 nav -->
<nav class="flex items-center justify-between px-4 py-2.5 border-b border-[var(--border)] bg-[var(--surface)] shrink-0"> <nav class="flex items-center justify-between px-4 py-2 border-b border-[var(--border)] bg-[var(--surface)] shrink-0">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<button <button
onclick={() => sidebarOpen = !sidebarOpen} onclick={() => sidebarOpen = !sidebarOpen}
class="p-1.5 rounded-md hover:bg-[var(--border)] text-[var(--text-dim)] lg:hidden" class="p-1.5 rounded-md hover:bg-[var(--border)] text-[var(--text-dim)]"
aria-label="사이드바 토글" aria-label="사이드바 토글"
> >
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/> <path d="M3 12h18M3 6h18M3 18h18"/>
</svg> </svg>
</button> </button>
<a href="/" class="text-lg font-semibold hover:text-[var(--accent)]">PKM</a> <a href="/" class="text-sm font-semibold hover:text-[var(--accent)]">PKM</a>
<span class="text-[var(--text-dim)]">/</span> <span class="text-[var(--text-dim)] text-xs">/</span>
<a href="/documents" class="text-sm hover:text-[var(--accent)]">문서</a> <a href="/documents" class="text-xs hover:text-[var(--accent)]">문서</a>
</div> </div>
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<a href="/inbox" class="text-sm text-[var(--text-dim)] hover:text-[var(--text)]">Inbox</a> <a href="/inbox" class="text-xs text-[var(--text-dim)] hover:text-[var(--text)]">Inbox</a>
<a href="/settings" class="text-sm text-[var(--text-dim)] hover:text-[var(--text)]">설정</a> <a href="/settings" class="text-xs text-[var(--text-dim)] hover:text-[var(--text)]">설정</a>
<button <button
onclick={() => logout()} onclick={() => logout()}
class="text-sm text-[var(--text-dim)] hover:text-[var(--text)]" class="text-xs text-[var(--text-dim)] hover:text-[var(--text)]"
>로그아웃</button> >로그아웃</button>
</div> </div>
</nav> </nav>
<!-- 메인: sidebar + content --> <!-- 메인 -->
<div class="flex flex-1 min-h-0"> <div class="flex-1 min-h-0 relative">
<!-- 데스크톱 사이드바 --> <!-- 사이드바 오버레이 (모든 화면에서 동일) -->
<div class="shrink-0 hidden lg:block" style="width: var(--sidebar-w)">
<Sidebar />
</div>
<!-- 모바일 drawer -->
{#if sidebarOpen} {#if sidebarOpen}
<div class="fixed inset-0 z-40 lg:hidden"> <div class="fixed inset-0 z-40">
<button <button
onclick={() => sidebarOpen = false} onclick={() => sidebarOpen = false}
class="absolute inset-0 bg-black/50" class="absolute inset-0 bg-black/40"
aria-label="사이드바 닫기" aria-label="사이드바 닫기"
></button> ></button>
<div class="absolute left-0 top-0 bottom-0 w-[280px] z-50"> <div class="absolute left-0 top-0 bottom-0 z-50" style="width: var(--sidebar-w)">
<Sidebar /> <Sidebar />
</div> </div>
</div> </div>
{/if} {/if}
<!-- 콘텐츠 영역 --> <!-- 콘텐츠 -->
<main class="flex-1 overflow-y-auto"> <main class="h-full overflow-hidden">
<slot /> <slot />
</main> </main>
</div> </div>
@@ -108,7 +112,7 @@
{/if} {/if}
{/if} {/if}
<!-- Toast 컨테이너 --> <!-- Toast -->
<div class="fixed top-4 right-4 z-50 flex flex-col gap-2 max-w-sm"> <div class="fixed top-4 right-4 z-50 flex flex-col gap-2 max-w-sm">
{#each $toasts as toast (toast.id)} {#each $toasts as toast (toast.id)}
<button <button

99
frontend/src/routes/documents/+page.svelte
View File

@@ -3,6 +3,7 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { api } from '$lib/api'; import { api } from '$lib/api';
import { addToast } from '$lib/stores/ui'; import { addToast } from '$lib/stores/ui';
import { Info } from 'lucide-svelte';
import DocumentCard from '$lib/components/DocumentCard.svelte'; import DocumentCard from '$lib/components/DocumentCard.svelte';
import PreviewPanel from '$lib/components/PreviewPanel.svelte'; import PreviewPanel from '$lib/components/PreviewPanel.svelte';
import DocumentViewer from '$lib/components/DocumentViewer.svelte'; import DocumentViewer from '$lib/components/DocumentViewer.svelte';
@@ -14,14 +15,14 @@
let searchMode = $state('hybrid'); let searchMode = $state('hybrid');
let searchResults = $state(null); let searchResults = $state(null);
let selectedDoc = $state(null); let selectedDoc = $state(null);
let infoPanelOpen = $state(false);
let debounceTimer; let debounceTimer;
// URL params → filter (source of truth) // URL params → filter
let currentPage = $derived(parseInt($page.url.searchParams.get('page') || '1')); let currentPage = $derived(parseInt($page.url.searchParams.get('page') || '1'));
let filterDomain = $derived($page.url.searchParams.get('domain') || ''); let filterDomain = $derived($page.url.searchParams.get('domain') || '');
let filterSubGroup = $derived($page.url.searchParams.get('sub_group') || ''); let filterSubGroup = $derived($page.url.searchParams.get('sub_group') || '');
// URL 변경 시 데이터 재로딩
$effect(() => { $effect(() => {
const _p = currentPage; const _p = currentPage;
const _d = filterDomain; const _d = filterDomain;
@@ -32,6 +33,7 @@
searchQuery = urlQ; searchQuery = urlQ;
searchMode = urlMode; searchMode = urlMode;
selectedDoc = null; selectedDoc = null;
infoPanelOpen = false;
if (urlQ) { if (urlQ) {
doSearch(urlQ, urlMode); doSearch(urlQ, urlMode);
@@ -117,43 +119,62 @@
selectedDoc = selectedDoc?.id === doc.id ? null : doc; selectedDoc = selectedDoc?.id === doc.id ? null : doc;
} }
function handleKeydown(e) {
if (e.key === 'Escape' && infoPanelOpen) {
infoPanelOpen = false;
}
}
let totalPages = $derived(Math.ceil(total / 20)); let totalPages = $derived(Math.ceil(total / 20));
let items = $derived(searchResults || documents); let items = $derived(searchResults || documents);
let hasActiveFilters = $derived(!!filterDomain || !!filterSubGroup || !!searchQuery); let hasActiveFilters = $derived(!!filterDomain || !!filterSubGroup || !!searchQuery);
</script> </script>
<svelte:window on:keydown={handleKeydown} />
<div class="flex flex-col h-full"> <div class="flex flex-col h-full">
<!-- 상단: 문서 목록 --> <!-- 상단: 문서 목록 (30% when viewer active, 100% otherwise) -->
<div class="overflow-y-auto p-4 lg:p-6 {selectedDoc ? 'h-[45%] shrink-0 border-b border-[var(--border)]' : 'flex-1'}"> <div class="overflow-y-auto px-4 py-3 {selectedDoc ? 'h-[30%] shrink-0 border-b border-[var(--border)]' : 'flex-1'}">
<!-- 검색바 --> <!-- 검색바 + 정보 버튼 -->
<div class="flex gap-2 mb-4"> <div class="flex gap-2 mb-3">
<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-3 py-1.5 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-2 py-1.5 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[var(--text)] text-xs"
> >
<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>
{#if selectedDoc}
<button
onclick={() => infoPanelOpen = !infoPanelOpen}
class="p-1.5 rounded-lg border border-[var(--border)] hover:border-[var(--accent)] text-[var(--text-dim)] hover:text-[var(--accent)] transition-colors
{infoPanelOpen ? 'bg-[var(--accent)]/10 border-[var(--accent)] text-[var(--accent)]' : ''}"
aria-label="문서 정보"
title="문서 정보"
>
<Info size={16} />
</button>
{/if}
</div> </div>
<!-- 결과 헤더 --> <!-- 결과 헤더 -->
{#if !loading} {#if !loading}
<div class="flex items-center justify-between mb-3"> <div class="flex items-center justify-between mb-2">
<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-[10px] 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-[10px] text-[var(--accent)] bg-[var(--accent)]/10 px-1.5 py-0.5 rounded">
{filterDomain.replace('Knowledge/', '')}{filterSubGroup ? ` / ${filterSubGroup}` : ''} {filterDomain.replace('Knowledge/', '')}{filterSubGroup ? ` / ${filterSubGroup}` : ''}
</span> </span>
{/if} {/if}
@@ -161,9 +182,9 @@
{#if hasActiveFilters} {#if hasActiveFilters}
<button <button
onclick={clearAllFilters} onclick={clearAllFilters}
class="text-xs text-[var(--text-dim)] hover:text-[var(--text)] px-2 py-1 rounded border border-[var(--border)]" class="text-[10px] text-[var(--text-dim)] hover:text-[var(--text)] px-1.5 py-0.5 rounded border border-[var(--border)]"
> >
필터 초기화 초기화
</button> </button>
{/if} {/if}
</div> </div>
@@ -171,27 +192,25 @@
<!-- 결과 --> <!-- 결과 -->
{#if loading} {#if loading}
<div class="space-y-2"> <div class="space-y-1.5">
{#each Array(6) as _} {#each Array(5) 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-3 border border-[var(--border)] animate-pulse h-14"></div>
{/each} {/each}
</div> </div>
{:else if items.length === 0} {:else if items.length === 0}
<div class="text-center py-16 text-[var(--text-dim)]"> <div class="text-center py-12 text-[var(--text-dim)]">
{#if searchQuery} {#if searchQuery}
<p class="text-base mb-2">'{searchQuery}'에 대한 결과가 없습니다</p> <p class="text-sm mb-2">'{searchQuery}'에 대한 결과가 없습니다</p>
<p class="text-sm mb-4">다른 검색어를 시도하거나 검색 모드를 변경해보세요</p> <button onclick={clearAllFilters} class="text-xs text-[var(--accent)] hover:underline">필터 초기화</button>
<button onclick={clearAllFilters} class="text-sm text-[var(--accent)] hover:underline">필터 초기화</button>
{:else if hasActiveFilters} {:else if hasActiveFilters}
<p class="text-base mb-2">이 분류에 문서가 없습니다</p> <p class="text-sm mb-2">이 분류에 문서가 없습니다</p>
<button onclick={clearAllFilters} class="text-sm text-[var(--accent)] hover:underline">필터 초기화</button> <button onclick={clearAllFilters} class="text-xs text-[var(--accent)] hover:underline">필터 초기화</button>
{:else} {:else}
<p class="text-base mb-2">등록된 문서가 없습니다</p> <p class="text-sm">등록된 문서가 없습니다</p>
<p class="text-sm">문서를 업로드하거나 Inbox에 추가하세요</p>
{/if} {/if}
</div> </div>
{:else} {:else}
<div class="space-y-1.5"> <div class="space-y-1">
{#each items as doc} {#each items as doc}
<DocumentCard <DocumentCard
{doc} {doc}
@@ -202,13 +221,12 @@
{/each} {/each}
</div> </div>
<!-- 페이지네이션 -->
{#if !searchResults && totalPages > 1} {#if !searchResults && totalPages > 1}
<div class="flex justify-center gap-1.5 mt-6"> <div class="flex justify-center gap-1 mt-4">
{#each Array(totalPages) as _, i} {#each Array(totalPages) as _, i}
<button <button
onclick={() => changePage(i + 1)} onclick={() => changePage(i + 1)}
class="px-3 py-1 rounded text-sm transition-colors class="px-2.5 py-0.5 rounded text-xs transition-colors
{currentPage === i + 1 ? 'bg-[var(--accent)] text-white' : 'bg-[var(--surface)] text-[var(--text-dim)] hover:text-[var(--text)]'}" {currentPage === i + 1 ? 'bg-[var(--accent)] text-white' : 'bg-[var(--surface)] text-[var(--text-dim)] hover:text-[var(--text)]'}"
> >
{i + 1} {i + 1}
@@ -219,17 +237,24 @@
{/if} {/if}
</div> </div>
<!-- 하단: 뷰어 + 정보 패널 (문서 선택 시) --> <!-- 하단: 뷰어 (70%, 전체 너비) -->
{#if selectedDoc} {#if selectedDoc}
<div class="flex flex-1 min-h-0"> <div class="flex-1 min-h-0">
<!-- 문서 뷰어 (좌측, 넓게) -->
<div class="flex-1 min-w-0">
<DocumentViewer doc={selectedDoc} /> <DocumentViewer doc={selectedDoc} />
</div> </div>
<!-- 정보 패널 (우측) -->
<div class="hidden lg:block shrink-0" style="width: 300px">
<PreviewPanel doc={selectedDoc} onclose={() => selectedDoc = null} />
</div>
</div>
{/if} {/if}
</div> </div>
<!-- 정보 패널: 우측 전체 높이 drawer -->
{#if infoPanelOpen && selectedDoc}
<div class="fixed inset-0 z-40">
<button
onclick={() => infoPanelOpen = false}
class="absolute inset-0 bg-black/40"
aria-label="정보 패널 닫기"
></button>
<div class="absolute right-0 top-0 bottom-0 z-50 w-[320px] shadow-xl">
<PreviewPanel doc={selectedDoc} onclose={() => infoPanelOpen = false} />
</div>
</div>
{/if}