feat: Phase 1A — 사이드바 트리 네비게이션 + domain/sub_group 필터

- Sidebar.svelte: /api/documents/tree 기반 domain→sub_group 트리,
  접기/펼치기, active highlight, 모바일 drawer
- documents/+page.svelte: 2-pane 레이아웃, URL params 기반 필터,
  빈 상태 개선, 카드 정보 밀도 향상 (domain 경로, 태그, origin 배지)
- documents.py: sub_group 필터 파라미터 추가
- app.css: domain 7색 + sidebar CSS 변수

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

app/api/documents.py

@@ -117,6 +117,7 @@ async def list_documents(
     page: int = Query(1, ge=1),
     page_size: int = Query(20, ge=1, le=100),
     domain: str | None = None,
+    sub_group: str | None = None,
     source: str | None = None,
     format: str | None = None,
 ):
@@ -125,6 +126,8 @@ async def list_documents(
 
     if domain:
         query = query.where(Document.ai_domain == domain)
+    if sub_group:
+        query = query.where(Document.ai_sub_group == sub_group)
     if source:
         query = query.where(Document.source_channel == source)
     if format:

frontend/src/app.css

@@ -11,6 +11,19 @@
   --error: #f5564e;
   --success: #4ade80;
   --warning: #fbbf24;
+
+  /* domain 색상 */
+  --domain-philosophy: #a78bfa;
+  --domain-language: #f472b6;
+  --domain-engineering: #38bdf8;
+  --domain-safety: #fb923c;
+  --domain-programming: #34d399;
+  --domain-general: #94a3b8;
+  --domain-reference: #fbbf24;
+
+  /* sidebar */
+  --sidebar-w: 260px;
+  --sidebar-bg: #141720;
 }
 
 body {

frontend/src/lib/components/Sidebar.svelte

@@ -0,0 +1,200 @@
+<script>
+  import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
+  import { api } from '$lib/api';
+  import { ChevronRight, ChevronDown, FolderOpen, Folder, Inbox } 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)',
+    '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으로 시작
+    } catch (err) {
+      console.error('트리 로딩 실패:', err);
+    } finally {
+      loading = false;
+    }
+  }
+
+  function toggleExpand(domain) {
+    expanded[domain] = !expanded[domain];
+  }
+
+  function navigate(domain, subGroup) {
+    const params = new URLSearchParams($page.url.searchParams);
+    // 필터 변경 시 page reset
+    params.delete('page');
+
+    if (domain) {
+      params.set('domain', domain);
+    } else {
+      params.delete('domain');
+    }
+
+    if (subGroup) {
+      params.set('sub_group', subGroup);
+    } else {
+      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(() => {
+    if (activeDomain) {
+      expanded[activeDomain] = true;
+    }
+  });
+
+  // 전체 문서 수
+  let totalCount = $derived(tree.reduce((sum, node) => sum + node.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>
+
+  <!-- 전체 문서 -->
+  <div class="px-2 pt-2">
+    <button
+      onclick={clearFilters}
+      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)]'}"
+    >
+      <span class="flex items-center gap-2">
+        <FolderOpen size={16} />
+        전체 문서
+      </span>
+      {#if totalCount > 0}
+        <span class="text-xs text-[var(--text-dim)]">{totalCount}</span>
+      {/if}
+    </button>
+  </div>
+
+  <!-- 트리 -->
+  <nav class="flex-1 px-2 py-2 space-y-0.5">
+    {#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)'}
+
+        <!-- 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)]"
+            >
+              {#if isExpanded}
+                <ChevronDown size={14} />
+              {:else}
+                <ChevronRight size={14} />
+              {/if}
+            </button>
+          {:else}
+            <span class="w-6"></span>
+          {/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}
+      {/each}
+    {/if}
+  </nav>
+
+  <!-- 하단: Inbox -->
+  <div class="px-2 py-2 border-t border-[var(--border)]">
+    <a
+      href="/inbox"
+      class="flex items-center justify-between px-3 py-2 rounded-md text-sm text-[var(--text)] hover:bg-[var(--surface)] transition-colors"
+    >
+      <span class="flex items-center gap-2">
+        <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>

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

@@ -1,33 +1,54 @@
 <script>
-  import { onMount } from 'svelte';
   import { page } from '$app/stores';
   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 = [];
+  let documents = $state([]);
-  let total = 0;
+  let total = $state(0);
-  let loading = true;
+  let loading = $state(true);
-  let searchQuery = '';
+  let searchQuery = $state('');
-  let searchMode = 'hybrid';
+  let searchMode = $state('hybrid');
-  let currentPage = 1;
+  let searchResults = $state(null);
-  let searchResults = null;
   let debounceTimer;
+  let sidebarOpen = $state(true);
 
-  // URL에서 초기 상태 복원
+  // URL params → filter (source of truth)
-  onMount(() => {
+  let currentPage = $derived(parseInt($page.url.searchParams.get('page') || '1'));
-    const params = $page.url.searchParams;
+  let filterDomain = $derived($page.url.searchParams.get('domain') || '');
-    searchQuery = params.get('q') || '';
+  let filterSubGroup = $derived($page.url.searchParams.get('sub_group') || '');
-    searchMode = params.get('mode') || 'hybrid';
+
-    currentPage = parseInt(params.get('page') || '1');
+  // URL 변경 시 데이터 재로딩
-    if (searchQuery) doSearch(); else loadDocuments();
+  $effect(() => {
+    // derived 값을 읽어서 반응성 트리거
+    const _p = currentPage;
+    const _d = filterDomain;
+    const _s = filterSubGroup;
+    const urlQ = $page.url.searchParams.get('q') || '';
+    const urlMode = $page.url.searchParams.get('mode') || 'hybrid';
+
+    searchQuery = urlQ;
+    searchMode = urlMode;
+
+    if (urlQ) {
+      doSearch(urlQ, urlMode);
+    } else {
+      loadDocuments();
+    }
   });
 
   async function loadDocuments() {
     loading = true;
     searchResults = null;
     try {
-      const data = await api(`/documents/?page=${currentPage}&page_size=20`);
+      const params = new URLSearchParams();
+      params.set('page', String(currentPage));
+      params.set('page_size', '20');
+      if (filterDomain) params.set('domain', filterDomain);
+      if (filterSubGroup) params.set('sub_group', filterSubGroup);
+
+      const data = await api(`/documents/?${params}`);
       documents = data.items;
       total = data.total;
     } catch (err) {
@@ -40,21 +61,31 @@
   function handleSearchInput() {
     clearTimeout(debounceTimer);
     debounceTimer = setTimeout(() => {
+      const params = new URLSearchParams($page.url.searchParams);
+      params.delete('page');
       if (searchQuery.trim()) {
-        currentPage = 1;
+        params.set('q', searchQuery.trim());
-        doSearch();
       } else {
-        loadDocuments();
+        params.delete('q');
-        updateUrl();
       }
+      if (searchMode !== 'hybrid') {
+        params.set('mode', searchMode);
+      } else {
+        params.delete('mode');
+      }
+      // 빈 값 정규화
+      for (const [key, val] of [...params.entries()]) {
+        if (!val) params.delete(key);
+      }
+      const qs = params.toString();
+      goto(`/documents${qs ? '?' + qs : ''}`, { noScroll: true });
     }, 300);
   }
 
-  async function doSearch() {
+  async function doSearch(q, mode) {
     loading = true;
-    updateUrl();
     try {
-      const data = await api(`/search/?q=${encodeURIComponent(searchQuery)}&mode=${searchMode}&limit=50`);
+      const data = await api(`/search/?q=${encodeURIComponent(q)}&mode=${mode}&limit=50`);
       searchResults = data.results;
       total = data.total;
     } catch (err) {
@@ -65,49 +96,109 @@
     }
   }
 
-  function updateUrl() {
-    const params = new URLSearchParams();
-    if (searchQuery) params.set('q', searchQuery);
-    if (searchMode !== 'hybrid') params.set('mode', searchMode);
-    if (currentPage > 1) params.set('page', String(currentPage));
-    const qs = params.toString();
-    goto(`/documents${qs ? '?' + qs : ''}`, { replaceState: true, noScroll: true });
-  }
-
   function changePage(p) {
-    currentPage = p;
+    const params = new URLSearchParams($page.url.searchParams);
-    if (searchQuery) doSearch(); else loadDocuments();
+    if (p > 1) {
-    updateUrl();
+      params.set('page', String(p));
+    } else {
+      params.delete('page');
+    }
+    const qs = params.toString();
+    goto(`/documents${qs ? '?' + qs : ''}`, { noScroll: true });
   }
 
-  $: totalPages = Math.ceil(total / 20);
+  function clearAllFilters() {
-  $: items = searchResults || documents;
+    goto('/documents', { noScroll: true });
+    searchQuery = '';
+  }
+
+  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="min-h-screen">
+<div class="h-screen flex flex-col">
-  <nav class="flex items-center justify-between px-6 py-3 border-b border-[var(--border)] bg-[var(--surface)]">
+  <!-- 상단 nav -->
-    <div class="flex items-center gap-4">
+  <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>문서</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>
 
-  <div class="max-w-6xl mx-auto p-6">
+  <!-- 메인 영역: 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-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.5 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[var(--text)] focus:border-[var(--accent)] outline-none"
+          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) doSearch(); }}
+          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>
@@ -117,43 +208,65 @@
         </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-3">
+        <div class="space-y-2">
-        {#each Array(5) as _}
+          {#each Array(6) as _}
-          <div class="bg-[var(--surface)] rounded-lg p-4 border border-[var(--border)] animate-pulse h-20"></div>
+            <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-20 text-[var(--text-dim)]">
+        <div class="text-center py-16 text-[var(--text-dim)]">
           {#if searchQuery}
-          <p class="text-lg mb-2">'{searchQuery}'에 대한 결과가 없습니다</p>
+            <p class="text-base mb-2">'{searchQuery}'에 대한 결과가 없습니다</p>
-          <p class="text-sm">다른 검색어를 시도하거나 검색 모드를 변경해보세요</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-lg">등록된 문서가 없습니다</p>
+            <p class="text-base mb-2">등록된 문서가 없습니다</p>
+            <p class="text-sm">문서를 업로드하거나 Inbox에 추가하세요</p>
           {/if}
         </div>
       {:else}
-      <div class="space-y-2">
+        <div class="space-y-1.5">
           {#each items as doc}
             <a
               href="/documents/{doc.id}"
-            class="flex items-center justify-between p-4 bg-[var(--surface)] border border-[var(--border)] rounded-lg hover:border-[var(--accent)] transition-colors"
+              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-xs px-2 py-0.5 rounded bg-[var(--border)] text-[var(--text-dim)] uppercase shrink-0">{doc.file_format}</span>
+                <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">{doc.title || '제목 없음'}</p>
+                  <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}
-                  <p class="text-xs text-[var(--text-dim)] truncate mt-0.5">{doc.ai_summary?.slice(0, 100)}</p>
+                      <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 class="flex items-center gap-3 shrink-0 ml-4">
+              </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-xs text-[var(--accent)]">{(doc.score * 100).toFixed(0)}%</span>
+                  <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}
-              <span class="text-xs text-[var(--text-dim)]">{doc.ai_domain || ''}</span>
               </div>
             </a>
           {/each}
@@ -161,15 +274,12 @@
 
         <!-- 페이지네이션 -->
         {#if !searchResults && totalPages > 1}
-        <div class="flex justify-center gap-2 mt-6">
+          <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"
+                class="px-3 py-1 rounded text-sm transition-colors
-              class:bg-[var(--accent)]={currentPage === i + 1}
+                  {currentPage === i + 1 ? 'bg-[var(--accent)] text-white' : 'bg-[var(--surface)] text-[var(--text-dim)] hover:text-[var(--text)]'}"
-              class:text-white={currentPage === i + 1}
-              class:bg-[var(--surface)]={currentPage !== i + 1}
-              class:text-[var(--text-dim)]={currentPage !== i + 1}
               >
                 {i + 1}
               </button>
@@ -177,5 +287,6 @@
           </div>
         {/if}
       {/if}
+    </main>
   </div>
 </div>