WICKEDTeamWicked Design System / 컴포넌트
단계 표시
예측 가능한 여러 순차 단계의 작업 안내을 위한 컴포넌트.
적용 범위: TeamWicked 자체 브랜드·웹사이트. 호스팅 제품의 외형은 포함하지 않습니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.
- 1상품 선택
- 2설정 검토
- 3완료
예제 상품을 선택하는 단계입니다.
TeamWicked 웹사이트 토큰으로 구성한 동작 예제예시 데이터 · API 미연결
목적과 사용
예측 가능한 여러 순차 단계의 작업 안내에 사용합니다. 자유 탐색·실제 진행 백분율·수시로 변하는 단계에 사용하지 않습니다.
구성과 변형
완료·현재·예정 단계, 각 이름, 이전/다음. 변형의 외형은 각 제품의 기존 토큰을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.
동작 규칙
- STEP-01 SHOULD: 세 단계 이상 순차 작업에서 진행 안내의 필요성을 검토합니다.
- STEP-02 MUST: 다음 단계로 이동하기 전에 필요한 검증을 수행합니다.
- STEP-03 MUST: 이전 단계로 돌아가도 입력을 가능한 한 보존합니다.
- STEP-04 MUST: 현재 단계와 완료를 업무 결과와 일치시킵니다.
콘텐츠 예시
좋음: 상품 → 설정 → 검토 → 결제 / 피함: 결제 요청만으로 마지막 단계를 완료 처리.
우리 구현과 연결
TeamWicked 자체 웹사이트의 토큰과 CTA를 사용합니다. vPanel·Pterodactyl·Store의 구현은 WickedHost 체계에 속하며 이 체계의 컴포넌트를 정의하지 않습니다. 실행 예제의 원본 경로는 구현 코드 탭을 확인하세요.
상태와 검증
이전/다음·검증 실패·세션 만료·뒤로가기·결제 지연을 확인합니다.
일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. 검증 체크리스트에 증거를 연결합니다.