스크린샷 2026-01-27 오후 9.23.07.png

스크린샷 2026-01-27 오후 9.23.14.png

본 컴포넌트는 Compound Components 패턴을 적용하여 스타일과 레이아웃 구조를 자유롭게 커스텀할 수 있도록 설계되었습니다. 상위 컴포넌트인 CalendarRoot에서 상태를 관리하며, 하위 컴포넌트들을 조합하여 원하는 형태의 캘린더를 구성할 수 있습니다.

✅ 컴포넌트 구조

파일명	유형	주요 역할
Calendar.tsx	Client	Context API를 기반으로 헤더, 그리드, 날짜를 조립하여 사용하는 캘린더 컴포넌트

각 UI 요소(Header, Grid, Days)가 분리되어 있어 프로젝트의 요구사항에 맞춰 배치 순서를 변경하거나 스타일을 추가하기 용이합니다.
날짜 계산 로직과 UI 렌더링을 분리하여 유지보수성을 높였습니다.

✅ 컴포넌트 Props

1. CalendarRoot

전체 캘린더의 컨테이너이며 Context를 제공합니다.

props	설명
`selectedDate?: Date`	선택된 날짜 값입니다.
`onDateSelect?: (date: Date) => void`	날짜 선택 시 실행되는 핸들러입니다.
`className?: string`	컨테이너 스타일을 커스텀할 수 있습니다.

2. CalendarHeader

년/월 표시 및 이전/다음 달 이동 기능을 담당합니다.

props	설명
`className?: string`	헤더 컨테이너 스타일을 커스텀할 수 있습니다.
`btnClassName?: string`	이동 버튼 전용 스타일을 커스텀할 수 있습니다.

3. CalendarGrid

요일 표시줄과 날짜들이 배치될 그리드 레이아웃을 생성합니다.

props	설명
`className?: string`	그리드 컨테이너 스타일을 커스텀할 수 있습니다.

✅ 컴포넌트 구조

✅ 컴포넌트 Props

1. CalendarRoot

2. CalendarHeader

3. CalendarGrid

✅ 사용 예시

1. 일반적인 사용 (기본 레이아웃)