본문으로 건너뛰기
TDSMoring 디자인 시스템

TimeSheet

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

이 페이지의 목차
분류
입력과 선택
가져오기
import { TimeSheet } from '@/ui/TimeSheet'
코드 위치
apps/mobile/src/ui/TimeSheet.tsx:58

미리보기#

실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.

알림 시각
오전
오후
12시
1시
2시
3시
4시
5시
6시
7시
8시
9시
10시
11시
00분
05분
10분
15분
20분
25분
30분
35분
40분
45분
50분
55분
바퀴를 돌려 보기

언제 쓰는가#

쓴다

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

쓰지 않는다

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

종류#

종류가 없다.

크기#

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

상태#

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

사용 방법#

기본

기본
import { TimeSheet } from '@/ui/TimeSheet';

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

속성(props)#

TimeSheet 속성
이름타입기본값필수설명
visibleboolean—필수시트를 열었는지.
valuestring—필수지금 값. "HH:MM"(24시간). 분은 가장 가까운 5분으로 맞춘다.
titlestring—필수시트 제목.
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 역할이고 "{이름} {값}"을 읽어 준다. 위아래로 쓸면 한 칸씩 바뀐다.
  • 웹 미리보기의 바퀴는 키보드로 포커스를 받아 방향키로 스크롤할 수 있다.

잘한 예와 잘못한 예#

알림 시각
잘한 예시트 제목에 무엇의 시각인지 쓴다.
오전
오후
12시
1시
2시
3시
4시
5시
6시
7시
8시
9시
10시
11시
00분
05분
10분
15분
20분
25분
30분
35분
40분
45분
50분
55분
잘못한 예제목 없이 숫자 바퀴만 있으면 무엇을 고르는지 알 수 없다.
  • Sheet: 화면 아래에서 올라오는 시트다. 위쪽 두 모서리가 둥글고, 손잡이와 제목 줄, 닫기 버튼이 있다.
  • Calendar: 한 달 달력에서 여러 날짜를 고르는 컴포넌트다. 시험 날짜를 고를 때 쓴다.
  • RangeSlider: 손잡이 두 개로 정수 범위(시작~끝)를 고르는 슬라이더다. PDF 페이지 범위를 고를 때 쓴다.