header 작업리스트 md
This commit is contained in:
mota
@@ -1,2 +1,36 @@
|
||||
1. /public/logo.png 로고 넣기
|
||||
2.
|
||||
### 헤더 네비 작업 체크리스트 (순서)
|
||||
|
||||
1) 레퍼런스 분석
|
||||
- [ ] ref/headerref01.html 구조/스타일 패턴 분석 (접근성/반응형 확인)
|
||||
|
||||
2) 기본 골격/리소스 준비
|
||||
- [ ] 로고 파일 경로 확인(`/public/logo.png`) 및 Next Image 적용 여부 결정
|
||||
- [ ] 헤더 컨테이너/레이아웃 골격 생성(`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) 문서/정리
|
||||
- [ ] 헤더 네비 구조/데이터 의존성/확장 포인트 간단 문서화
|
||||
326
.cursor/ref/headerref01.html
Normal file
326
.cursor/ref/headerref01.html
Normal file
@@ -0,0 +1,326 @@
|
||||
<nav class="gnb_wrap" style="height: auto;">
|
||||
<div class="inner">
|
||||
<div class="order_1">
|
||||
<button class="toggle_button"><span></span><span></span><span></span></button>
|
||||
<div class="logo">
|
||||
<a style="cursor:pointer" onclick="mmCommon.goMain()"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order_2">
|
||||
<div class="menu_list">
|
||||
<div class="top">
|
||||
<div class="logo">
|
||||
<a style="cursor:pointer" onclick="mmCommon.goMain()"></a>
|
||||
</div>
|
||||
<button class="close_button" onclick="modal.close(this)"></button>
|
||||
</div>
|
||||
<ul class="outer">
|
||||
|
||||
<li>
|
||||
<a href="/News/Notice" class=" ">에린 소식</a>
|
||||
<ul>
|
||||
<li>
|
||||
|
||||
<a href="/News/Notice" target="_self" class=" ">
|
||||
공지사항
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/News/Events?headlineId=2501" target="_self" class=" ">
|
||||
이벤트
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/News/Update" target="_self" class=" ">
|
||||
업데이트
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/News/Devnote" target="_self" class=" ">
|
||||
에린 노트
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/News/Improvement" target="_self" class=" ">
|
||||
확인 중인 현상
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="http://notice.nexon.com/Notice/NoticeList" target="_blank" class=" outlink ">
|
||||
넥슨 통합 공지
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/Info/Story" class=" ">게임 소개</a>
|
||||
<ul>
|
||||
<li>
|
||||
|
||||
<a href="/Info/Story" target="_self" class=" ">
|
||||
에린 이야기
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Info/World" target="_self" class=" ">
|
||||
에린의 지역
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Info/Character" target="_self" class=" ">
|
||||
주요 인물
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Info/Class" target="_self" class=" ">
|
||||
클래스 소개
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Info/Contents" target="_self" class=" ">
|
||||
콘텐츠 소개
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Info/Guide" target="_self" class=" ">
|
||||
에린 가이드
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/Community/Free" class=" new">커뮤니티</a>
|
||||
<ul>
|
||||
<li>
|
||||
|
||||
<a href="/Community/Free" target="_self" class=" new">
|
||||
자유 게시판
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Community/Class" target="_self" class=" new">
|
||||
클래스 게시판
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Community/Tip" target="_self" class=" new">
|
||||
공략 게시판
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Community/QnA" target="_self" class=" new">
|
||||
질문과 답변
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Community/Friends" target="_self" class=" new">
|
||||
친구 모집
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Community/Guild" target="_self" class=" new">
|
||||
길드 모집
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Community/Art" target="_self" class=" new">
|
||||
2차 창작
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/Ranking/List?t=4" class=" ">랭킹</a>
|
||||
<ul>
|
||||
<li>
|
||||
|
||||
<a href="/Ranking/List?t=4" target="_self" class=" ">
|
||||
종합 랭킹
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Ranking/List?t=1" target="_self" class=" ">
|
||||
전투력 랭킹
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Ranking/List?t=2" target="_self" class=" ">
|
||||
매력 랭킹
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Ranking/List?t=3" target="_self" class=" ">
|
||||
생활력 랭킹
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/Media/Video" class=" ">미디어</a>
|
||||
<ul>
|
||||
<li>
|
||||
|
||||
<a href="/Media/Video" target="_self" class=" ">
|
||||
영상
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Media/Image" target="_self" class=" ">
|
||||
이미지
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Media/SoundTrack" target="_self" class=" ">
|
||||
음악
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Media/DigitalGoods" target="_self" class=" ">
|
||||
굿즈
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/Creators/Info" class=" ">크리에이터즈</a>
|
||||
<ul>
|
||||
<li>
|
||||
|
||||
<a href="/Creators/Info" target="_self" class=" ">
|
||||
캠페인 소개
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Creators/Notice" target="_self" class=" ">
|
||||
크리에이터즈 공지
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="https://creators.nexon.com/kr/campaign?dead=INCLUDE_DEAD&serviceIds=76" target="_blank"
|
||||
class=" outlink ">
|
||||
크리에이터즈 캠페인
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/Support/FAQ" class=" ">고객지원</a>
|
||||
<ul>
|
||||
<li>
|
||||
|
||||
<a href="/Support/FAQ" target="_self" class=" ">
|
||||
FAQ
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Support/Report/Main" target="_self" class=" ">
|
||||
건의 및 제보
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Support/DownLoad" target="_self" class=" ">
|
||||
다운로드
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="https://mcoupon.nexon.com/mabinogimobile/" target="_blank" class=" outlink ">
|
||||
쿠폰
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="/Support/Policy" target="_self" class=" ">
|
||||
운영정책
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="https://now.nexon.com/service/mabinogimobile" target="_blank" class=" outlink ">
|
||||
확률형 아이템
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="store_menu">
|
||||
<a href="https://app.adjust.com/1m2v8bfd?redirect=https%3A%2F%2Fapps.apple.com%2Fkr%2Fapp%2Fid1441742921"
|
||||
target="_blank" onclick="mmCommon.allSendClickLog(this);" data-object="Home_PC_iosDownload"
|
||||
data-gtagecategory="HomePC" data-gtagaction="앱스토어" data-kakaopixel="true"></a>
|
||||
<a href="https://app.adjust.com/1m2v8bfd?redirect=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.nexon.devcat.mm"
|
||||
target="_blank" onclick="mmCommon.allSendClickLog(this);" data-object="Home_PC_aosDownload"
|
||||
data-gtagecategory="HomePC" data-gtagaction="구글플레이" data-kakaopixel="true"></a>
|
||||
<a href="/Support/DownLoad" onclick="mmCommon.allSendClickLog(this);" data-object="Home_PC_download"
|
||||
data-gtagecategory="HomePC" data-gtagaction="PC다운로드"></a>
|
||||
</div>
|
||||
<div class="sns_icon_menu">
|
||||
<a href="https://www.youtube.com/@mabinogimobile_official" target="_blank" class="youtube"
|
||||
onclick="mmCommon.allSendClickLog(this);" data-object="Home_PC_youtube" data-gtagecategory="HomePC"
|
||||
data-gtagaction="유튜브"></a>
|
||||
|
||||
<a href="http://pf.kakao.com/_xdExmCn" target="_blank" class="kakaochannel"
|
||||
onclick="mmCommon.allSendClickLog(this);" data-object="Home_PC_kakaoPRE" data-gtagecategory="HomePC"
|
||||
data-gtagaction="카카오사전"></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="sub_icon_menu">
|
||||
<a href="#" onclick="mmCommon.login();mmCommon.gtagSendClickLog(this, '공홈_공통_개인화_바로가기', 'website_revamp');"
|
||||
style="cursor:pointer" class="my"></a>
|
||||
<a href="/Search" onclick="mmCommon.gtagSendClickLog(this,'공홈_공통_통합검색_바로가기', 'website_revamp')"
|
||||
class="search"></a>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="game_start_button" style="display: block;">
|
||||
<button onclick="mmCommon.gamestart();">game start</button>
|
||||
<div class="background_video">
|
||||
<video autoplay="" muted="" playsinline="" id="hover_video" style="display: none;">
|
||||
<source
|
||||
src="https://mabinogimobile-vod.dn.nexoncdn.co.kr/brand/main/gamestart_button_hover_B1399747C11D30A0.mp4"
|
||||
type="video/mp4">
|
||||
</video>
|
||||
<video autoplay="" muted="" loop="" playsinline="" id="default_video" style="display: block;">
|
||||
<source src="https://mabinogimobile-vod.dn.nexoncdn.co.kr/brand/main/gamestart_button_B1399747C11D30A0.mp4"
|
||||
type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
Reference in New Issue
Block a user