← Kitchen Sink로 돌아가기

ProductUnit

상품 단위 컴포넌트 - 세로형/가로형 레이아웃 지원

세로형 기본 (배지X, 랭킹X, 엠블럼X, 기프트X)

기본 세로형 레이아웃 - 필수 요소만 포함
Brand
Relief Sun : Rice + Probiotics 50ml 3ea Relief Sun : Rice + Probiotics 50ml 3ea
55% US$10,00
US$ 129.50
별점
4.8 (71)
<ProductUnit link="#" image=[object Object] brand="Brand" name="Relief Sun : Rice + Probiotics 50ml 3ea Relief Sun : Rice + Probiotics 50ml 3ea" salePrice="129.50" discountRate="55%" regularPrice="US$10,00" rating=4.8 reviews=71 />

세로형 전체 (배지O, 랭킹O, 엠블럼O, 기프트O)

모든 선택적 요소가 포함된 세로형 레이아웃
1
Brand
Relief Sun : Rice + Probiotics 50ml 3ea Relief Sun : Rice + Probiotics 50ml 3ea
55% US$10,00
US$ 129.50
별점
4.8 (71)
Best New K-TREND
<ProductUnit link="#" image=[object Object] brand="Brand" name="Relief Sun : Rice + Probiotics 50ml 3ea Relief Sun : Rice + Probiotics 50ml 3ea" salePrice="129.50" discountRate="55%" regularPrice="US$10,00" rank=1 emblems=[object Object][object Object] gift=[object Object] badges=[object Object][object Object][object Object] rating=4.8 reviews=71 />

가로형 기본 (배지X, 랭킹X, 엠블럼X, 기프트X)

기본 가로형 레이아웃 - 필수 요소만 포함
Brand
Relief Sun : Rice + Probiotics 50ml 3ea Relief Sun : Rice + Probiotics 50ml 3ea
55% US$10,00
US$ 129.50
별점
4.8 (71)
<ProductUnit variant="horizontal" link="#" image=[object Object] brand="Brand" name="Relief Sun : Rice + Probiotics 50ml 3ea Relief Sun : Rice + Probiotics 50ml 3ea" salePrice="129.50" discountRate="55%" regularPrice="US$10,00" rating=4.8 reviews=71 />

가로형 전체 (배지O, 랭킹O, 엠블럼O, 기프트O)

모든 선택적 요소가 포함된 가로형 레이아웃 (이미지 위 배지 포함)
1
Flash Deal
Brand
Relief Sun : Rice + Probiotics 50ml 3ea Relief Sun : Rice + Probiotics 50ml 3ea
55% US$10,00
US$ 129.50
별점
4.8 (71)
Best New K-TREND
<ProductUnit variant="horizontal" link="#" image=[object Object] brand="Brand" name="Relief Sun : Rice + Probiotics 50ml 3ea Relief Sun : Rice + Probiotics 50ml 3ea" salePrice="129.50" discountRate="55%" regularPrice="US$10,00" rank=1 emblems=[object Object][object Object] gift=[object Object] imageBadge=[object Object] badges=[object Object][object Object][object Object] rating=4.8 reviews=71 nameLineClamp="line-clamp-1" />

가로형 특별 (compact 레이아웃)

정가 없음, 별점 없음, 장바구니 버튼 없음, 가격 레이아웃 다름 (regularPrice가 없으면 자동으로 compact)
Brand
Relief Sun : Rice + Probiotics 50ml 3ea Relief Sun : Rice + Probiotics 50ml 3ea
55%
US$ 129.50
<ProductUnit variant="horizontal" link="#" image=[object Object] brand="Brand" name="Relief Sun : Rice + Probiotics 50ml 3ea Relief Sun : Rice + Probiotics 50ml 3ea" salePrice="129.50" discountRate="55%" nameLineClamp="line-clamp-1" showCartButton= /> <!-- regularPrice가 없으면 자동으로 compact 레이아웃 -->

이미지 사이즈

이미지는 기본적으로 w-full로 부모 컨테이너 크기에 맞춥니다. 고정 크기가 필요한 경우 image prop의 class로 제어할 수 있습니다.
Brand
Product Name
55%
US$ 129.50
Brand
Product Name
55%
US$ 129.50
Brand
Product Name
55%
US$ 129.50
Brand
Product Name
55%
US$ 129.50
<div class="w-[64px]"> <ProductUnit image=[object Object] ... /> </div> <!-- 부모 컨테이너 크기에 맞춰짐 -->
고정 크기가 필요한 경우 image prop의 class로 제어
Brand
Product Name
55%
US$ 129.50
Brand
Product Name
55%
US$ 129.50
<ProductUnit image=[object Object] ... /> <!-- image prop의 class로 크기 제어 -->
💡 이미지 사이즈 제어 방법:
  • 기본적으로 이미지는 w-full로 부모 컨테이너 크기에 맞춰집니다
  • 부모 컨테이너의 크기를 제어하여 이미지 크기를 조절할 수 있습니다
  • 고정 크기가 필요한 경우 image prop의 class로 제어 가능합니다 (예: class="w-[64px] h-[64px]")

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 장바구니 버튼 표시 여부
rating number | string? - 평점 (예: 4.8). 별점 1개와 함께 표시됨
reviews number | string? - 리뷰 수 (예: 71). 괄호와 함께 표시됨
rank number? - 순위 표시 (예: 1, 2, 3) - 이미지 위 좌측 상단
emblems Array? - 엠블럼 배열 (최대 2개) - 이미지 위 우측 상단
gift object? - 기프트 (최대 1개) - 이미지 위 우측 하단
badges Array? - 정보 영역 배지 배열 (여러 개 가능)
imageBadge object? - 이미지 위 배지 (variant 무관, grid-area: bl)
priceLayout "default" | "compact"? auto 가격 레이아웃 (default: 할인율+정가 한 줄/최종가격 다음 줄, compact: 할인율+최종가격 한 줄). regularPrice가 없으면 자동으로 compact
nameLineClamp "line-clamp-1" | "line-clamp-2"? "line-clamp-2" 상품명 줄 수 제한