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