WICKEDTeamWicked Design System / 컴포넌트
모달·확인 대화상자
짧은 확인·입력에 집중해야 하는 작업을 위한 컴포넌트.
적용 범위: TeamWicked 자체 브랜드·웹사이트. 호스팅 제품의 외형은 포함하지 않습니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.
TeamWicked 웹사이트 토큰으로 구성한 동작 예제예시 데이터 · API 미연결
목적과 사용
짧은 확인·입력에 집중해야 하는 작업에 사용합니다. 장문의 편집·일반 공지·여러 단계 탐색에 반복 사용하지 않습니다.
구성과 변형
이름, 설명, 내용, 주 작업, 취소/닫기. 변형의 외형은 각 제품의 기존 토큰을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.
동작 규칙
- MDL-01 MUST: 제목으로 어떤 대상을 어떻게 바꾸는지 설명합니다.
- MDL-02 MUST: 파괴적 작업에 안전한 취소 경로를 제공합니다.
- MDL-03 MUST: 제출 후 진행·실패를 대화상자 안에서 설명하고 실패를 성공처럼 닫지 않습니다.
- MDL-04 SHOULD: 모달 중첩 대신 단일 단계 전환·별도 페이지를 검토합니다.
콘텐츠 예시
좋음: ‘서버 이미지 변경 — 기존 파일이 삭제됩니다’ / 피함: 대상 없는 ‘정말요?’.
우리 구현과 연결
TeamWicked 자체 웹사이트의 토큰과 CTA를 사용합니다. vPanel·Pterodactyl·Store의 구현은 WickedHost 체계에 속하며 이 체계의 컴포넌트를 정의하지 않습니다. 실행 예제의 원본 경로는 구현 코드 탭을 확인하세요.
상태와 검증
열기·닫기·Escape·스크롤·모바일 키보드·실패 후 입력 보존·호출 요소 삭제를 확인합니다.
일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. 검증 체크리스트에 증거를 연결합니다.