TeamWicked Design System / 컴포넌트
알림·폼 피드백
작업 결과·복구 안내·상태 변경을 전달을 위한 컴포넌트.
적용 범위: TeamWicked 자체 브랜드·웹사이트. 호스팅 제품의 외형은 포함하지 않습니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.
저장했습니다
변경한 예제 설정이 반영되었습니다.
이름을 확인해 주세요
빈 이름으로 저장할 수 없습니다.
사용량이 한도에 가까워요
다음 작업 전에 남은 용량을 확인하세요.
정보를 확인하고 있어요
완료되면 이 화면에 결과가 표시됩니다.
TeamWicked 웹사이트 토큰으로 구성한 동작 예제예시 데이터 · API 미연결
목적과 사용
작업 결과·복구 안내·상태 변경을 전달에 사용합니다. 모든 배경 요청에 팝업을 띄우거나 중요한 오류를 일회성 toast로만 표시하지 않습니다.
구성과 변형
심각도, 제목, 설명, 선택적 다음 행동/닫기. 변형의 외형은 각 제품의 기존 토큰을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.
동작 규칙
- NTF-01 MUST: 오류·경고·정보·성공의 의미를 구분합니다.
- NTF-02 MUST: 같은 사건을 전체 화면·inline·toast로 중복 표시하지 않습니다.
- NTF-03 MUST: 수정이 필요한 오류는 해당 위치에서 지속적으로 확인 가능합니다.
- NTF-04 SHOULD: 사용자가 볼 필요가 있는 정보만 적절한 강도로 알립니다.
콘텐츠 예시
좋음: ‘키 저장 실패 — 형식을 확인하세요’ / 피함: 실패를 중립 도움말로 숨김.
우리 구현과 연결
TeamWicked 자체 웹사이트의 토큰과 CTA를 사용합니다. vPanel·Pterodactyl·Store의 구현은 WickedHost 체계에 속하며 이 체계의 컴포넌트를 정의하지 않습니다. 실행 예제의 원본 경로는 구현 코드 탭을 확인하세요.
상태와 검증
오류 반복·대상 화면 밖·닫기 후 재발·화면 낭독기 중복·지속성을 확인합니다.
일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. 검증 체크리스트에 증거를 연결합니다.