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:
+1
-1
@@ -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", "*"]
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user