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

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

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/routes/+layout.svelte

@@ -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
+    <button
-      class="px-4 py-3 rounded-lg shadow-lg text-sm flex items-center gap-2 cursor-pointer"
+      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>

frontend/src/routes/+page.svelte

@@ -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 { addToast } from '$lib/stores/ui';
-  import { sidebarOpen, addToast } from '$lib/stores/ui';
 
   let dashboard = null;
   let loading = true;
@@ -19,25 +18,8 @@
   });
 </script>
 
-<div class="min-h-screen">
+<div class="p-4 lg:p-6">
-  <!-- 상단 네비게이션 -->
+  <div class="max-w-6xl mx-auto">
-  <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">
     <h2 class="text-xl font-bold mb-6">대시보드</h2>
 
     {#if loading}

frontend/src/routes/documents/+page.svelte

@@ -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">
+<div class="p-4 lg:p-6">
-  <!-- 상단 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="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>

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

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

frontend/src/routes/inbox/+page.svelte

@@ -97,12 +97,10 @@
   ];
 </script>
 
-<div class="min-h-screen">
+<div class="p-4 lg:p-6">
-  <nav class="flex items-center justify-between px-6 py-3 border-b border-[var(--border)] bg-[var(--surface)]">
+  <div class="flex items-center justify-between mb-4">
-    <div class="flex items-center gap-4">
+    <div class="flex items-center gap-3">
-      <a href="/" class="text-lg font-semibold hover:text-[var(--accent)]">PKM</a>
+      <h2 class="text-lg font-semibold">Inbox</h2>
-      <span class="text-[var(--text-dim)]">/</span>
-      <span>Inbox</span>
       <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}

frontend/src/routes/settings/+page.svelte

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