Price

판매가·정가·할인율을 함께 보여주는 가격 표시예요.

사용법

Price는 할인 전·후 가격과 할인율을 함께 보여줘요. 커머스 카드·상세 화면에 맞춰요.

12,900원

12,900원31%

8,900원

스타일 커스터마이징

Price 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.

className / style

<Price
  className="shadow-md"
  style={{
    --gtd-accent: "#059669",
  }}
/>

classNames 슬롯

복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.

<Price
  classNames={{
    meta: "my-price-meta",
    original: "my-price-original",
    rate: "my-price-rate",
    amount: "my-price-amount",
    value: "my-price-value",
    currency: "my-price-currency"
  }}
/>

CSS 변수

변수	설명
--gtd-accent	할인율 강조

인터페이스

PriceProps

속성	타입	기본값	설명
amount*	number	—	판매가
originalAmount	number	—	정가 (할인 표시)
currency	string	원	통화 단위
size	"sm" \| "md" \| "lg"	md	크기
align	"left" \| "right"	left	정렬
className	string	—	루트 요소 클래스. Tailwind·커스텀 CSS 적용
style	CSSProperties	—	인라인 스타일·CSS 변수(--gtd-*) 오버라이드

가져오기

import { Price } from "@/components/ui/Price";