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

refactor: 사이드바를 전역 레이아웃으로 이동

Browse Source 
- +layout.svelte: 사이드바 + 상단 nav 통합 (로그인/셋업 제외)
- 각 페이지 중복 nav 제거 (dashboard, documents, detail, inbox, settings)
- 모바일 drawer + ESC 닫기 전역 처리

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-04-03 09:00:20 +09:00
parent 87747866b6
commit 1a2b3b49af
6 changed files with 191 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,12 +3,15 @@
import { browser } from '$app/environment';
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import { isAuthenticated, tryRefresh, logout } from '$lib/stores/auth';
import { isAuthenticated, user, tryRefresh, logout } from '$lib/stores/auth';
import { toasts, removeToast } from '$lib/stores/ui';
import Sidebar from '$lib/components/Sidebar.svelte';
import '../app.css';
const PUBLIC_PATHS = ['/login', '/setup'];
const NO_SIDEBAR_PATHS = ['/login', '/setup'];
let authChecked = false;
let sidebarOpen = $state(false);
onMount(async () => {
if (!$isAuthenticated) {
@@ -23,12 +26,18 @@
}
}
// 사이드바 표시 여부
$: showSidebar = $isAuthenticated && !NO_SIDEBAR_PATHS.some(p => $page.url.pathname.startsWith(p));
// 키보드 단축키
function handleKeydown(e) {
if (e.key === '/' && !['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
e.preventDefault();
document.querySelector('[data-search-input]')?.focus();
}
if (e.key === 'Escape' && sidebarOpen) {
sidebarOpen = false;
}
}
</script>
@@ -39,14 +48,71 @@
<p class="text-[var(--text-dim)]">로딩 중...</p>
</div>
{:else if $isAuthenticated || PUBLIC_PATHS.some(p => $page.url.pathname.startsWith(p))}
{#if showSidebar}
<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">
<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"
aria-label="사이드바 토글"
>
<svg width="18" height="18" 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>
</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>
<button
onclick={() => logout()}
class="text-sm 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 -->
{#if sidebarOpen}
<div class="fixed inset-0 z-40 lg:hidden">
<button
onclick={() => sidebarOpen = false}
class="absolute inset-0 bg-black/50"
aria-label="사이드바 닫기"
></button>
<div class="absolute left-0 top-0 bottom-0 w-[280px] z-50">
<Sidebar />
</div>
</div>
{/if}
<!-- 콘텐츠 영역 -->
<main class="flex-1 overflow-y-auto">
<slot />
</main>
</div>
</div>
{:else}
<slot />
{/if}
{/if}
<!-- Toast 컨테이너 -->
<div class="fixed top-4 right-4 z-50 flex flex-col gap-2 max-w-sm">
{#each $toasts as toast (toast.id)}
<div
class="px-4 py-3 rounded-lg shadow-lg text-sm flex items-center gap-2 cursor-pointer"
<button
class="px-4 py-3 rounded-lg shadow-lg text-sm flex items-center gap-2 cursor-pointer text-left"
class:bg-green-900={toast.type === 'success'}
class:bg-red-900={toast.type === 'error'}
class:bg-yellow-900={toast.type === 'warning'}
@@ -55,10 +121,9 @@
class:text-red-200={toast.type === 'error'}
class:text-yellow-200={toast.type === 'warning'}
class:text-blue-200={toast.type === 'info'}
role="alert"
onclick={() => removeToast(toast.id)}
>
{toast.message}
</div>
</button>
{/each}
</div>

24
frontend/src/routes/+page.svelte
View File

@@ -2,8 +2,7 @@
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import { api } from '$lib/api';
import { isAuthenticated, user, logout } from '$lib/stores/auth';
import { sidebarOpen, addToast } from '$lib/stores/ui';
import { addToast } from '$lib/stores/ui';
let dashboard = null;
let loading = true;
@@ -19,25 +18,8 @@
});
</script>
<div class="min-h-screen">
<!-- 상단 네비게이션 -->
<nav class="flex items-center justify-between px-6 py-3 border-b border-[var(--border)] bg-[var(--surface)]">
<div class="flex items-center gap-4">
<button onclick={() => sidebarOpen.update(v => !v)} class="text-[var(--text-dim)] hover:text-[var(--text)]">
&#9776;
</button>
<h1 class="text-lg font-semibold">hyungi Document Server</h1>
</div>
<div class="flex items-center gap-4">
<a href="/documents" class="text-sm text-[var(--text-dim)] hover:text-[var(--text)]">문서</a>
<a href="/inbox" class="text-sm text-[var(--text-dim)] hover:text-[var(--text)]">Inbox</a>
<span class="text-sm text-[var(--text-dim)]">{$user?.username}</span>
<button onclick={() => { logout(); goto('/login'); }} class="text-sm text-[var(--error)] hover:underline">로그아웃</button>
</div>
</nav>
<!-- 대시보드 -->
<div class="max-w-6xl mx-auto p-6">
<div class="p-4 lg:p-6">
<div class="max-w-6xl mx-auto">
<h2 class="text-xl font-bold mb-6">대시보드</h2>
{#if loading}

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

@@ -3,7 +3,6 @@
import { goto } from '$app/navigation';
import { api } from '$lib/api';
import { addToast } from '$lib/stores/ui';
import Sidebar from '$lib/components/Sidebar.svelte';
let documents = $state([]);
let total = $state(0);
@@ -12,7 +11,6 @@
let searchMode = $state('hybrid');
let searchResults = $state(null);
let debounceTimer;
let sidebarOpen = $state(true);
// URL params → filter (source of truth)
let currentPage = $derived(parseInt($page.url.searchParams.get('page') || '1'));
@@ -21,7 +19,6 @@
// URL 변경 시 데이터 재로딩
$effect(() => {
// derived 값을 읽어서 반응성 트리거
const _p = currentPage;
const _d = filterDomain;
const _s = filterSubGroup;
@@ -73,7 +70,6 @@
} else {
params.delete('mode');
}
// 빈 값 정규화
for (const [key, val] of [...params.entries()]) {
if (!val) params.delete(key);
}
@@ -115,78 +111,10 @@
let totalPages = $derived(Math.ceil(total / 20));
let items = $derived(searchResults || documents);
let hasActiveFilters = $derived(!!filterDomain || !!filterSubGroup || !!searchQuery);
// 활성 필터 라벨
let filterLabel = $derived(() => {
const parts = [];
if (filterDomain) parts.push(filterDomain.replace('Knowledge/', ''));
if (filterSubGroup) parts.push(filterSubGroup);
return parts.join(' / ');
});
</script>
<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">
<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"
>
<svg width="18" height="18" 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>
<span class="text-sm">문서</span>
{#if filterLabel()}
<span class="text-[var(--text-dim)]">/</span>
<span class="text-sm text-[var(--accent)]">{filterLabel()}</span>
{/if}
</div>
<div class="flex items-center gap-3">
{#if hasActiveFilters}
<button
onclick={clearAllFilters}
class="text-xs text-[var(--text-dim)] hover:text-[var(--text)] px-2 py-1 rounded border border-[var(--border)]"
>
필터 초기화
</button>
{/if}
<a href="/inbox" class="text-sm text-[var(--text-dim)] hover:text-[var(--text)]">Inbox</a>
</div>
</nav>
<!-- 메인 영역: sidebar + content -->
<div class="flex flex-1 min-h-0">
<!-- 사이드바 (데스크톱: 항상 표시, 모바일: drawer) -->
<div
class="shrink-0 hidden lg:block"
style="width: var(--sidebar-w)"
>
<Sidebar />
</div>
<!-- 모바일 drawer -->
{#if sidebarOpen}
<div class="fixed inset-0 z-40 lg:hidden">
<!-- overlay -->
<button
onclick={() => sidebarOpen = false}
class="absolute inset-0 bg-black/50"
onkeydown={(e) => e.key === 'Escape' && (sidebarOpen = false)}
></button>
<!-- drawer -->
<div class="absolute left-0 top-0 bottom-0 w-[280px] z-50">
<Sidebar />
</div>
</div>
{/if}
<!-- 문서 목록 -->
<main class="flex-1 overflow-y-auto p-4 lg:p-6">
<!-- 검색바 -->
<div class="p-4 lg:p-6">
<!-- 검색바 + 필터 상태 -->
<div class="flex gap-2 mb-4">
<input
data-search-input
@@ -211,7 +139,22 @@
<!-- 결과 헤더 -->
{#if !loading}
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<span class="text-xs text-[var(--text-dim)]">{total}건</span>
{#if filterDomain}
<span class="text-xs text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded">
{filterDomain.replace('Knowledge/', '')}{filterSubGroup ? ` / ${filterSubGroup}` : ''}
</span>
{/if}
</div>
{#if hasActiveFilters}
<button
onclick={clearAllFilters}
class="text-xs text-[var(--text-dim)] hover:text-[var(--text)] px-2 py-1 rounded border border-[var(--border)]"
>
필터 초기화
</button>
{/if}
</div>
{/if}
@@ -287,6 +230,4 @@
</div>
{/if}
{/if}
</main>
</div>
</div>

15
frontend/src/routes/documents/[id]/+page.svelte
View File

@@ -33,14 +33,13 @@
}
</script>
<div class="min-h-screen">
<nav class="flex items-center gap-2 px-6 py-3 border-b border-[var(--border)] bg-[var(--surface)] text-sm">
<a href="/" class="text-[var(--text-dim)] hover:text-[var(--text)]">PKM</a>
<span class="text-[var(--text-dim)]">/</span>
<a href="/documents" class="text-[var(--text-dim)] hover:text-[var(--text)]">문서</a>
<span class="text-[var(--text-dim)]">/</span>
<span class="truncate max-w-md">{doc?.title || '로딩...'}</span>
</nav>
<div class="p-4 lg:p-6">
<!-- breadcrumb -->
<div class="flex items-center gap-2 text-sm mb-4 text-[var(--text-dim)]">
<a href="/documents" class="hover:text-[var(--text)]">문서</a>
<span>/</span>
<span class="truncate max-w-md text-[var(--text)]">{doc?.title || '로딩...'}</span>
</div>
{#if loading}
<div class="max-w-6xl mx-auto p-6">

12
frontend/src/routes/inbox/+page.svelte
View File

@@ -97,12 +97,10 @@
];
</script>
<div class="min-h-screen">
<nav class="flex items-center justify-between px-6 py-3 border-b border-[var(--border)] bg-[var(--surface)]">
<div class="flex items-center gap-4">
<a href="/" class="text-lg font-semibold hover:text-[var(--accent)]">PKM</a>
<span class="text-[var(--text-dim)]">/</span>
<span>Inbox</span>
<div class="p-4 lg:p-6">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-3">
<h2 class="text-lg font-semibold">Inbox</h2>
<span class="text-xs px-2 py-0.5 rounded-full bg-[var(--warning)] text-black">{documents.length}</span>
</div>
<div class="flex items-center gap-2">
@@ -117,7 +115,7 @@
{approving ? '처리 중...' : `선택 승인 (${selected.size})`}
</button>
</div>
</nav>
</div>
<div class="max-w-6xl mx-auto p-6">
{#if loading}

10
frontend/src/routes/settings/+page.svelte
View File

@@ -39,14 +39,8 @@
}
</script>
<div class="min-h-screen">
<nav class="flex items-center gap-2 px-6 py-3 border-b border-[var(--border)] bg-[var(--surface)] text-sm">
<a href="/" class="text-[var(--text-dim)] hover:text-[var(--text)]">PKM</a>
<span class="text-[var(--text-dim)]">/</span>
<span>설정</span>
</nav>
<div class="max-w-lg mx-auto p-6">
<div class="p-4 lg:p-6">
<div class="max-w-lg mx-auto">
<!-- 계정 정보 -->
<div class="bg-[var(--surface)] rounded-xl border border-[var(--border)] p-5 mb-6">
<h2 class="text-lg font-semibold mb-3">계정 정보</h2>