[YETI] 헤더 메가메뉴

화면 정보

Screen ID	Screen Title	진입 조건
NAV-MEGA-01	헤더 메가메뉴 드롭다운	헤더 카테고리 탭 호버

개요

헤더 하단에 어드민 YETI 카테고리 관리에서 등록된 카테고리명이 등록 순서대로 탭으로 나열된다. 각 탭을 호버하면 메가메뉴 드롭다운이 열리고, 탭을 클릭하면 해당 카테고리 전체 상품 페이지로 이동한다.

각 L1 카테고리별 메가메뉴 노출 항목(서브카테고리·필터·추천 컬렉션)의 상세 정의는
메가메뉴 카테고리별 노출 항목 참고.

헤더 우측 고정 영역

카테고리 탭 우측에 항상 표시되는 고정 요소.

┌──────────────────────────────────────────────────────────────────────┐
│  Drinkware  Coolers  Bags  …    [검색어를 입력하세요]  🛒  👤        │
└──────────────────────────────────────────────────────────────────────┘

요소	동작
검색창 (`검색어를 입력하세요`)	클릭/입력 시 검색 오버레이 열림 — 검색 오버레이 참고
장바구니 아이콘 🛒	클릭 시 장바구니 사이드패널 열림 (수량 배지 표시) — 장바구니 사이드패널 참고
프로필 아이콘 👤	비로그인 → 로그인 페이지 이동 / 로그인 → 마이페이지 드롭다운

카테고리 탭 인터랙션

액션	동작
탭 호버	메가메뉴 드롭다운 열림 + 배경 오버레이(어둡게)
탭 클릭	해당 카테고리 전체 상품 페이지로 이동 (= 메뉴 내 “전체 상품” 링크와 동일)
메뉴 외부 클릭 / 탭 이탈	메가메뉴 닫힘, 오버레이 해제

onOff=OFF로 설정된 카테고리는 헤더 탭 및 메가메뉴에 미노출.

Oracle Red Bull Racing 예외: 본사(HQ)는 Fanshop 카테고리로 메가메뉴를 구성하지만, YETI KR은 취급 상품이 1개뿐이라 메가메뉴 드롭다운 없이 헤더의 단순 메뉴 링크로 노출한다. 호버 시 드롭다운이 열리지 않고, 클릭 시 해당 상품 PDP(또는 단일 상품 목록 페이지)로 바로 이동.

메가메뉴 드롭다운 구성

레이아웃

┌─────────────────────────────────────────────────────────────────┐
│  전체 상품                                                       │
│                                                                 │
│  [서브카테고리]          [필터그룹A]    [필터그룹B]  [필터그룹C] │
│  Cold Cups              Mugs           12oz         White       │
│  Bottles                Tumblers       20oz         Black       │
│  Jugs                   Pitchers       30oz         Blue        │
│  …                      …              …            …           │
│                                                                 │
│  추천 컬렉션                                                     │
│  [컬렉션 A]  [컬렉션 B]  [컬렉션 C]                             │
│                                               ┌───────────────┐ │
│                                               │ [이미지 배너] │ │
│                                               │ (클릭→URL)   │ │
│                                               └───────────────┘ │
└─────────────────────────────────────────────────────────────────┘

전체 상품

메뉴 최상단에 “전체 상품” 고정 노출
클릭 시 해당 카테고리 탭 클릭과 동일한 전체 상품 페이지로 이동

서브카테고리

항목	내용
데이터 출처	어드민 YETI 카테고리 관리 > 서브카테고리
표시 순서	어드민 등록 순서
클릭 시	해당 서브카테고리 상품 목록 페이지로 이동

필터 리스트

항목	내용
데이터 출처	코드 내 카테고리별 설정 파일로 관리 (어드민 연동 아님)
섹션 타이틀	설정 파일에 정의된 필터 그룹명 표시
클릭 시	해당 필터가 적용된 상품 목록 페이지로 이동

메가메뉴에 노출할 필터 그룹과 필터 값은 카테고리별로 코드에서 직접 관리한다. 추후 어드민 연동으로 전환 가능하도록 구조만 열어둔다.

카테고리별 실제 필터 항목 목록 → 메가메뉴 카테고리별 노출 항목

항목	내용
데이터 출처	Strapi (우측 이미지 배너와 동일 소스)
표시 방식	Strapi에 등록된 컬렉션 항목 가로 나열
클릭 시	해당 컬렉션 페이지로 이동

우측 이미지 배너

Strapi SOPH FEATURED 컴포넌트(categoryComponent) 활용. mainCategoryId로 해당 카테고리에 배너를 매핑한다.

필드	사용 여부	설명
url	✅	이미지 클릭 시 이동할 URL
categoryName	❌	미사용
colorCode	❌	미사용
onOff	✅	배너 노출 여부 (`OFF`이면 배너 영역 미노출)
PC 이미지	✅	PC에서 표시할 이미지
모바일 이미지	✅	모바일에서 표시할 이미지

프론트에서 PC/모바일 이미지 중 환경에 맞게 1개만 표시

데이터 소스 정리

메뉴 구성 요소	데이터 출처
헤더 카테고리 탭 목록	어드민 YETI 카테고리 관리 (순서 포함)
서브카테고리	어드민 서브카테고리 관리
필터 리스트	코드 내 카테고리별 설정 파일
추천 컬렉션	Strapi
우측 이미지 배너	Strapi SOPH FEATURED (`categoryComponent`)

모바일

모바일에서는 메가메뉴 대신 햄버거 버튼을 통해 전체 화면을 가리는 드로어 메뉴로 표시된다.

항목	내용
진입	햄버거 아이콘 탭 → 전체 화면 드로어 열림
필터 리스트	드롭다운 형태로 펼쳐짐
추천 컬렉션	드롭다운 형태로 펼쳐짐
상세 레이아웃	피그마 참고

범위 밖 (Out of Scope)

헤더 카테고리 탭 외 GNB 영역 (로고, 검색, 장바구니 등) — 글로벌 네비게이션 참고
필터 그룹 구성 및 필터 값 관리 (기존 카테고리 필터 설정 그대로 활용)

합격 기준

변경 이력

버전	날짜	변경 내용
v1.3	2026-07-28	추천 컬렉션 데이터 출처 어드민 특집 GROUP → Strapi로 변경. Oracle Red Bull Racing 예외 처리 명시 — 드롭다운 없는 단순 메뉴 링크로 노출
v1.2	2026-07-23	카테고리별 노출 항목 정의를 mega-menu-categories 별도 문서로 분리, 개요 및 필터 리스트 섹션에 링크 연결
v1.1	2026-07-09	헤더 우측 고정 영역 추가 — 검색창, 장바구니 아이콘, 프로필 아이콘
v1.0	2026-07-09	최초 작성 — 카테고리 탭 인터랙션, 메가메뉴 구성(서브카테고리·필터·추천컬렉션·이미지배너), Strapi 배너 필드 정의