From 5cf7952b33539815fce6ecd3ddf263b600ebb622 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Fri, 24 Apr 2026 07:28:04 +0900
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC?=
 =?UTF-8?q?=20=EB=82=B4=EB=B9=84=20=EC=83=81=EB=8B=A8=20=EC=9D=B4=EB=8F=99?=
 =?UTF-8?q?=20+=20uvicorn=20proxy-headers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- +layout.svelte 상단 nav 에 오디오/비디오 추가 (문서/자료실 옆,
  카테고리 계열 그룹). Sidebar 는 §2 에서 추가했던 카테고리
  블록 제거하고 기존 도메인 트리 전용으로 복구 — 상단 nav 와
  중복되고, 사이드바가 카테고리 탐색 1차 진입점으로 적합하지
  않다는 피드백 반영.
- app/Dockerfile uvicorn 에 --proxy-headers --forwarded-allow-ips=*
  추가. FastAPI 의 trailing-slash 307 리다이렉트가 X-Forwarded-Proto
  를 무시해 Location 헤더를 http:// 로 생성 → HTTPS 페이지에서
  mixed-content block (/video 에서 목격). home-caddy → document-caddy
  → fastapi 체인에서 scheme 복구.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/Dockerfile                             |   2 +-
 frontend/src/lib/components/Sidebar.svelte | 232 ++++-----------------
 frontend/src/routes/+layout.svelte         |   4 +
 3 files changed, 50 insertions(+), 188 deletions(-)

diff --git a/app/Dockerfile b/app/Dockerfile
index cc7528c..b6a66c2 100644
--- a/app/Dockerfile
+++ b/app/Dockerfile
@@ -16,4 +16,4 @@ RUN pip install --no-cache-dir -r requirements.txt
 
 COPY . .
 
-CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000", "--proxy-headers", "--forwarded-allow-ips", "*"]
diff --git a/frontend/src/lib/components/Sidebar.svelte b/frontend/src/lib/components/Sidebar.svelte
index 42fe05e..0742713 100644
--- a/frontend/src/lib/components/Sidebar.svelte
+++ b/frontend/src/lib/components/Sidebar.svelte
@@ -1,42 +1,14 @@
 <script>
-  // Sidebar — §2 재구성.
-  //
-  // 구조:
-  //   1) 카테고리 내비 (Section 2 — documents.category 1차 진입점)
-  //      · 문서 / 자료실 / 뉴스 / 메모 / (Audio §3) / (Video §3) / 검색
-  //      · count 배지: GET /api/documents/stats/category-counts
-  //      · 자료실에는 pending suggestion 배지 별도 표시
-  //   2) 도메인 트리 (기존 Phase 2 기능 — /documents 페이지 필터링)
-  //   3) 스마트 그룹 + Inbox (기존)
-  //
-  // 제약: audio/video 는 §3 에서 채우므로 여기서는 주석 자리로 둔다.
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
   import { api } from '$lib/api';
-  import {
-    ChevronRight,
-    ChevronDown,
-    FolderOpen,
-    FolderTree,
-    Inbox,
-    Clock,
-    Mail,
-    Scale,
-    StickyNote,
-    Newspaper,
-    Search,
-    Mic,
-    Film,
-  } from 'lucide-svelte';
-
-  // ─── 도메인 트리 (기존) ───
+  import { ChevronRight, ChevronDown, FolderOpen, FolderTree, Inbox, Clock, Mail, Scale, StickyNote } from 'lucide-svelte';
 
   let tree = $state([]);
-  let treeLoading = $state(true);
+  let loading = $state(true);
   let expanded = $state({});
 
   let activeDomain = $derived($page.url.searchParams.get('domain'));
-  let currentPath = $derived($page.url.pathname);
 
   const DOMAIN_COLORS = {
     'Philosophy': 'var(--domain-philosophy)',
@@ -49,34 +21,13 @@
   };
 
   async function loadTree() {
-    treeLoading = true;
+    loading = true;
     try {
       tree = await api('/documents/tree');
     } catch (err) {
       console.error('트리 로딩 실패:', err);
     } finally {
-      treeLoading = false;
-    }
-  }
-
-  // ─── 카테고리 count (§2 신규) ───
-
-  let categoryCounts = $state({});
-  let libraryPending = $state(0);
-  let countsLoading = $state(true);
-
-  async function loadCategoryCounts() {
-    countsLoading = true;
-    try {
-      const res = await api('/documents/stats/category-counts');
-      categoryCounts = res?.counts ?? {};
-      libraryPending = res?.library_pending_suggestions ?? 0;
-    } catch {
-      // §1 미적용 환경에서는 엔드포인트가 없을 수 있다 — 배지만 숨기고 내비는 유지.
-      categoryCounts = {};
-      libraryPending = 0;
-    } finally {
-      countsLoading = false;
+      loading = false;
     }
   }
 
@@ -84,7 +35,7 @@
     expanded[path] = !expanded[path];
   }
 
