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))}
-  <slot />
+  {#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>

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 { 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}

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,37 +111,42 @@
   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">
+<div class="p-4 lg:p-6">
+  <!-- 검색바 + 필터 상태 -->
+  <div class="flex gap-2 mb-4">
+    <input
+      data-search-input
+      type="text"
+      bind:value={searchQuery}
+      oninput={handleSearchInput}
+      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"
+    />
+    <select
+      bind:value={searchMode}
+      onchange={() => { if (searchQuery) handleSearchInput(); }}
+      class="px-3 py-2 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[var(--text)] text-sm"
+    >
+      <option value="hybrid">하이브리드</option>
+      <option value="fts">전문검색</option>
+      <option value="trgm">부분매칭</option>
+      <option value="vector">의미검색</option>
+    </select>
+  </div>
+
+  <!-- 결과 헤더 -->
+  {#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}
@@ -154,139 +155,79 @@
           필터 초기화
         </button>
       {/if}
-      <a href="/inbox" class="text-sm text-[var(--text-dim)] hover:text-[var(--text)]">Inbox</a>
     </div>
-  </nav>
+  {/if}
 
-  <!-- 메인 영역: sidebar + content -->
-  <div class="flex flex-1 min-h-0">
-    <!-- 사이드바 (데스크톱: 항상 표시, 모바일: drawer) -->
-    <div
-      class="shrink-0 hidden lg:block"
-      style="width: var(--sidebar-w)"
-    >
-      <Sidebar />
+  <!-- 결과 -->
+  {#if loading}
+    <div class="space-y-2">
+      {#each Array(6) as _}
+        <div class="bg-[var(--surface)] rounded-lg p-4 border border-[var(--border)] animate-pulse h-16"></div>
+      {/each}
+    </div>
+  {:else if items.length === 0}
+    <div class="text-center py-16 text-[var(--text-dim)]">
+      {#if searchQuery}
+        <p class="text-base mb-2">'{searchQuery}'에 대한 결과가 없습니다</p>
+        <p class="text-sm mb-4">다른 검색어를 시도하거나 검색 모드를 변경해보세요</p>
+        <button onclick={clearAllFilters} class="text-sm text-[var(--accent)] hover:underline">필터 초기화</button>
+      {:else if hasActiveFilters}
+        <p class="text-base mb-2">이 분류에 문서가 없습니다</p>
+        <button onclick={clearAllFilters} class="text-sm text-[var(--accent)] hover:underline">필터 초기화</button>
+      {:else}
+        <p class="text-base mb-2">등록된 문서가 없습니다</p>
+        <p class="text-sm">문서를 업로드하거나 Inbox에 추가하세요</p>
+      {/if}
+    </div>
+  {:else}
+    <div class="space-y-1.5">
+      {#each items as doc}
+        <a
+          href="/documents/{doc.id}"
+          class="flex items-center justify-between p-3 bg-[var(--surface)] border border-[var(--border)] rounded-lg hover:border-[var(--accent)] transition-colors group"
+        >
+          <div class="flex items-center gap-3 min-w-0">
+            <span class="text-[10px] px-1.5 py-0.5 rounded bg-[var(--border)] text-[var(--text-dim)] uppercase shrink-0 font-mono">{doc.file_format}</span>
+            <div class="min-w-0">
+              <p class="text-sm font-medium truncate group-hover:text-[var(--accent)]">{doc.title || '제목 없음'}</p>
+              <div class="flex items-center gap-2 mt-0.5">
+                {#if doc.ai_domain}
+                  <span class="text-[10px] text-[var(--text-dim)]">{doc.ai_domain.replace('Knowledge/', '')}{doc.ai_sub_group ? ` / ${doc.ai_sub_group}` : ''}</span>
+                {/if}
+                {#if doc.ai_summary}
+                  <span class="text-[10px] text-[var(--text-dim)] truncate max-w-xs hidden sm:inline">· {doc.ai_summary?.slice(0, 80)}</span>
+                {/if}
+              </div>
+            </div>
+          </div>
+          <div class="flex items-center gap-2 shrink-0 ml-3">
+            {#if doc.ai_tags?.length}
+              <span class="text-[10px] text-[var(--accent)] hidden md:inline">{doc.ai_tags[0]}</span>
+            {/if}
+            {#if doc.score !== undefined}
+              <span class="text-[10px] text-[var(--accent)]">{(doc.score * 100).toFixed(0)}%</span>
+            {/if}
+            {#if doc.data_origin}
+              <span class="text-[10px] px-1.5 py-0.5 rounded {doc.data_origin === 'work' ? 'bg-blue-900/30 text-blue-400' : 'bg-gray-800 text-gray-400'}">{doc.data_origin}</span>
+            {/if}
+          </div>
+        </a>
+      {/each}
     </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>
+    <!-- 페이지네이션 -->
+    {#if !searchResults && totalPages > 1}
+      <div class="flex justify-center gap-1.5 mt-6">
+        {#each Array(totalPages) as _, i}
+          <button
+            onclick={() => changePage(i + 1)}
+            class="px-3 py-1 rounded text-sm transition-colors
+              {currentPage === i + 1 ? 'bg-[var(--accent)] text-white' : 'bg-[var(--surface)] text-[var(--text-dim)] hover:text-[var(--text)]'}"
+          >
+            {i + 1}
+          </button>
+        {/each}
       </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
-          type="text"
-          bind:value={searchQuery}
-          oninput={handleSearchInput}
-          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"
-        />
-        <select
-          bind:value={searchMode}
-          onchange={() => { if (searchQuery) handleSearchInput(); }}
-          class="px-3 py-2 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[var(--text)] text-sm"
-        >
-          <option value="hybrid">하이브리드</option>
-          <option value="fts">전문검색</option>
-          <option value="trgm">부분매칭</option>
-          <option value="vector">의미검색</option>
-        </select>
-      </div>
-
-      <!-- 결과 헤더 -->
-      {#if !loading}
-        <div class="flex items-center justify-between mb-3">
-          <span class="text-xs text-[var(--text-dim)]">{total}건</span>
-        </div>
-      {/if}
-
-      <!-- 결과 -->
-      {#if loading}
-        <div class="space-y-2">
-          {#each Array(6) as _}
-            <div class="bg-[var(--surface)] rounded-lg p-4 border border-[var(--border)] animate-pulse h-16"></div>
-          {/each}
-        </div>
-      {:else if items.length === 0}
-        <div class="text-center py-16 text-[var(--text-dim)]">
-          {#if searchQuery}
-            <p class="text-base mb-2">'{searchQuery}'에 대한 결과가 없습니다</p>
-            <p class="text-sm mb-4">다른 검색어를 시도하거나 검색 모드를 변경해보세요</p>
-            <button onclick={clearAllFilters} class="text-sm text-[var(--accent)] hover:underline">필터 초기화</button>
-          {:else if hasActiveFilters}
-            <p class="text-base mb-2">이 분류에 문서가 없습니다</p>
-            <button onclick={clearAllFilters} class="text-sm text-[var(--accent)] hover:underline">필터 초기화</button>
-          {:else}
-            <p class="text-base mb-2">등록된 문서가 없습니다</p>
-            <p class="text-sm">문서를 업로드하거나 Inbox에 추가하세요</p>
-          {/if}
-        </div>
-      {:else}
-        <div class="space-y-1.5">
-          {#each items as doc}
-            <a
-              href="/documents/{doc.id}"
-              class="flex items-center justify-between p-3 bg-[var(--surface)] border border-[var(--border)] rounded-lg hover:border-[var(--accent)] transition-colors group"
-            >
-              <div class="flex items-center gap-3 min-w-0">
-                <span class="text-[10px] px-1.5 py-0.5 rounded bg-[var(--border)] text-[var(--text-dim)] uppercase shrink-0 font-mono">{doc.file_format}</span>
-                <div class="min-w-0">
-                  <p class="text-sm font-medium truncate group-hover:text-[var(--accent)]">{doc.title || '제목 없음'}</p>
-                  <div class="flex items-center gap-2 mt-0.5">
-                    {#if doc.ai_domain}
-                      <span class="text-[10px] text-[var(--text-dim)]">{doc.ai_domain.replace('Knowledge/', '')}{doc.ai_sub_group ? ` / ${doc.ai_sub_group}` : ''}</span>
-                    {/if}
-                    {#if doc.ai_summary}
-                      <span class="text-[10px] text-[var(--text-dim)] truncate max-w-xs hidden sm:inline">· {doc.ai_summary?.slice(0, 80)}</span>
-                    {/if}
-                  </div>
-                </div>
-              </div>
-              <div class="flex items-center gap-2 shrink-0 ml-3">
-                {#if doc.ai_tags?.length}
-                  <span class="text-[10px] text-[var(--accent)] hidden md:inline">{doc.ai_tags[0]}</span>
-                {/if}
-                {#if doc.score !== undefined}
-                  <span class="text-[10px] text-[var(--accent)]">{(doc.score * 100).toFixed(0)}%</span>
-                {/if}
-                {#if doc.data_origin}
-                  <span class="text-[10px] px-1.5 py-0.5 rounded {doc.data_origin === 'work' ? 'bg-blue-900/30 text-blue-400' : 'bg-gray-800 text-gray-400'}">{doc.data_origin}</span>
-                {/if}
-              </div>
-            </a>
-          {/each}
-        </div>
-
-        <!-- 페이지네이션 -->
-        {#if !searchResults && totalPages > 1}
-          <div class="flex justify-center gap-1.5 mt-6">
-            {#each Array(totalPages) as _, i}
-              <button
-                onclick={() => changePage(i + 1)}
-                class="px-3 py-1 rounded text-sm transition-colors
-                  {currentPage === i + 1 ? 'bg-[var(--accent)] text-white' : 'bg-[var(--surface)] text-[var(--text-dim)] hover:text-[var(--text)]'}"
-              >
-                {i + 1}
-              </button>
-            {/each}
-          </div>
-        {/if}
-      {/if}
-    </main>
-  </div>
+  {/if}
 </div>

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

@@ -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">

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

@@ -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}

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

@@ -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>