PurchaseBar

선택 내용, 합계, 다음 행동을 하단에 고정.

라이브러리 전용

개요

미리보기

예시 언어동작 줄이기

title

currency

period

taxIncluded

state

actionLabel

emptyReason

예시

상태

기본
개인 · 월간
Total
₩9,900/ monthTax included
진행 중
개인 · 월간
Total
₩9,900/ monthTax included
선택 없음
개인 · 월간
요금제를 고르면 합계가 보여요.
연간
개인 · 연간
Total
₩99,000/ yearTax included
가장 긴 문구 (es)
개인 · 월간 · 보관 기간 연장 포함
Total
₩9,900/ monthTax included

쓰임 예

무료
무료
Total
Free

이렇게 · 이렇게 하지 않기

이렇게 금액과 버튼은 하나씩만 둔다. 버튼은 결제 결과를 말한다(“월 {amount} 결제”).
이렇게 하지 않기 남은 시간 압박이나 “지금만” 같은 문구는 쓰지 않는다. 체크해 둔 추가 항목을 합계에 몰래 넣지 않는다.
이렇게 하지 않기 아직 모르는 금액(배송·세금)을 0으로 쓰지 않는다. 모르면 모른다고 쓴다.
이렇게 21st 참고: Checkout Summary(astralyxdev — 모르는 금액은 “다음 단계에서 계산”으로, 거짓 0 금지), Order Summary Separator(sean0205), Payment(ravikatiyar162). Payment의 지연 등장 애니메이션(850ms)은 버렸다.

21st — Checkout Summary (astralyxdev) ↗

토큰과 속성

이름	타입	기본값	설명
`title`	`ReactNode`	`개인 · 월간`	무엇을 사는지 한 줄.
`amount`	`number`	—	실제로 청구될 금액 하나. 미리보기 표본 9900.
`currency?`	`'KRW' \| 'USD' \| 'CNY' \| 'EUR'`	`KRW`	Price와 같다.
`period?`	`'month' \| 'year' \| 'once'`	`month`	Price와 같다. 버튼 문장에도 들어간다.
`taxIncluded?`	`boolean`	`true`	Price와 같다.
`state?`	`'ready' \| 'loading' \| 'empty'`	`ready`	ready · loading(행동 진행 중, 초점 유지) · empty(선택 없음: 버튼 disabled + 이유).
`actionLabel?`	`ReactNode`		버튼 하나. 무엇을 청구하는지 쓴다. 비우면 금액과 주기로 만든다(“월 ₩9,900 결제”). “계속”만 쓰지 않는다.
`emptyReason?`	`ReactNode`	`요금제를 고르면 합계가 보여요.`	state="empty"일 때 합계 대신 보이는 이유.
`onAction?: () => void`	—	—	버튼을 눌렀을 때. 진행 중에는 state="loading"을 준다.
`announce() — a11y/announce.ts`	—	—	공용 announce()(LiveAnnouncer, polite). 합계가 바뀌고 500ms 뒤 한 번 “합계 ₩9,900”.
`--cb-purchase-bar-h`	—	—	스크롤 컨테이너의 scroll-padding-bottom에 쓰는 막대 높이.
그 밖의 속성	—	—	id, aria-label(기본 “구매 요약”) 등 네이티브 aside 속성은 그대로 전달된다. className·style·children은 받지 않는다.

예시

상태

기본
개인 · 월간
Total
₩9,900/ monthTax included
진행 중
개인 · 월간
Total
₩9,900/ monthTax included
선택 없음
개인 · 월간
요금제를 고르면 합계가 보여요.
연간
개인 · 연간
Total
₩99,000/ yearTax included
가장 긴 문구 (es)
개인 · 월간 · 보관 기간 연장 포함
Total
₩9,900/ monthTax included

쓰임 예

무료
무료
Total
Free

이렇게 · 이렇게 하지 않기

이렇게 금액과 버튼은 하나씩만 둔다. 버튼은 결제 결과를 말한다(“월 {amount} 결제”).

이렇게 하지 않기 남은 시간 압박이나 “지금만” 같은 문구는 쓰지 않는다. 체크해 둔 추가 항목을 합계에 몰래 넣지 않는다.

이렇게 하지 않기 아직 모르는 금액(배송·세금)을 0으로 쓰지 않는다. 모르면 모른다고 쓴다.

이렇게 21st 참고: Checkout Summary(astralyxdev — 모르는 금액은 “다음 단계에서 계산”으로, 거짓 0 금지), Order Summary Separator(sean0205), Payment(ravikatiyar162). Payment의 지연 등장 애니메이션(850ms)은 버렸다.

토큰과 속성

이름	타입	기본값	설명
`title`	`ReactNode`	`개인 · 월간`	무엇을 사는지 한 줄.
`amount`	`number`	—	실제로 청구될 금액 하나. 미리보기 표본 9900.
`currency?`	`'KRW' \| 'USD' \| 'CNY' \| 'EUR'`	`KRW`	Price와 같다.
`period?`	`'month' \| 'year' \| 'once'`	`month`	Price와 같다. 버튼 문장에도 들어간다.
`taxIncluded?`	`boolean`	`true`	Price와 같다.
`state?`	`'ready' \| 'loading' \| 'empty'`	`ready`	ready · loading(행동 진행 중, 초점 유지) · empty(선택 없음: 버튼 disabled + 이유).
`actionLabel?`	`ReactNode`		버튼 하나. 무엇을 청구하는지 쓴다. 비우면 금액과 주기로 만든다(“월 ₩9,900 결제”). “계속”만 쓰지 않는다.
`emptyReason?`	`ReactNode`	`요금제를 고르면 합계가 보여요.`	state="empty"일 때 합계 대신 보이는 이유.
`onAction?: () => void`	—	—	버튼을 눌렀을 때. 진행 중에는 state="loading"을 준다.
`announce() — a11y/announce.ts`	—	—	공용 announce()(LiveAnnouncer, polite). 합계가 바뀌고 500ms 뒤 한 번 “합계 ₩9,900”.
`--cb-purchase-bar-h`	—	—	스크롤 컨테이너의 scroll-padding-bottom에 쓰는 막대 높이.
그 밖의 속성	—	—	id, aria-label(기본 “구매 요약”) 등 네이티브 aside 속성은 그대로 전달된다. className·style·children은 받지 않는다.

개요

예시

상태

쓰임 예

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기

개요

예시

상태

쓰임 예

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기