id: 'brand-hero-split'
status: in-progress
Brand Hero Split
Reference
- URL: https://biodance.com/pages/more-than-hype
- 위치: 페이지 최상단 히어로 섹션 (Section 0, 2, 3에서 동일 패턴 반복)
- 구조: 2컬럼 스플릿 — 서브타이틀 + 대형 serif 헤딩 (좌) + 원형 클리핑 이미지 (우)
- 디자인: 흰색 배경, 미니멀, 대형 타이포그래피 (40px serif), 원형 이미지 (border-radius: 50%)
React Component
- Path:
apps/makitt-standard-commerce/src/components/assets/brand-hero-split/
- Status: implemented
- 반응형: 데스크톱 2컬럼 → 모바일 1컬럼 (텍스트 먼저, 이미지 아래)
- i18n: ko, en, ja
- Props: subtitle, heading, imageUrl, imageAlt, imagePosition (left/right), backgroundColor
Prerequisites
makitt-server (shop-api)
고객 대면 API. shop storefront에서 호출.
| API | Method | Endpoint | Status |
|---|
| — | — | — | N/A (정적 콘텐츠, API 불필요) |
makitt-server (admin-api)
셀러 어드민에서 이 기능의 데이터를 관리하기 위한 API.
| API | Method | Endpoint | Status |
|---|
| — | — | — | N/A (정적 콘텐츠) |
makitt-server (도메인/모델링)
| 항목 | 내용 | Status |
|---|
| — | 정적 콘텐츠이므로 도메인 모델 불필요 | N/A |
makitt-web (셀러 어드민 UI)
| 기능 | 설명 | Status |
|---|
| — | 정적 콘텐츠이므로 어드민 UI 불필요 | N/A |
makitt-shop (HCS 렌더링)
| 항목 | 설명 | Status |
|---|
section renderer | 섹션 컨테이너 | available |
container renderer | 레이아웃 컨테이너 | available |
heading renderer | 헤딩 텍스트 | available |
text renderer | 일반 텍스트 | available |
image renderer | 이미지 | available |
HCS Conversion Notes
- 순수 정적 레이아웃이므로 API 의존성 없음
imagePosition 변경은 HCS에서 flexDirection 또는 order CSS로 구현 가능- 원형 이미지는
borderRadius: 50% + overflow: hidden 컨테이너로 구현
aspectRatio: 1 / 1로 정사각형 비율 유지