feat(ui): 헤더 대분류/소분류 렌더링 및 hover 드롭다운 구현

docs(todo): 헤더 네비 4.1, 4.2, 5.1 완료 표시

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 ? (