# TimeSheet

아래에서 올라오는 시트에서 시각을 고른다. 오전/오후, 시, 분(5분 단위) 세 줄 바퀴를 돌려서 고른다.

- 분류: 입력과 선택
- 가져오기: `import { TimeSheet } from '@/ui/TimeSheet'`
- 코드 위치: `apps/mobile/src/ui/TimeSheet.tsx:58` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/time-sheet

## 미리보기

실제 컴포넌트를 그린 화면은 https://developers.moring.co/tds/components/time-sheet 에서 볼 수 있다. 서비스 색 선택기로 Mordy, Morit 색을 바꿔 볼 수 있다.

## 언제 쓰는가

### 쓴다
- "HH:MM" 형식의 시각 하나를 고를 때 쓴다. 분은 5분 단위다.
- 시트 제목(`title`)에 무엇의 시각인지 쓴다. 예: "알림 시각".

### 쓰지 않는다
- 1분 단위로 정확히 맞춰야 할 때 쓰지 않는다. 5분 단위로만 고른다.
- 시각 범위(시작~끝)를 한 번에 고르는 데 쓰지 않는다. 시트를 두 번 연다.

## 종류

종류가 없다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 바퀴 높이 220 (한 줄 44 × 5줄) | 바퀴 폭은 오전/오후 72, 시 80, 분 80이다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 열림 | `Sheet`가 240ms 동안 올라온다. 가운데 줄에 `segmentTrack` 띠가 깔린다. |
| 바퀴를 돌리는 중 | 가운데 줄의 글자는 `headline`·`text`, 위아래는 `textTertiary`에 투명도가 줄어든다. 칸이 바뀔 때마다 선택 진동. |
| 저장 | 아래 "저장" 버튼(`PrimaryButton`, 화살표 없음)을 누르면 `onSave("HH:MM")`을 부르고 닫힌다. |

## 사용 방법

### 기본

```tsx
import { TimeSheet } from '@/ui/TimeSheet';

<TimeSheet visible={open} value={time} title="알림 시각" onClose={() => setOpen(false)} onSave={setTime} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `visible` | `boolean` | — | 필수 | 시트를 열었는지. |
| `value` | `string` | — | 필수 | 지금 값. `"HH:MM"`(24시간). 분은 가장 가까운 5분으로 맞춘다. |
| `title` | `string` | — | 필수 | 시트 제목. |
| `onClose` | `() => void` | — | 필수 | 닫을 때 호출된다. |
| `onSave` | `(value: string) => void` | — | 필수 | "저장"을 눌렀을 때 새 `"HH:MM"`과 함께 호출된다. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 한 줄 | 높이 44, 5줄 표시, 가운데가 선택 |
| 가운데 띠 | `segmentTrack`, 모서리 `radius.md`(12) |
| 글자 | 가운데 `headline`(`text`), 나머지 `body`(`textTertiary`), 위아래로 갈수록 투명도 0.7 → 0.35 |
| 단위 | 오전/오후 2칸, 시 12칸(12, 1~11), 분 12칸(00~55) |

## 접근성

- 각 바퀴는 `adjustable` 역할이고 "{이름} {값}"을 읽어 준다. 위아래로 쓸면 한 칸씩 바뀐다.
- 웹 미리보기의 바퀴는 키보드로 포커스를 받아 방향키로 스크롤할 수 있다.

## 잘한 예와 잘못한 예

- 잘한 예: 시트 제목에 무엇의 시각인지 쓴다.
- 잘못한 예: 제목 없이 숫자 바퀴만 있으면 무엇을 고르는지 알 수 없다.

## 함께 보는 컴포넌트

- [Sheet](https://developers.moring.co/tds/components/sheet.md): 화면 아래에서 올라오는 시트다. 위쪽 두 모서리가 둥글고, 손잡이와 제목 줄, 닫기 버튼이 있다.
- [Calendar](https://developers.moring.co/tds/components/date-calendar.md): 한 달 달력에서 여러 날짜를 고르는 컴포넌트다. 시험 날짜를 고를 때 쓴다.
- [RangeSlider](https://developers.moring.co/tds/components/range-slider.md): 손잡이 두 개로 정수 범위(시작~끝)를 고르는 슬라이더다. PDF 페이지 범위를 고를 때 쓴다.