WICKED버튼 그룹·보기 범위
같은 작업의 조회 범위를 한 영역에서 선택합니다.
WickedHost 공통 확정 기준: vPanel/Pterodactyl 디자인을 Blesta까지 동일 적용. 문서·예제 기준이며 운영 서비스 배포와는 별도입니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.
목적과 사용
같은 작업의 조회 범위를 한 영역에서 선택합니다. TeamWicked와 WickedHost의 공통 행동 규칙으로 재사용하되 각 체계의 토큰을 적용합니다.
구성과 변형
- 한 항목 선택
- 키보드 이동
- 라벨 길이 변화
보여 주는 형태는 해당 제품 토큰으로 구성한 문서용 예제입니다. 별도 원본 연결 표시가 없으면 운영 컴포넌트를 그대로 복제했다는 의미가 아닙니다.
동작 규칙
- BTG-01 MUST: 상호 배타 선택은 현재 항목 하나만 강조합니다.
- BTG-02 MUST: 버튼 그룹을 페이지 탭이나 즉시 저장 스위치와 구별합니다.
- BTG-03 MUST: 아이콘만으로 기간·범위의 뜻을 전달하지 않습니다.
- BTG-04 MUST: 선택 시 포커스를 강제로 페이지 상단으로 옮기지 않습니다.
콘텐츠 예시
예제 이름·주소·금액은 실제 고객 데이터가 아닙니다. example.test, 개발 서버, 예제 계정처럼 목적이 분명한 가상 자료를 사용합니다. 실제 권한·저장·전송이 완료되었다고 오해할 문구는 사용하지 않습니다.
우리 구현과 연결
web/expanded-specimens.tsx의 실행 코드와 이 페이지의 구현 코드 탭이 같은 함수를 사용합니다. 공통 요소는 web/primitives.tsx, 스타일은 web/expanded-specimens.css에서 관리합니다. 공통 행동 규칙과 시각 토큰을 구분하고, 같은 이름의 운영 구현과 props 계약이 같다고 가정하지 않습니다.
상태와 검증
1시간→7일 선택과 aria-pressed, 줄바꿈 후 순서를 확인합니다.
라이트·다크 / desktop·mobile / 키보드 / 빈 값·긴 값 / 권한·실패 / 데이터 변경 요청 없음에 대한 증거를 기록합니다. 제품의 실제 업무 성공이나 전체 WCAG 준수 여부는 별도 검증입니다.