fix(ui): 카테고리 내비 상단 이동 + uvicorn proxy-headers

- +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>
This commit is contained in:
Hyungi Ahn
2026-04-24 07:28:04 +09:00
parent a8e24ab114
commit 5cf7952b33
3 changed files with 50 additions and 188 deletions
+1 -1
View File
@@ -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", "*"]
+45 -187
View File
@@ -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} />
+4
View File
@@ -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">