36 lines
1.6 KiB
Markdown
36 lines
1.6 KiB
Markdown
### 헤더 네비 작업 체크리스트 (순서)
|
|
|
|
1) 레퍼런스 분석
|
|
- [x] ref/headerref01.html 구조/스타일 패턴 분석 (접근성/반응형 확인)
|
|
|
|
2) 기본 골격/리소스 준비
|
|
- [x] 로고 파일 경로 확인(`/public/logo.png`) 및 Next Image 적용 여부 결정
|
|
- [x] 헤더 컨테이너/레이아웃 골격 생성(`src/app/components/AppHeader.tsx` 확장)
|
|
|
|
3) 데이터 연동 설계
|
|
- [ ] 대분류 소스 결정: `GET /api/boards?category=...` 또는 카테고리 전용 API 사용
|
|
- [ ] 소분류(보드) 매핑 규칙 정의(현재 시드 트리 기준)
|
|
|
|
4) 대분류 네비 구현
|
|
- [ ] 상단에 대분류 탭 렌더링(정렬/활성 상태 반영)
|
|
- [ ] hover 시 소분류 드롭다운 표시(키보드 포커스 접근성 포함)
|
|
- [ ] 현재 페이지 경로와 활성 대분류 동기화
|
|
|
|
5) 소분류(보드) 드롭다운 구현
|
|
- [ ] 소분류 리스트 렌더링(이름/slug 링크)
|
|
- [ ] 보드 타입/승인필요 등 뱃지 표기 여부 결정 및 적용
|
|
|
|
6) 검색창 구현
|
|
- [ ] 헤더 검색 입력 UI 추가(placeholder, 키보드 액션)
|
|
- [ ] 검색 엔드포인트/페이지 연동(`src/app/search/page.tsx`)
|
|
|
|
7) 스타일/반응형/테마
|
|
- [ ] 모바일 메뉴 토글(햄버거) 및 접근성 속성(aria-* ) 적용
|
|
- [ ] 라이트/다크 모드 색상 대응
|
|
|
|
8) 연동/테스트
|
|
- [ ] API 호출 캐시/키 구성(`src/lib/queryKeys.ts`) 및 훅 사용
|
|
- [ ] 주요 플로우 스모크 테스트(대분류 hover, 소분류 클릭, 검색)
|
|
|
|
9) 문서/정리
|
|
- [ ] 헤더 네비 구조/데이터 의존성/확장 포인트 간단 문서화 |