Web - DatePicker (Added in 2.2)

Added in 2.2

Definition

정의	DatePicker
최적화 대상	Desktop Mobile
기획 배포	진행 중
디자인 가이드 배포	진행 중
개발 코드 배포	진행 중

Principle

DatePicker는 사용자가 특정 날짜 또는 기간을 손쉽게 선택할 수 있도록 돕습니다.

예약, 신청, 일정 설정 등 시간 기반의 행위가 필요한 모든 제품에서 사용되며, 정확하고 직관적인 날짜 선택 경험을 제공해야할 때 사용합니다.

주의 시작이 일요일인 경우

일정 중심. 예약 시스템 - 대부분은 일요일로 시작하면 됨

주의 시작이 월요일인 경우

강의 대시보드와 같이 일주일 단위의 데이터를 보여줘야할 때 (ex. 이번주 학습 시간)
학습 플래너와 같이 주 단위 과제 확인할 때

Spec

헤더 영역

요일 영역

날짜 영역

텍스트

Web - TextLabel 참고
- styleTheme : body2Bold
- textAlign : center

아이콘 버튼

Web - IconButton 참고
- baseSize : medium
- baseColorKey : ui_cpnt_button_fill_base_transparent
- iconName
  - ic_arrow_left
  - ic_arrow_right
- iconSize : 16
- iconColorKey : ui_cpnt_icon_sys_grey_01

텍스트

Web - TextLabel 참고
- styleTheme : caption2Bold
- colorTheme : sysTextSecondary
- textAlign : center

면적 영역

32x32px

텍스트

Web - TextLabel 참고
- styleTheme : caption1Regular
- colorTheme
  - 현재 달 : sysTextPrimary
  - 이전 달 : sysTextSeconary
  - 선택 불가 : sysTextTertiary
- textAlign : center

면적 영역

32x32px
radius : 10px
선택 후 : (유저 브랜드 컬러키)
선택 전 : 투명

선택과 선택 사이 표현 면적 영역

유저 컬러 opacity 10%

오늘 표시 영역

15x15px
원형
컬러 : ui_cpnt_sheet_base_02

Properties

type*

날짜 선택 유형을 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'single'`

Enum Values Description
`'single'`	단일 날짜를 선택합니다.
`'range'`	날짜 범위를 선택합니다.

date*

날짜에 대한 스트링 값입니다.

기획 지시사항

기획서 상 작성 방법 : 텍스트만 기술

Type	`number \| string \| object \| Array<string \| object> \| undefined \| null`
Default	-

endDate

type : range일 때 기간 표현을 위한 날짜 스트링입니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`number \| string \| object \| Array<string \| object> \| undefined \| null`
Default	-

minDate

날짜 선택 최소값입니다.

기획 지시사항

기획서 상 작성 방법 : 텍스트만 기술

Type	`number \| string \| object \| Array<string \| object> \| undefined \| null`
Default	-

maxDate

날짜 선택 최대값입니다.

기획 지시사항

기획서 상 작성 방법 : 텍스트만 기술

Type	`number \| string \| object \| Array<string \| object> \| undefined \| null`
Default	-

startOfWeek

시작 요일을 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'sunday'`

Enum Values Description
`'sunday'`	일요일부터 시작합니다.
`'monday'`	월요일부터 시작합니다.

timePickerMode

시간에 대한 사용여부를 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	시간 없이 날짜만 선택합니다.
`'use'`	시간을 시/분까지 선택 가능합니다. ('초'는 아직 유즈케이스 없음)

quickActionMode

오늘에 해당하는 날짜로 빠르게 이동할 수 있는 버튼을 표시합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	사용하지 않음
`'use'`	사용함

quickActionBtnText

버튼의 텍스트 값입니다.

기획 지시사항

기획서 상 작성 방법 : 텍스트만 기술

Type	`number \| string \| object \| Array<string \| object> \| undefined \| null`
Default	-

quickNavigationMode

특정 연도/날짜로 빠르게 이동할 수 있는 버튼을 표시합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	사용하지 않음
`'use'`	사용함

onChange

데이터가 변경되는 시점에 이벤트를 부여합니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`(e: React.ChangeEvent<HTMLSelectElement>) => void`
Default	-

id

?

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`?`
Default	-

문서 작성 정보

소유자 / 관리자	김혜진, 박윤규
변경 이력	2025/09/05 : quickNavigationMode 추가 - 김혜진 2025/04/24 : 문서 최초 작성 - 김혜진