Wizard
단계 기반 마법사 UI를 제공하는 컨테이너 컴포넌트
개요
Wizard는 단계(Step) 표시줄과 단계별 콘텐츠 영역으로 구성된 마법사 컨테이너입니다. 현재 활성 단계를 시각적으로 강조하고, 완료된 단계는 클릭하여 되돌아갈 수 있습니다. 요약 모드에서는 단계 표시줄을 숨깁니다.
주요 특징
- ✅ 단계 표시줄: 완료(체크)·진행 중·대기 상태 자동 구분
- ✅ 완료 단계 탐색: 완료된 단계 클릭 시 onStepChange 호출
- ✅ 요약 모드: showSummary로 단계 표시줄 숨김
- ✅ 콘텐츠 영역: children으로 단계별 콘텐츠 렌더링
- ✅ 표시 제어: visible prop으로 전체 표시/숨김
기본 사용
steps 배열과 activeStep 인덱스를 전달합니다.
Preview
단계 이동
activeStep과 onStepChange로 현재 단계를 제어합니다. 완료된 단계를 클릭하면 해당 단계로 이동할 수 있습니다.
Preview
현재 단계: 검토
요약 모드
showSummary가 true이면 단계 표시줄을 숨기고 children만 렌더링합니다.
Preview
요약 화면: 입력한 내용을 확인하세요.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps | WizardStep[] | [] | 단계 정의 배열 |
activeStep | number | 0 | 현재 활성 단계 인덱스 (0-based) |
showSummary | boolean | false | 요약 모드 (true면 단계 표시줄 숨김) |
children | ReactNode | - | 단계별 콘텐츠 영역 |
visible | boolean | true | 표시 여부 (false면 렌더링 안 함) |
className | string | - | 컨테이너 CSS 클래스 |
style | CSSProperties | - | 인라인 스타일 |
Events
| Event | Type | Description |
|---|---|---|
onStepChange | (step: number) => void | 완료된 단계 클릭으로 단계 변경 시 호출 |
WizardStep
| Field | Type | Required | Description |
|---|---|---|---|
title | string | ✅ | 단계 제목 |
description | string | - | 단계 설명 (선택) |
접근성
권장 사항
- ✅ 단계 표시줄에
aria-label="Wizard steps"자동 적용 - ✅ 현재 단계에
aria-current="step"자동 적용 - ✅ 미완료 단계 버튼은 disabled 처리되어 포커스/클릭 불가
- ❌ 단계 이동 없이 콘텐츠만 교체하는 경우에도 현재 단계 정보를 텍스트로 제공
관련 컴포넌트
Last updated on