ProductUnit
상품 단위 컴포넌트 - 세로형/가로형 레이아웃 지원
세로형 (Vertical) - 기본
기본 세로형 레이아웃 (variant="vertical" 또는 생략)
<ProductUnit link="#" image=[object Object]
brand="Brand" name="Relief Sun : Rice + Probiotics 50ml 3ea" regularPrice="US$ 10,00" discountRate="55%"
salePrice="223,200" showCartButton=true
/>
세로형 (Vertical) - 랭킹 배지
랭킹 배지가 있는 세로형 레이아웃<ProductUnit
link="#"
image={/* MediaEmbed props */}
rank={1}
brand="Brand"
name="Product Name"
salePrice="223,200"
/>
가로형 (Horizontal) - 기본
가로형 레이아웃 (variant="horizontal")
<ProductUnit link="#" image=[object Object]
variant="horizontal" brand="Brand" name="Relief Sun : Rice + Probiotics 50ml 3ea" regularPrice="US$
10,00" discountRate="55%" salePrice="129.50" showCartButton=true
/>
가로형 (Horizontal) - 랭킹 배지
랭킹 배지가 있는 가로형 레이아웃<ProductUnit
link="#"
image={/* MediaEmbed props */}
variant="horizontal"
rank={1}
brand="Brand"
name="Product Name"
salePrice="129.50"
/>
가로형 (Horizontal) - 이미지 사이즈 커스텀
imageSize prop으로 이미지 크기 지정 (기본값: 120px)<ProductUnit
link="#"
image={/* MediaEmbed props */}
variant="horizontal"
imageSize={{ width: 100, height: 100 }}
brand="Brand"
name="Product Name"
salePrice="129.50"
/>
{/* 기본값 120px 사용 (imageSize 생략) */}
<ProductUnit
link="#"
image={/* MediaEmbed props */}
variant="horizontal"
brand="Brand"
name="Product Name"
salePrice="129.50"
/>
Props
참고: 스타일은 사용자가 직접 적용할 예정이므로, 이 데모 페이지에서는 기본 레이아웃
구조만 확인할 수 있습니다.
| Prop | Type | Default | Description |
|---|---|---|---|
link |
string | - | 상품 상세 페이지 링크 |
image |
ComponentProps<MediaEmbed> | - | 상품 이미지 props |
variant |
"vertical" | "horizontal" | "vertical" | 레이아웃 방향 (세로형/가로형) |
rank |
number? | - | 랭킹 번호 (있으면 배지 표시) |
brand |
string | - | 브랜드명 |
name |
string | - | 상품명 |
regularPrice |
string? | - | 정가 (취소선 표시) |
discountRate |
string? | - | 할인율 |
salePrice |
string | - | 판매가 |
showCartButton |
boolean? | true | 장바구니 버튼 표시 여부 |
imageSize |
object? | - | 가로형일 때 이미지 크기 지정 (기본값: 120px). width와 height 속성을 가진 객체 형식. 지정하지 않으면 기본값 적용, 지정하면 해당 값으로 override |