Calendar

날짜를 선택할 수 있는 월 단위 달력 컴포넌트

개요

Calendar 컴포넌트는 react-day-picker 기반으로 월별 달력을 표시하고 날짜 선택 기능을 제공합니다. 단일 선택, 다중 선택, 범위 선택 모드를 지원하며, 드롭다운 기반 월/년 탐색과 비활성화 날짜 설정이 가능합니다.

주요 특징

• ✅ 선택 모드: single, multiple, range 선택 모드 지원
• ✅ 월/년 탐색: captionLayout으로 label 또는 dropdown 탐색 방식 선택
• ✅ 범위 선택: range 모드로 시작일/종료일 범위 지정
• ✅ 비활성화: disabled로 특정 날짜 또는 전체 선택 제한
• ✅ 로케일: locale prop으로 다국어 지원
• ✅ 디자인 토큰: 테마 커스터마이징 지원

사용 예시

기본 사용

단일 날짜 선택 모드입니다. 날짜를 클릭하면 선택됩니다.

const [date, setDate] = useState<Date | undefined>(new Date())
 
<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
/>

범위 선택

mode="range"로 시작일과 종료일을 선택합니다.

const [range, setRange] = useState<DateRange | undefined>()
 
<Calendar
  mode="range"
  selected={range}
  onSelect={setRange}
/>

드롭다운 네비게이션

captionLayout="dropdown"으로 월/년을 드롭다운에서 빠르게 선택합니다.

<Calendar mode="single" captionLayout="dropdown" />

비활성화

disabled로 날짜 선택을 비활성화합니다.

// 전체 비활성화
<Calendar mode="single" disabled />
 
// 특정 날짜 비활성화 (react-day-picker Matcher)
<Calendar mode="single" disabled={{ before: new Date() }} />

API Reference

Calendar Props

react-day-picker의 DayPicker props를 모두 상속합니다.

기본 사용법

import { Calendar } from "@vortex/ui-foundation"
 
// 단일 선택
<Calendar mode="single" selected={date} onSelect={setDate} />
 
// 범위 선택
<Calendar mode="range" selected={range} onSelect={setRange} />
 
// 드롭다운 네비게이션
<Calendar mode="single" captionLayout="dropdown" />

접근성

시맨틱 마크업

• react-day-picker 기반으로 달력 그리드에 role="grid" 적용
• 선택된 날짜에 aria-selected 속성 자동 전달
• 비활성화된 날짜에 aria-disabled 속성 적용

키보드 지원

• ✅ 방향키로 날짜 간 이동
• ✅ Enter / Space로 날짜 선택
• ✅ Page Up / Page Down으로 월 이동

관련 컴포넌트

• DatePicker: 입력 필드와 결합된 날짜 선택 컴포넌트
• FullCalendar: 월/주/일 뷰를 제공하는 일정 관리 캘린더
• TimePicker: 시간 선택 컴포넌트