단계 표시기
여러 단계를 거치는 긴 흐름에서 지금 어디인지 알릴 때. 3단계 미만이면 필요 없습니다.
코드
<ol class="jt-steps">
<li class="jt-step" data-state="done"><span class="jt-step-dot">1</span>기본 정보</li>
<li class="jt-step" data-state="current" aria-current="step"><span class="jt-step-dot">2</span>위생 점검</li>
<li class="jt-step" data-state="todo"><span class="jt-step-dot">3</span>보안 동의</li>
</ol>하지 말 것
- 단계를 6개 이상 만들지 마세요. 사용자가 포기합니다. 묶어서 줄이세요.
접근성
- 현재 단계에
aria-current="step" - 완료·현재·대기를 색만으로 구분하지 말고 숫자·체크 표시를 함께 넣으세요
앱에서 모양 바꾸기
jt-utilities.css를 고치지 말고 아래 변수만 덮어쓰세요(컴포넌트 계약).
노브: data-state = done / current / todo
.my-page .jt-steps { data-state: …; }