id: 'standard-header'
status: ready
Standard Header
Reference
- URL: https://biodance.com/
- 위치: 전 페이지 공통 글로벌 헤더
- 구조: announcement bar + 로고 + 리소스 기반 네비게이션 + account/search/cart + 모바일 drawer
- 기준 컴포넌트:
makitt-client/apps/makitt-standard-commerce/src/components/assets/mega-header/mega-header.tsx
React Component
- Path:
apps/makitt-standard-commerce/src/components/assets/standard-header/
- Status: implemented (
MegaHeader 재사용)
- 반응형: Desktop mega dropdown / Mobile modal drawer + accordion
- i18n: React 기준 ko, en, ja 지원, HCS 로컬 에셋은 구조/바인딩 중심
HCS JSON Asset
- Path:
apps/builder/data/hcs-asset/standard-header.json
- Status: created
- Resource 바인딩:
menu.byKey → menu (기본 key: header-nav)auth.me → customercart.cart → cart
- Responsive:
- 데스크톱: 반복 기반 nav + dropdown-content mega panel
- 모바일:
openModal / closeModal 기반 drawer + accordion 메뉴
Prerequisites
makitt-server (shop-api)
고객 대면 API. shop storefront에서 호출.
| API | Method | Endpoint | Status |
|---|
| 메뉴 리소스 목록 | GET | /shop/{shopId}/menu-resources | available |
| 메뉴 리소스 단건 조회 | GET | /shop/{shopId}/menu-resources/by-key/{key} | available |
| 현재 고객 정보 | GET | /shop/{shopId}/auth/me | available |
| 장바구니 조회 | GET | /shop/{shopId}/cart | available |
makitt-server (admin-api)
셀러 어드민에서 메뉴를 관리하기 위한 API.
| API | Method | Endpoint | Status |
|---|
| 메뉴 리소스 목록 조회 | GET | /api/v1/shops/{shopId}/menu-resources | available |
| 메뉴 리소스 상세 조회 | GET | /api/v1/shops/{shopId}/menu-resources/{menuResourceId} | available |
| 메뉴 리소스 생성 | POST | /api/v1/shops/{shopId}/menu-resources | available |
| 메뉴 리소스 수정 | PUT | /api/v1/shops/{shopId}/menu-resources/{menuResourceId} | available |
| 메뉴 리소스 삭제 | DELETE | /api/v1/shops/{shopId}/menu-resources/{menuResourceId} | available |
makitt-server (도메인/모델링)
| 항목 | 내용 | Status |
|---|
| DynamoDB Entity | MenuResource / MenuItem | available |
| Domain Service | MenuResourceService | available |
| Translation Strategy | MenuResourceTranslationStrategy | available |
| Application | MenuResourceApplication | available |
makitt-web (셀러 어드민 UI)
| 기능 | 설명 | Status |
|---|
| 메뉴 리소스 CRUD | 헤더/푸터 메뉴 트리 편집 | available |
| market별 타겟 설정 | 메뉴 타겟 마켓 지정 | available |
@makitt/api (리소스 레지스트리)
| 항목 | 설명 | Status |
|---|
menu.byKey resource | /menu-resources/by-key/{key} fetcher + schema | available |
menu.menus resource | /menu-resources fetcher + schema | available |
auth.me resource | 고객 상태 바인딩 | available |
cart.cart resource | 장바구니 badge 바인딩 | available |
makitt-shop (HCS 렌더링)
| 항목 | 설명 | Status |
|---|
header renderer | 루트 헤더 컨테이너 | available |
dropdown* renderer | 데스크톱 메가 메뉴 | available |
modal / backdrop / modal-content | 모바일 drawer | available |
accordion* renderer | 모바일 계층형 메뉴 | available |
openModal / closeModal action | drawer 토글 | available |
HCS Conversion Notes
- root
header에 menu.byKey 리소스를 배치해 데스크톱/모바일이 동일한 메뉴 데이터를 공유한다.
- 데스크톱은
menu.items repeat + dropdown으로 top-level item을 렌더링한다.
- children가 있는 메뉴는 2컬럼 그룹 + promo panel 구조로 변환한다.
auth.me는 account label, cart.cart는 cart badge 및 모바일 bag CTA에 바인딩한다.- 모바일은 별도
modal tree를 두고 accordion으로 2-depth/3-depth 메뉴를 표현한다.
- search/account/cart는 링크 처리만 사용해서 renderer 추가 수정 없이 동작한다.