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