From 449fdbc320a0b5d89b4c5cc39eef0a0254b71978 Mon Sep 17 00:00:00 2001
From: mota <koeracomp5@gmail.com>
Date: Mon, 13 Oct 2025 08:13:53 +0900
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=ED=97=A4=EB=8D=94=20=EB=8C=80?=
 =?UTF-8?q?=EB=B6=84=EB=A5=98/=EC=86=8C=EB=B6=84=EB=A5=98=20=EB=A0=8C?=
 =?UTF-8?q?=EB=8D=94=EB=A7=81=20=EB=B0=8F=20hover=20=EB=93=9C=EB=A1=AD?=
 =?UTF-8?q?=EB=8B=A4=EC=9A=B4=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

docs(todo): 헤더 네비 4.1, 4.2, 5.1 완료 표시
---
 .cursor/.prompt/header_navigation작업.md |  6 +++---
 src/app/components/AppHeader.tsx         | 27 ++++++++++++++++++++++--
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/.cursor/.prompt/header_navigation작업.md b/.cursor/.prompt/header_navigation작업.md
index 32f4471..6843f25 100644
--- a/.cursor/.prompt/header_navigation작업.md
+++ b/.cursor/.prompt/header_navigation작업.md
@@ -12,12 +12,12 @@
 - [x] 소분류(보드) 매핑 규칙 정의(현재 시드 트리 기준)
 
 4) 대분류 네비 구현
-- [ ] 상단에 대분류 탭 렌더링(정렬/활성 상태 반영)
-- [ ] hover 시 소분류 드롭다운 표시(키보드 포커스 접근성 포함)
+- [x] 상단에 대분류 탭 렌더링(정렬/활성 상태 반영)
+- [x] hover 시 소분류 드롭다운 표시(키보드 포커스 접근성 포함)
 - [ ] 현재 페이지 경로와 활성 대분류 동기화
 
 5) 소분류(보드) 드롭다운 구현
-- [ ] 소분류 리스트 렌더링(이름/slug 링크)
+- [x] 소분류 리스트 렌더링(이름/slug 링크)
 - [ ] 보드 타입/승인필요 등 뱃지 표기 여부 결정 및 적용
 
 6) 검색창 구현
diff --git a/src/app/components/AppHeader.tsx b/src/app/components/AppHeader.tsx
index bb95a49..3246c2b 100644
--- a/src/app/components/AppHeader.tsx
+++ b/src/app/components/AppHeader.tsx
@@ -9,12 +9,18 @@ import React from "react";
 
 export function AppHeader() {
   const [user, setUser] = React.useState<{ nickname: string } | null>(null);
+  const [categories, setCategories] = React.useState<Array<{ id: string; name: string; slug: string; boards: Array<{ id: string; name: string; slug: string }> }>>([]);
+  const [openSlug, setOpenSlug] = React.useState<string | null>(null);
   // 헤더 마운트 시 세션 존재 여부를 조회해 로그인/로그아웃 UI를 제어합니다.
   React.useEffect(() => {
     fetch("/api/auth/session")
       .then((r) => r.json())
       .then((d) => setUser(d?.ok ? d.user : null))
       .catch(() => setUser(null));
+    fetch("/api/categories", { cache: "no-store" })
+      .then((r) => r.json())
+      .then((d) => setCategories(d?.categories || []))
+      .catch(() => setCategories([]));
   }, []);
   const onLogout = async () => {
     await fetch("/api/auth/session", { method: "DELETE" });
@@ -29,8 +35,25 @@ export function AppHeader() {
         </Link>
       </div>
       <nav style={{ display: "flex", gap: 12, alignItems: "center" }}>
-        {/* 대분류/소분류 네비는 이후 단계에서 데이터 연동 포함 확장 */}
-        <Link href="/boards">게시판</Link>
+        {categories.map((cat) => (
+          <div
+            key={cat.id}
+            onMouseEnter={() => setOpenSlug(cat.slug)}
+            onMouseLeave={() => setOpenSlug((s) => (s === cat.slug ? null : s))}
+            style={{ position: "relative" }}
+          >
+            <Link href={`/boards?category=${cat.slug}`}>{cat.name}</Link>
+            {openSlug === cat.slug && (
+              <div style={{ position: "absolute", top: "100%", left: 0, background: "white", border: "1px solid #eee", padding: 8, minWidth: 200, zIndex: 50 }}>
+                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+                  {cat.boards.map((b) => (
+                    <Link key={b.id} href={`/boards/${b.id}`}>{b.name}</Link>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
         <SearchBar />
         <ThemeToggle />
         {user ? (