Stepper
단계별 진행 상황을 표시하는 컴포넌트입니다. 결제 프로세스, 회원가입 등에 활용할 수 있습니다.
설치
Terminal
npx @msub-core/ui-cli add stepper
사용법
TSX
import {
Stepper,
Step,
StepLabel,
StepDescription,
} from "@msub-core/ui/components/stepper"
function MyComponent() {
const [activeStep, setActiveStep] = useState(0)
return (
<Stepper activeStep={activeStep}>
<Step>
<StepLabel>계정 정보</StepLabel>
<StepDescription>이메일과 비밀번호 입력</StepDescription>
</Step>
<Step>
<StepLabel>개인 정보</StepLabel>
</Step>
<Step>
<StepLabel>완료</StepLabel>
</Step>
</Stepper>
)
}기본
계정 정보
이메일과 비밀번호 입력
2
개인 정보
이름과 연락처 입력
3
결제 정보
결제 수단 선택
4
완료
가입 완료
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| activeStep | number | - | No | 현재 활성 스텝 (0부터 시작) |
| orientation | "horizontal" | "vertical" | "horizontal" | No | 방향 |
| variant | "default" | "outline" | "ghost" | "default" | No | 스타일 변형 |
| size | "sm" | "default" | "lg" | "default" | No | 크기 |
| clickable | boolean | false | No | 클릭 가능 여부 |
| onStepClick | (step: number) => void | - | No | 스텝 클릭 핸들러 |
Outline 변형
계정
2
정보
3
완료
Ghost 변형
계정
2
정보
3
완료
크기
Small
계정
2
정보
3
완료
Default
계정
2
정보
3
완료
Large
계정
2
정보
3
완료
아이콘 커스텀
계정
결제
배송
완료
수직 방향
주문 접수
주문이 정상적으로 접수되었습니다.
2
결제 완료
결제가 완료되었습니다.
3
배송 중
상품이 배송 중입니다.
4
배송 완료
배송이 완료되었습니다.
클릭 가능한 스텝
1
1단계
2
2단계
3
3단계
스텝을 클릭하여 이동할 수 있습니다. 현재: 1단계
에러 상태
계정 정보
결제 실패
결제 처리 중 오류가 발생했습니다.
3
완료