feat: 사이드바 3단계 재귀 트리 + 너비 확장 (320px)

- tree API: domain 경로를 파싱하여 계층 구조로 반환
  (Industrial_Safety → Practice → Patrol_Inspection)
- Sidebar: 재귀 snippet으로 N단계 트리 렌더링
- domain 필터: prefix 매칭 (상위 클릭 시 하위 전부 포함)
- 사이드바 너비: 260px → 320px

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

frontend/src/app.css

@@ -22,7 +22,7 @@
   --domain-reference: #fbbf24;
 
   /* sidebar */
-  --sidebar-w: 260px;
+  --sidebar-w: 320px;
   --sidebar-bg: #141720;
 }
 

frontend/src/lib/components/Sidebar.svelte

@@ -2,45 +2,28 @@
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
   import { api } from '$lib/api';
-  import { ChevronRight, ChevronDown, FolderOpen, Folder, Inbox, Clock, Mail, Scale } from 'lucide-svelte';
+  import { ChevronRight, ChevronDown, FolderOpen, Inbox, Clock, Mail, Scale } from 'lucide-svelte';
 
   let tree = $state([]);
-  let inboxCount = $state(0);
   let loading = $state(true);
   let expanded = $state({});
 
-  // 현재 URL에서 선택된 domain/sub_group
   let activeDomain = $derived($page.url.searchParams.get('domain'));
-  let activeSubGroup = $derived($page.url.searchParams.get('sub_group'));
 
-  // domain별 색상
   const DOMAIN_COLORS = {
-    'Knowledge/Philosophy': 'var(--domain-philosophy)',
-    'Knowledge/Language': 'var(--domain-language)',
-    'Knowledge/Engineering': 'var(--domain-engineering)',
-    'Knowledge/Industrial_Safety': 'var(--domain-safety)',
-    'Knowledge/Programming': 'var(--domain-programming)',
-    'Knowledge/General': 'var(--domain-general)',
+    'Philosophy': 'var(--domain-philosophy)',
+    'Language': 'var(--domain-language)',
+    'Engineering': 'var(--domain-engineering)',
+    'Industrial_Safety': 'var(--domain-safety)',
+    'Programming': 'var(--domain-programming)',
+    'General': 'var(--domain-general)',
     'Reference': 'var(--domain-reference)',
   };
 
-  // domain 표시 이름 (짧게)
-  function displayName(domain) {
-    return domain.replace('Knowledge/', '');
-  }
-
   async function loadTree() {
     loading = true;
     try {
-      const [treeData, docsData] = await Promise.all([
-        api('/documents/tree'),
-        api('/documents/?page_size=1&domain='),
-      ]);
-      tree = treeData;
-      // inbox count: file_path가 PKM/Inbox/로 시작하는 문서
-      const inboxData = await api('/documents/?page_size=1');
-      // tree에서 전체 count 합산
-      inboxCount = 0; // 별도 API 없으면 0으로 시작
+      tree = await api('/documents/tree');
     } catch (err) {
       console.error('트리 로딩 실패:', err);
     } finally {
@@ -48,57 +31,44 @@
     }
   }
 
