WICKEDWickedHost Design System / 컴포넌트
팝오버
현재 항목의 짧은 상세·상호작용 설명을 위한 컴포넌트.
WickedHost 공통 확정 기준: vPanel/Pterodactyl 디자인을 Blesta까지 동일 적용. 문서·예제 기준이며 운영 서비스 배포와는 별도입니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.
WickedHost 공통 토큰으로 구성한 동작 예제예시 데이터 · API 미연결
목적과 사용
현재 항목의 짧은 상세·상호작용 설명에 사용합니다. 긴 다단계 편집·중첩 팝오버에는 별도 페이지/모달을 사용합니다.
구성과 변형
호출 컨트롤, 표시 내용, 필요 시 닫기. 변형의 외형은 각 제품의 기존 토큰을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.
동작 규칙
- POP-01 MUST: 링크·버튼을 내부에 넣으면 실제 키보드 접근을 보장합니다.
- POP-02 MUST: 다른 팝오버를 여는 동안 기존 열린 상태를 관리합니다.
- POP-03 SHOULD: 내용이 크면 화면 밖으로 잘라내지 말고 적합한 패턴으로 전환합니다.
- POP-04 MUST: 클릭 밖 닫힘이 진행 중 입력을 조용히 잃게 하지 않습니다.
콘텐츠 예시
좋음: 사용량 용어와 자세히 보기 / 피함: 작은 팝오버 속 전체 결제 흐름.
우리 구현과 연결
AI 설명에도 같은 원칙을 적용하되 제품 정책 변경 기능은 별도 권한을 유지합니다.
제품별 소유 경로는 WICKEDVPS, Panel, Blesta와 소스 근거를 확인합니다. 코드 존재와 모든 사용처의 준수는 다르며, 별도 표시가 없는 제품별 준수 상태는 미검증입니다.
상태와 검증
스크롤·가장자리·모바일·열기 전환·외부 클릭·키보드 닫기를 확인합니다.
일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. 검증 체크리스트에 증거를 연결합니다.