Stepper

다단계 진행 표시기. 가로/세로, 연결선이 단계 전환에 부드럽게 채워짐. 클릭 이동 콜백 지원.

Horizontal — 체크아웃 예시 (클릭으로 이동)

장바구니
상품 확인
배송 정보
주소 · 연락처
결제
카드/계좌
완료
주문 확인

현재 단계: 2 / 4

Vertical

장바구니
상품 확인
배송 정보
주소 · 연락처
결제
카드/계좌
완료
주문 확인

크기 변형

1단계
2단계
3단계

1단계
2단계
3단계

1단계
2단계
3단계

색상 변형

1단계
2단계
3단계

1단계
2단계
3단계

1단계
2단계
3단계

1단계
2단계
3단계

사용

import { Stepper } from '@baneung-pack/ui';

const STEPS = [
  { label: '장바구니', description: '상품 확인' },
  { label: '배송', description: '주소 · 연락처' },
  { label: '결제', description: '카드/계좌' },
  { label: '완료' },
];

// Horizontal (기본)
<Stepper steps={STEPS} current={1} />

// Vertical
<Stepper steps={STEPS} current={2} orientation="vertical" />

// 클릭으로 이동
<Stepper steps={STEPS} current={current} onStepClick={setCurrent} />

// 색
<Stepper steps={STEPS} current={1} activeColor="#3B716C" />

API

StepperProps

Property	Type	기본값	설명
steps	StepperStep[]	—	단계 배열.
current	number	—	현재 활성 인덱스 (0-based).
orientation	'horizontal' \| 'vertical'	'horizontal'	방향.
size	'sm' \| 'md' \| 'lg'	'md'	크기.
activeColor	string	'#1F2937'	활성/완료 색.
inactiveColor	string	'#CED4DA'	미완료 색.
duration	number	400	연결선 채움 시간 (ms).
onStepClick	(index: number) => void	—	클릭 콜백 (있으면 단계가 button으로 렌더).

StepperStep

Property	Type	기본값	설명
label	ReactNode	—	단계 라벨.
description	ReactNode	—	보조 설명 (라벨 아래/옆).
icon	ReactNode	—	숫자/체크 대신 사용자 아이콘.