컴포넌트 · 내비게이션

Stepper · Progress

여러 단계로 이뤄진 과정(가맹점 가입 · 정산 계좌 등록)의 현재 위치와, 작업 진행률 · 목표 달성률을 보여줍니다.

Stepper

  1. 사업자 인증
  2. 대표자 정보
  3. 3정산 계좌
  4. 4계약 동의
  5. 5심사
  1. 주문 접수
  2. 준비 중
  3. 3픽업 대기
  4. 4완료

ProgressBar

이번 달 정산 지급72%
영업 목표 (12/25건)48%
일 결제 한도 사용91%

ProgressRing · Spinner

72%
완료

사용 규칙

이렇게 하세요

  • 3–5단계에만 Stepper 사용
  • 1초 이상 걸리는 작업은 Spinner, 5초 이상은 진행률 표시
  • 완료 단계는 체크 아이콘으로

이렇게 하지 마세요

  • 단계 라벨 두 줄 이상
  • 진행률을 알 수 없는데 가짜 퍼센트 표시
  • 결제 승인 대기 중 화면 전체를 스피너로만 채우기 (안내 문구 필수)

Props

PropTypeDefault설명
Stepper.steps · current*string[] · number—단계 라벨 · 현재 인덱스(0부터)
ProgressBar.value · maxnumber—값 / 최대값(100)
ProgressBar.tone"brand" | "positive" | "warning" | "negative""brand"색
ProgressRing.size · strokenumber64 · 6지름 · 두께