id: 'hero-image-overlay'
status: ready
Hero Image Overlay
Reference
- URL: https://kyliecosmetics.com/
- 위치: 메인 페이지 첫 번째 섹션 (above the fold)
- 구조: 풀스크린(100vh) 배경 이미지 + 좌측 정렬 텍스트 오버레이(제목 + 설명 + CTA 버튼)
- 패턴: Swiper 기반 슬라이더, 데스크톱/모바일 별도 텍스트 색상
React Component
- Path:
apps/makitt-standard-commerce/src/components/assets/hero-image-overlay/
- Status: implemented
- 반응형: 데스크톱(흰색 텍스트, 34px 제목) / 모바일(다크 텍스트, 28px 제목, 패딩 축소)
- i18n: ko, en, ja
- Props:
slides, fullHeight, minHeight
Prerequisites
makitt-server (shop-api)
고객 대면 API. shop storefront에서 호출.
| API | Method | Endpoint | Status |
|---|
| Get Banner | GET | /shop/{shopId}/banners/{bannerGroupId} | available |
makitt-server (admin-api)
셀러 어드민에서 배너를 관리하기 위한 API.
| API | Method | Endpoint | Status |
|---|
| Create Banner Group | POST | /api/v1/banner-groups | available |
| Get Banner Group | GET | /api/v1/banner-groups/{id} | available |
| List Banner Groups | GET | /api/v1/banner-groups | available |
| Update Banner Group | PUT | /api/v1/banner-groups/{id} | available |
| Delete Banner Group | DELETE | /api/v1/banner-groups/{id} | available |
| Search Banner Groups | GET | /api/v1/banner-groups/search | available |
makitt-server (도메인/모델링)
| 항목 | 내용 | Status |
|---|
| DynamoDB Entity | PK: BANNERGROUP#{id}, SK: METADATA | available |
| OpenSearch Index | BannerGroupDocument (full-text search) | available |
| Domain Service | BannerGroupService | available |
| Application | BannerGroupApplication | available |
makitt-web (셀러 어드민 UI)
| 기능 | 설명 | Status |
|---|
| Banner CRUD Modal | 배너 그룹 생성/편집/삭제 모달 | available |
| Slide Editor | 슬라이드별 미디어/텍스트/CTA 편집기 | available |
| Media Picker | 이미지/비디오 미디어 선택기 | available |
makitt-shop (HCS 렌더링)
| 항목 | 설명 | Status |
|---|
section renderer | 섹션 컨테이너 | available |
container renderer | Flex 컨테이너 | available |
image renderer | 배경 이미지 (cover, eager) | available |
heading renderer | 제목 텍스트 | available |
text renderer | 설명 텍스트 | available |
link renderer | CTA 링크 | available |
gallery renderer | 슬라이더/캐러셀 | available |
HCS Conversion Notes
- 루트는
section (100vh, relative, overflow hidden)
- 배경:
image (absolute, inset 0, object-fit cover)
- 오버레이:
container (relative, z-index 1, flex column, justify center)
- 내부:
heading (uppercase, bold) + text (description) + link (CTA button 스타일)
- 반응형:
@media (max-width: 768px) 로 모바일 분기
- 슬라이더 확장 시
gallery + gallery-item 계층으로 변환 가능