Components
Slot Picker
날짜·시간대를 고르는 선택기입니다. 날짜 칩과 시간 슬롯 2단으로 구성됩니다.
코드 보기
<div class="tn-seg">날짜 칩</div>
<div class="slotrow">
<button class="slot">10:00</button>
<button class="slot sel">14:00</button>
<button class="slot off">13:00</button>
</div>Variants
| 이름 | 설명 | 미리보기 |
|---|---|---|
| 가능 | 테두리형 → hover 포인트색 | 15:00 |
| 선택 | 검정 반전 | 14:00 |
| 마감 | 취소선 + 흐림 · 클릭 불가 | 13:00 |
Guidelines
✓ Do
- 날짜(Segmented) → 시간(Slot) 2단 순서 고정
- 마감 슬롯도 보여준다 (숨기면 왜 없는지 모른다)
- 시간은 tabular-nums 정렬
✕ Don't
- 달력 전체를 띄우지 않는다 (가까운 날짜 칩 3~5개)
- 슬롯을 30개 이상 나열하지 않는다 (오전/오후 그룹)
Specification
| 속성 | 토큰/값 | 비고 |
|---|---|---|
슬롯 | radius 7px / 0.74rem | |
선택 | --foreground 반전 | |
마감 | opacity .4 + line-through |
비교
card-06 일정·시간대 선택, xapp-01 예약 시스템의 핵심 요소. Slot vs Seat — 시간이면 Slot, 공간이면 Seat.