Price
금액·결제 주기·세금 포함 여부를 4개 언어로.
- 라이브러리 전용
개요
미리보기
₩24,000/ monthTax included
예시
상태
월
₩24,000/ monthTax included
연 + 이전 가격
₩288,000₩240,000/ yearTax included무료
Free
USD · 세금 별도
$19/ monthTax not included
EUR · 크게
€18.50/ monthTax included
쓰임 예
CNY
CN¥128/ monthTax included
1회 결제
₩49,000one-timeTax included
이렇게 · 이렇게 하지 않기
- 이렇게 통화와 숫자 형식은 사용자의 언어 설정을 따른다.
- 이렇게 세금 포함 여부와 결제 주기를 금액 바로 옆에 쓴다.
- 이렇게 하지 않기 할인 전 가격은 실제로 그 가격에 판 적이 있을 때만 보여준다. 남은 시간·“지금만” 문구를 붙이지 않는다.
- 이렇게 하지 않기 무료를 “₩0”으로 쓰지 않는다. 숫자가 바뀌어도 자리수 굴림 애니메이션을 쓰지 않는다.
- 이렇게 21st 참고: Annual Savings Pricing Grid(olewandowski1, 연 청구 합계를 가격 아래에), Receipt Pricing(n1m4mz, 줄별 내역). 숫자 굴림(efferd pricing-4, kokonutd Pricing Table)은 버렸다. 코드는 직접 작성.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
amount | number | — | 통화의 기본 단위 금액(24000 = ₩24,000). 0이면 “무료”로 쓰고 “₩0”으로 쓰지 않는다. 미리보기 표본은 24000. |
currency? | 'KRW' | 'USD' | 'CNY' | 'EUR' | KRW | 통화. 숫자 형식은 화면 언어(Intl.NumberFormat)를 따른다. |
period? | 'month' | 'year' | 'once' | month | 결제 주기. 금액 바로 옆에 쓴다. |
compareAt? | number | — | 실제로 받았던 이전 가격. 현재 금액보다 클 때만 <del>로 그린다. 만들어 낸 할인 전 가격은 넣지 않는다. |
taxIncluded? | boolean | true | 세금 포함 여부. 어느 쪽이든 글자로 쓴다. |
size? | 'md' | 'lg' | md | lg는 PlanCard의 큰 숫자. 숫자는 고정폭(tabular). |
formatPrice(amount, currency, intlLocale) | — | — | 같은 형식이 필요한 문장(PurchaseBar 버튼 등)에 쓰는 내보낸 함수. |
| 그 밖의 속성 | — | — | id, aria-* 등 네이티브 p 속성은 그대로 전달된다. className·style·children은 받지 않는다. |
접근성
키보드: 대화형 요소가 없다.
- 금액은 <data value>로 기계값을 함께 둔다. 이전 가격은 <del> + 보조기기 전용 “기존 가격”.
- 세금·주기는 텍스트라서 색이 사라져도(forced-colors) 그대로 읽힌다.