-  function navigateDomain(path) {
+  function navigate(path) {
     const params = new URLSearchParams($page.url.searchParams);
     params.delete('page');
     if (path) {
@@ -101,10 +52,10 @@
   }
 
   $effect(() => { loadTree(); });
-  $effect(() => { loadCategoryCounts(); });
 
   $effect(() => {
     if (activeDomain) {
+      // 선택된 경로의 부모들 자동 펼치기
       const parts = activeDomain.split('/');
       let path = '';
       for (const part of parts) {
@@ -114,10 +65,9 @@
     }
   });
 
-  // 도메인 트리 전체 count (stats 엔드포인트가 죽어있을 때 문서 배지 fallback 으로도 사용)
-  let treeTotal = $derived(tree.reduce((sum, n) => sum + n.count, 0));
-  let documentCount = $derived(categoryCounts.document ?? treeTotal);
+  let totalCount = $derived(tree.reduce((sum, n) => sum + n.count, 0));
 
+  // ArrowUp/Down 키보드 nav — 현재 펼쳐진 tree-row만 traverse
   function handleTreeKeydown(e) {
     if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
     const root = e.currentTarget;
@@ -138,139 +88,31 @@
 
 <aside class="h-full flex flex-col bg-sidebar border-r border-default overflow-y-auto">
   <div class="px-4 py-3 border-b border-default">
-    <h2 class="text-sm font-semibold text-dim uppercase tracking-wider">카테고리</h2>
+    <h2 class="text-sm font-semibold text-dim uppercase tracking-wider">분류</h2>
   </div>
 
-  <!-- 카테고리 내비 (§2) -->
-  <nav class="px-2 py-2 flex flex-col gap-0.5">
-    <a
-      href="/documents"
-      class="flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors
-        {currentPath === '/documents' ? 'bg-accent/15 text-accent' : 'text-text hover:bg-surface-hover'}"
+  <!-- 전체 문서 -->
+  <div class="px-2 pt-2">
+    <button
+      onclick={() => navigate(null)}
+      class="w-full flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors
+        {!activeDomain ? 'bg-accent/15 text-accent' : 'text-text hover:bg-surface'}"
     >
       <span class="flex items-center gap-2">
         <FolderOpen size={16} />
-        문서
+        전체 문서
       </span>
-      {#if documentCount > 0}
-        <span class="text-xs text-dim">{documentCount}</span>
-      {/if}
-    </a>
-
-    <a
-      href="/library"
-      class="flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors
-        {currentPath.startsWith('/library') ? 'bg-accent/15 text-accent' : 'text-text hover:bg-surface-hover'}"
-    >
-      <span class="flex items-center gap-2">
-        <FolderTree size={16} />
-        자료실
-      </span>
-      <span class="flex items-center gap-1.5">
-        {#if libraryPending > 0}
-          <span
-            class="text-[10px] font-medium bg-warning/15 text-warning border border-warning/30 rounded px-1.5 py-0.5"
-            title="승인 대기 제안"
-          >
-            제안 {libraryPending}
-          </span>
-        {/if}
-        {#if categoryCounts.library > 0}
-          <span class="text-xs text-dim">{categoryCounts.library}</span>
-        {/if}
-      </span>
-    </a>
-
-    <a
-      href="/news"
-      class="flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors
-        {currentPath.startsWith('/news') ? 'bg-accent/15 text-accent' : 'text-text hover:bg-surface-hover'}"
-    >
-      <span class="flex items-center gap-2">
-        <Newspaper size={16} />
-        뉴스
-      </span>
-      {#if categoryCounts.news > 0}
-        <span class="text-xs text-dim">{categoryCounts.news}</span>
-      {/if}
-    </a>
-
-    <a
-      href="/memos"
-      class="flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors
-        {currentPath.startsWith('/memos') ? 'bg-accent/15 text-accent' : 'text-text hover:bg-surface-hover'}"
-    >
-      <span class="flex items-center gap-2">
-        <StickyNote size={16} />
-        메모
-      </span>
-      {#if categoryCounts.memo > 0}
-        <span class="text-xs text-dim">{categoryCounts.memo}</span>
-      {/if}
-    </a>
-
-    <a
-      href="/audio"
-      class="flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors
-        {currentPath.startsWith('/audio') ? 'bg-accent/15 text-accent' : 'text-text hover:bg-surface-hover'}"
-    >
-      <span class="flex items-center gap-2">
-        <Mic size={16} />
-        오디오
-      </span>
-      {#if categoryCounts.audio > 0}
-        <span class="text-xs text-dim">{categoryCounts.audio}</span>
-      {/if}
-    </a>
-
-    <a
-      href="/video"
-      class="flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors
-        {currentPath.startsWith('/video') ? 'bg-accent/15 text-accent' : 'text-text hover:bg-surface-hover'}"
-    >
-      <span class="flex items-center gap-2">
-        <Film size={16} />
-        비디오
-      </span>
-      {#if categoryCounts.video > 0}
-        <span class="text-xs text-dim">{categoryCounts.video}</span>
-      {/if}
-    </a>
-
-    <a
-      href="/ask"
-      class="flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors
-        {currentPath.startsWith('/ask') ? 'bg-accent/15 text-accent' : 'text-text hover:bg-surface-hover'}"
-    >
-      <span class="flex items-center gap-2">
-        <Search size={16} />
-        검색 · 질문
-      </span>
-    </a>
-  </nav>
-
-  <!-- 도메인 트리 (기존 /documents 필터 용) -->
-  <div class="px-4 pt-3 pb-1 border-t border-default">
-    <h3 class="text-[10px] font-semibold text-dim uppercase tracking-wider">도메인</h3>
-  </div>
-  <nav
-    class="px-2 py-1 flex-shrink-0 max-h-[40vh] overflow-y-auto"
-    onkeydown={handleTreeKeydown}
-  >
-    <button
-      onclick={() => navigateDomain(null)}
-      class="w-full flex items-center justify-between px-3 py-1.5 rounded-md text-sm transition-colors
-        {!activeDomain && currentPath === '/documents' ? 'bg-accent/15 text-accent' : 'text-dim hover:bg-surface hover:text-text'}"
-    >
-      <span>전체 도메인</span>
-      {#if treeTotal > 0}
-        <span class="text-xs">{treeTotal}</span>
+      {#if totalCount > 0}
+        <span class="text-xs text-dim">{totalCount}</span>
       {/if}
     </button>
+  </div>
 
-    {#if treeLoading}
-      {#each Array(3) as _}
-        <div class="h-7 bg-surface rounded-md animate-pulse mx-1 mb-1"></div>
+  <!-- 트리 -->
+  <nav class="flex-1 px-2 py-2" onkeydown={handleTreeKeydown}>
+    {#if loading}
+      {#each Array(5) as _}
+        <div class="h-8 bg-surface rounded-md animate-pulse mx-1 mb-1"></div>
       {/each}
     {:else}
       {#each tree as node}
@@ -298,10 +140,10 @@
             {/if}
 
             <button
-              onclick={() => navigateDomain(n.path)}
+              onclick={() => navigate(n.path)}
               data-tree-row
               aria-current={isActive ? 'page' : undefined}
-              class="flex-1 flex items-center justify-between px-2 py-1 rounded-md text-sm transition-colors
+              class="flex-1 flex items-center justify-between px-2 py-1.5 rounded-md text-sm transition-colors
                 {isActive ? 'bg-accent/15 text-accent' : isParent ? 'text-text' : 'text-dim hover:bg-surface hover:text-text'}"
             >
               <span class="flex items-center gap-2">
@@ -346,14 +188,30 @@
     >
       <Mail size={14} /> 이메일
     </button>
+    <a
+      href="/library"
+      class="w-full flex items-center gap-2 px-3 py-1.5 rounded-md text-sm transition-colors
+        {$page.url.pathname === '/library' ? 'bg-accent/15 text-accent' : 'text-dim hover:bg-surface hover:text-text'}"
+    >
+      <FolderTree size={14} /> 자료실
+    </a>
   </div>
 
-  <!-- Inbox -->
+  <!-- 메모 & Inbox -->
   <div class="px-2 py-2 border-t border-default">
     <a
-      href="/inbox"
+      href="/memos"
       class="flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors
-        {currentPath.startsWith('/inbox') ? 'bg-accent/15 text-accent' : 'text-text hover:bg-surface'}"
+        {$page.url.pathname === '/memos' ? 'bg-accent/15 text-accent' : 'text-text hover:bg-surface'}"
+    >
+      <span class="flex items-center gap-2">
+        <StickyNote size={16} />
+        메모
+      </span>
+    </a>
+    <a
+      href="/inbox"
+      class="flex items-center justify-between px-3 py-2 rounded-md text-sm text-text hover:bg-surface transition-colors"
     >
       <span class="flex items-center gap-2">
         <Inbox size={16} />
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 3e10a87..06baaaf 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -88,6 +88,10 @@
           <a href="/documents" class="text-xs hover:text-accent {isActive('/documents') ? 'text-accent' : ''}">문서</a>
           <span class="text-faint text-xs">·</span>
           <a href="/library" class="text-xs hover:text-accent {isActive('/library') ? 'text-accent' : ''}">자료실</a>
+          <span class="text-faint text-xs">·</span>
+          <a href="/audio" class="text-xs hover:text-accent {isActive('/audio') ? 'text-accent' : ''}">오디오</a>
+          <span class="text-faint text-xs">·</span>
+          <a href="/video" class="text-xs hover:text-accent {isActive('/video') ? 'text-accent' : ''}">비디오</a>
           <SystemStatusDot />
         </div>
         <div class="flex items-center gap-1">