id: 'hero-banner'
status: in-progress
Hero Banner
Reference
- URL: https://biodance.com/
- 위치: 홈 상단 메인 hero carousel
- 구조: 풀블리드 배경 이미지 + 좌측 카피 + CTA + 양 끝 화살표 + 우하단 라인형 페이지네이션
- 참고 구현:
apps/builder/data/templates/medium-blog/shop.json 의 hero/product carousel 패턴
React Component
- Path:
apps/makitt-standard-commerce/src/components/assets/hero-banner/
- Status: implemented
- 반응형: 데스크톱 풀높이 hero, 모바일은 낮은 높이로 축소하며 카피 폭을 100%로 확장
- i18n: 서버 배너 데이터 기준
Prerequisites
makitt-server (shop-api)
고객 대면 API. shop storefront에서 호출.
| API | Method | Endpoint | Status |
|---|
| Banner group detail | GET | /shop/{shopId}/banners/{bannerId} | available |
makitt-server (admin-api)
셀러 어드민에서 이 기능의 데이터를 관리하기 위한 API.
| API | Method | Endpoint | Status |
|---|
| Banner group detail | GET | /api/v1/banner-groups/{bannerGroupId} | available |
| Banner group create | POST | /api/v1/banner-groups | available |
| Banner group update | PUT | /api/v1/banner-groups/{bannerGroupId} | available |
| Banner group delete | DELETE | /api/v1/banner-groups/{bannerGroupId} | available |
| Banner group search | POST | /api/v1/banner-groups/search | available |
makitt-server (도메인/모델링)
| 항목 | 내용 | Status |
|---|
| DynamoDB Entity | BannerGroup 단일 엔티티 + slide/text/cta VO 포함 | available |
| OpenSearch Index | banner-groups | available |
| Domain Service | BannerGroupService, BannerGroupSearchService | available |
| Application | BannerGroupApplication | available |
makitt-web (셀러 어드민 UI)
| 기능 | 설명 | Status |
|---|
| Banner list page | /home/content/banners 목록/검색/선택 | available |
| Banner create modal | 새 배너 그룹 생성 | available |
| Banner detail modal | 슬라이드/텍스트/CTA 수정 | available |
makitt-shop (HCS 렌더링)
| 항목 | 설명 | Status |
|---|
section renderer | 루트 히어로 섹션 | available |
carousel renderer | 슬라이드 전환 및 autoplay | available |
carousel-content / carousel-item renderer | 슬라이드 구조 | available |
image renderer | 배경 이미지 | available |
heading / text / link renderer | 카피/CTA | available |
setState action | 화살표/페이지네이션 상태 제어 | available |
banner.banner resource | 배너 그룹 fetch + HCS 친화 정규화 | available |
HCS Conversion Notes
@makitt/api에 banner.banner 리소스를 추가해 HCS에서 직접 배너 그룹을 바인딩하도록 구성- 리소스 fetch 단계에서
textLayers / ctas를 eyebrow, title, description, cta 구조로 정규화
medium-blog carousel의 page, pageChange, repeat, selected 패턴을 그대로 차용- 현재 디자인 요구사항에 맞춰 CTA는 sharp rectangle, 화살표는 양 끝 중앙, 페이지네이션은 우하단 라인형으로 구현