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