Components
Seat Selector
좌석·자리를 고르는 그리드입니다. 통로 간격과 3가지 상태(가능·선택·불가)로 구성됩니다.
가능선택불가
코드 보기
<div class="seatmap">
<button class="seat"></button>
<button class="seat sel"></button>
<button class="seat taken"></button>
<span></span> <!-- 통로 -->
</div>Variants
| 이름 | 설명 | 미리보기 |
|---|---|---|
| 가능 | 테두리형 → hover 포인트색 | |
| 선택 | 포인트색 채움 | |
| 불가 | muted 채움 · 클릭 불가 |
Guidelines
✓ Do
- 범례(가능·선택·불가)를 항상 함께
- 통로는 빈 칸으로 표현
- 선택 결과를 CTA 레이블에 반영
✕ Don't
- 좌석에 번호를 다 적지 않는다 (선택 시에만 표시)
- 4상태 이상 만들지 않는다
Specification
| 속성 | 토큰/값 | 비고 |
|---|---|---|
좌석 | 24px / radius 7px(상)·4px(하) | |
선택 | var(--ac-accent) | |
불가 | var(--muted) |
비교
xapp-05 좌석 선택(항공·공연)의 핵심 요소. Seat vs Slot — 공간 배치를 고르면 Seat, 시간을 고르면 Slot.