From 2c50aecd2b59ea1496af1a90aaebffaffbb41c95 Mon Sep 17 00:00:00 2001
From: mota <koeracomp5@gmail.com>
Date: Mon, 13 Oct 2025 08:01:24 +0900
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=ED=97=A4=EB=8D=94=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B3=A0=20=EB=B0=8F=20=EA=B8=B0=EB=B3=B8=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EA=B3=A8=EA=B2=A9=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

docs(todo): 헤더 네비 작업 1~2번 완료 표시
---
 .cursor/.prompt/header_navigation작업.md |  6 +++---
 src/app/components/AppHeader.tsx         | 16 +++++++++++-----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/.cursor/.prompt/header_navigation작업.md b/.cursor/.prompt/header_navigation작업.md
index 592be7d..c1e1205 100644
--- a/.cursor/.prompt/header_navigation작업.md
+++ b/.cursor/.prompt/header_navigation작업.md
@@ -1,11 +1,11 @@
 ### 헤더 네비 작업 체크리스트 (순서)
 
 1) 레퍼런스 분석
-- [ ] ref/headerref01.html 구조/스타일 패턴 분석 (접근성/반응형 확인)
+- [x] ref/headerref01.html 구조/스타일 패턴 분석 (접근성/반응형 확인)
 
 2) 기본 골격/리소스 준비
-- [ ] 로고 파일 경로 확인(`/public/logo.png`) 및 Next Image 적용 여부 결정
-- [ ] 헤더 컨테이너/레이아웃 골격 생성(`src/app/components/AppHeader.tsx` 확장)
+- [x] 로고 파일 경로 확인(`/public/logo.png`) 및 Next Image 적용 여부 결정
+- [x] 헤더 컨테이너/레이아웃 골격 생성(`src/app/components/AppHeader.tsx` 확장)
 
 3) 데이터 연동 설계
 - [ ] 대분류 소스 결정: `GET /api/boards?category=...` 또는 카테고리 전용 API 사용
diff --git a/src/app/components/AppHeader.tsx b/src/app/components/AppHeader.tsx
index 99c686f..bb95a49 100644
--- a/src/app/components/AppHeader.tsx
+++ b/src/app/components/AppHeader.tsx
@@ -1,5 +1,7 @@
 "use client";
 // 클라이언트 훅(useState/useEffect)을 사용하여 세션 표시/로그아웃을 처리합니다.
+import Image from "next/image";
+import Link from "next/link";
 import { ThemeToggle } from "@/app/components/ThemeToggle";
 import { SearchBar } from "@/app/components/SearchBar";
 import { Button } from "@/app/components/ui/Button";
@@ -20,11 +22,15 @@ export function AppHeader() {
     location.reload();
   };
   return (
-    <header style={{ display: "flex", justifyContent: "space-between", padding: 12 }}>
-      <div>msg App</div>
+    <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: 12 }}>
+      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+        <Link href="/" aria-label="홈">
+          <Image src="/logo.png" alt="logo" width={120} height={28} priority />
+        </Link>
+      </div>
       <nav style={{ display: "flex", gap: 12, alignItems: "center" }}>
-        <a href="/">홈</a>
-        <a href="/boards">게시판</a>
+        {/* 대분류/소분류 네비는 이후 단계에서 데이터 연동 포함 확장 */}
+        <Link href="/boards">게시판</Link>
         <SearchBar />
         <ThemeToggle />
         {user ? (
@@ -33,7 +39,7 @@ export function AppHeader() {
             <Button variant="ghost" onClick={onLogout}>로그아웃</Button>
           </div>
         ) : (
-          <a href="/login">로그인</a>
+          <Link href="/login">로그인</Link>
         )}
       </nav>
     </header>