### 헤더 네비 작업 체크리스트 (순서)

1) 레퍼런스 분석
- [x] ref/headerref01.html 구조/스타일 패턴 분석 (접근성/반응형 확인)

2) 기본 골격/리소스 준비
- [x] 로고 파일 경로 확인(`/public/logo.png`) 및 Next Image 적용 여부 결정
- [x] 헤더 컨테이너/레이아웃 골격 생성(`src/app/components/AppHeader.tsx` 확장)

3) 데이터 연동 설계
- [x] 대분류 소스 결정: `GET /api/categories` 사용(대분류+소분류 동시 제공)
- [x] 소분류(보드) 매핑 규칙 정의(현재 시드 트리 기준)

4) 대분류 네비 구현
- [x] 상단에 대분류 탭 렌더링(정렬/활성 상태 반영)
- [x] hover 시 소분류 드롭다운 표시(키보드 포커스 접근성 포함)
- [ ] 현재 페이지 경로와 활성 대분류 동기화

5) 소분류(보드) 드롭다운 구현
- [x] 소분류 리스트 렌더링(이름/slug 링크)
- [ ] 보드 타입/승인필요 등 뱃지 표기 여부 결정 및 적용

6) 검색창 구현
- [x] 헤더 검색 입력 UI 추가(placeholder, 키보드 액션)
- [x] 검색 엔드포인트/페이지 연동(`src/app/search/page.tsx`)

7) 스타일/반응형/테마
- [ ] 모바일 메뉴 토글(햄버거) 및 접근성 속성(aria-* ) 적용
- [ ] 라이트/다크 모드 색상 대응

8) 연동/테스트
- [ ] API 호출 캐시/키 구성(`src/lib/queryKeys.ts`) 및 훅 사용
- [ ] 주요 플로우 스모크 테스트(대분류 hover, 소분류 클릭, 검색)

9) 문서/정리
- [ ] 헤더 네비 구조/데이터 의존성/확장 포인트 간단 문서화