-  function toggleExpand(domain) {
-    expanded[domain] = !expanded[domain];
+  function toggleExpand(path) {
+    expanded[path] = !expanded[path];
   }
 
-  function navigate(domain, subGroup) {
+  function navigate(path) {
     const params = new URLSearchParams($page.url.searchParams);
-    // 필터 변경 시 page reset
     params.delete('page');
-
-    if (domain) {
-      params.set('domain', domain);
+    if (path) {
+      params.set('domain', path);
     } else {
       params.delete('domain');
     }
-
-    if (subGroup) {
-      params.set('sub_group', subGroup);
-    } else {
-      params.delete('sub_group');
-    }
-
-    // 빈 값 정규화
+    params.delete('sub_group');
     for (const [key, val] of [...params.entries()]) {
       if (!val) params.delete(key);
     }
-
     const qs = params.toString();
     goto(`/documents${qs ? '?' + qs : ''}`, { noScroll: true });
   }
 
-  function clearFilters() {
-    goto('/documents', { noScroll: true });
-  }
-
-  // 초기 로딩 + 선택된 domain은 자동 펼치기
-  $effect(() => {
-    loadTree();
-  });
+  $effect(() => { loadTree(); });
 
   $effect(() => {
     if (activeDomain) {
-      expanded[activeDomain] = true;
+      // 선택된 경로의 부모들 자동 펼치기
+      const parts = activeDomain.split('/');
+      let path = '';
+      for (const part of parts) {
+        path = path ? `${path}/${part}` : part;
+        expanded[path] = true;
+      }
     }
   });
 
-  // 전체 문서 수
-  let totalCount = $derived(tree.reduce((sum, node) => sum + node.count, 0));
+  let totalCount = $derived(tree.reduce((sum, n) => sum + n.count, 0));
 </script>
 
 <aside class="h-full flex flex-col bg-[var(--sidebar-bg)] border-r border-[var(--border)] overflow-y-auto">
-  <!-- 헤더 -->
   <div class="px-4 py-3 border-b border-[var(--border)]">
     <h2 class="text-sm font-semibold text-[var(--text-dim)] uppercase tracking-wider">분류</h2>
   </div>
@@ -106,7 +76,7 @@
   <!-- 전체 문서 -->
   <div class="px-2 pt-2">
     <button
-      onclick={clearFilters}
+      onclick={() => navigate(null)}
       class="w-full flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors
         {!activeDomain ? 'bg-[var(--accent)]/15 text-[var(--accent)]' : 'text-[var(--text)] hover:bg-[var(--surface)]'}"
     >
@@ -121,63 +91,58 @@
   </div>
 
   <!-- 트리 -->
-  <nav class="flex-1 px-2 py-2 space-y-0.5">
+  <nav class="flex-1 px-2 py-2">
     {#if loading}
       {#each Array(5) as _}
         <div class="h-8 bg-[var(--surface)] rounded-md animate-pulse mx-1 mb-1"></div>
       {/each}
     {:else}
       {#each tree as node}
-        {@const isActive = activeDomain === node.domain && !activeSubGroup}
-        {@const isParentActive = activeDomain === node.domain}
-        {@const hasChildren = node.children.length > 0}
-        {@const isExpanded = expanded[node.domain]}
-        {@const color = DOMAIN_COLORS[node.domain] || 'var(--text-dim)'}
+        {@const color = DOMAIN_COLORS[node.name] || 'var(--text-dim)'}
+        {#snippet treeNode(n, depth)}
+          {@const isActive = activeDomain === n.path}
+          {@const isParent = activeDomain?.startsWith(n.path + '/')}
+          {@const hasChildren = n.children.length > 0}
+          {@const isExpanded = expanded[n.path]}
+
+          <div class="flex items-center" style="padding-left: {depth * 16}px">
+            {#if hasChildren}
+              <button
+                onclick={() => toggleExpand(n.path)}
+                class="p-0.5 rounded hover:bg-[var(--surface)] text-[var(--text-dim)]"
+              >
+                {#if isExpanded}
+                  <ChevronDown size={14} />
+                {:else}
+                  <ChevronRight size={14} />
+                {/if}
+              </button>
+            {:else}
+              <span class="w-5"></span>
+            {/if}
 
-        <!-- domain 노드 -->
-        <div class="flex items-center group">
-          {#if hasChildren}
             <button
-              onclick={() => toggleExpand(node.domain)}
-              class="p-1 rounded hover:bg-[var(--surface)] text-[var(--text-dim)]"
+              onclick={() => navigate(n.path)}
+              class="flex-1 flex items-center justify-between px-2 py-1.5 rounded-md text-sm transition-colors
+                {isActive ? 'bg-[var(--accent)]/15 text-[var(--accent)]' : isParent ? 'text-[var(--text)]' : 'text-[var(--text-dim)] hover:bg-[var(--surface)] hover:text-[var(--text)]'}"
             >
-              {#if isExpanded}
-                <ChevronDown size={14} />
-              {:else}
-                <ChevronRight size={14} />
-              {/if}
+              <span class="flex items-center gap-2">
+                {#if depth === 0}
+                  <span class="w-2 h-2 rounded-full shrink-0" style="background: {color}"></span>
+                {/if}
+                <span class="truncate">{n.name}</span>
+              </span>
+              <span class="text-xs text-[var(--text-dim)] shrink-0 ml-2">{n.count}</span>
             </button>
-          {:else}
-            <span class="w-6"></span>
+          </div>
+
+          {#if hasChildren && isExpanded}
+            {#each n.children as child}
+              {@render treeNode(child, depth + 1)}
+            {/each}
           {/if}
-
-          <button
-            onclick={() => navigate(node.domain, null)}
-            class="flex-1 flex items-center justify-between px-2 py-1.5 rounded-md text-sm transition-colors
-              {isActive ? 'bg-[var(--accent)]/15 text-[var(--accent)]' : 'text-[var(--text)] hover:bg-[var(--surface)]'}"
-          >
-            <span class="flex items-center gap-2 truncate">
-              <span class="w-2 h-2 rounded-full shrink-0" style="background: {color}"></span>
-              {displayName(node.domain)}
-            </span>
-            <span class="text-xs text-[var(--text-dim)]">{node.count}</span>
-          </button>
-        </div>
-
-        <!-- sub_group 자식 노드 -->
-        {#if hasChildren && isExpanded}
-          {#each node.children as child}
-            {@const isChildActive = activeDomain === node.domain && activeSubGroup === child.sub_group}
-            <button
-              onclick={() => navigate(node.domain, child.sub_group)}
-              class="w-full flex items-center justify-between pl-10 pr-3 py-1.5 rounded-md text-sm transition-colors
-                {isChildActive ? 'bg-[var(--accent)]/15 text-[var(--accent)]' : 'text-[var(--text-dim)] hover:bg-[var(--surface)] hover:text-[var(--text)]'}"
-            >
-              <span class="truncate">{child.sub_group}</span>
-              <span class="text-xs">{child.count}</span>
-            </button>
-          {/each}
-        {/if}
+        {/snippet}
+        {@render treeNode(node, 0)}
       {/each}
     {/if}
   </nav>
@@ -186,26 +151,26 @@
   <div class="px-2 py-2 border-t border-[var(--border)]">
     <h3 class="px-3 py-1 text-[10px] font-semibold text-[var(--text-dim)] uppercase tracking-wider">스마트 그룹</h3>
     <button
-      onclick={() => { const d = new Date(); d.setDate(d.getDate() - 7); navigate(null, null); const params = new URLSearchParams($page.url.searchParams); params.delete('domain'); params.delete('sub_group'); params.delete('page'); const qs = params.toString(); goto(`/documents${qs ? '?' + qs : ''}`, { noScroll: true }); }}
+      onclick={() => goto('/documents', { noScroll: true })}
       class="w-full flex items-center gap-2 px-3 py-1.5 rounded-md text-sm text-[var(--text-dim)] hover:bg-[var(--surface)] hover:text-[var(--text)]"
     >
       <Clock size={14} /> 최근 7일
     </button>
     <button
-      onclick={() => { const params = new URLSearchParams(); params.set('source', 'law_monitor'); goto(`/documents?${params}`, { noScroll: true }); }}
+      onclick={() => { const p = new URLSearchParams(); p.set('source', 'law_monitor'); goto(`/documents?${p}`, { noScroll: true }); }}
       class="w-full flex items-center gap-2 px-3 py-1.5 rounded-md text-sm text-[var(--text-dim)] hover:bg-[var(--surface)] hover:text-[var(--text)]"
     >
       <Scale size={14} /> 법령 알림
     </button>
     <button
-      onclick={() => { const params = new URLSearchParams(); params.set('source', 'email'); goto(`/documents?${params}`, { noScroll: true }); }}
+      onclick={() => { const p = new URLSearchParams(); p.set('source', 'email'); goto(`/documents?${p}`, { noScroll: true }); }}
       class="w-full flex items-center gap-2 px-3 py-1.5 rounded-md text-sm text-[var(--text-dim)] hover:bg-[var(--surface)] hover:text-[var(--text)]"
     >
       <Mail size={14} /> 이메일
     </button>
   </div>
 
-  <!-- 하단: Inbox -->
+  <!-- Inbox -->
   <div class="px-2 py-2 border-t border-[var(--border)]">
     <a
       href="/inbox"
@@ -215,9 +180,6 @@
         <Inbox size={16} />
         받은편지함
       </span>
-      {#if inboxCount > 0}
-        <span class="text-xs bg-[var(--error)] text-white px-1.5 py-0.5 rounded-full">{inboxCount}</span>
-      {/if}
     </a>
   </div>
 </aside>