Step Indicator

사용자가 거쳐야 하는 일련의 단계를 시각화하는 컴포넌트입니다. 회원가입, 결제 등 다단계 프로세스에서 현재 위치를 안내합니다.

개요

  1. 현재단계

설치

사용법

steps 배열과 currentStep 인덱스를 전달합니다. 인덱스는 0부터 시작합니다.

예제

수직 방향

orientation='vertical'로 수직 레이아웃을 사용합니다.

  1. 1단계
  2. 현재단계2단계
  3. 3단계
  4. 4단계

크기

size prop으로 크기를 조절합니다: sm, md(기본), lg

  2. 현재단계
  2. 현재단계
  2. 현재단계

useSteps 훅

useSteps 훅으로 상태 관리를 간편하게 처리할 수 있습니다. 버튼과 함께 사용하면 단계 간 이동이 가능합니다.

체크 아이콘 숨김

showCheckIcon={false}로 완료 단계에서 숫자를 유지합니다.

  3. 현재단계

Steps (Compound Component)

Chakra UI 스타일의 유연한 Compound Component 패턴입니다. 버튼 위치를 자유롭게 커스텀할 수 있습니다.

  1. 약관 동의
  2. 정보 입력
  3. 본인 인증
  4. 가입 완료

이름, 이메일 등 기본 정보를 입력해주세요.

접근성

WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.

키보드 지원

키동작
Tab클릭 가능한 단계로 포커스 이동
Enter / Space해당 단계로 이동 (clickable일 때)

ARIA 속성

  • <ol> 요소로 순서 있는 목록 구현
  • aria-label="진행 단계"로 목록 설명
  • 현재 단계에 aria-current="step" 적용
  • 스크린리더용 "현재단계" 텍스트 (sr-only)
  • 클릭 가능 단계는 <button>으로 구현