특징

캘린더의 각 부분을 별도의 컴포넌트로 분리하여 유지보수성과 재사용성을 높이는 방식으로 설계했습니다.

→ UI·UX를 원하는 대로 확장할 수 있습니다.

요약

캘린더 구조

• 캘린더: ArrowButton + DaysOfMonth
• DaysOfMonth: 요일 + 앞 달 날짜 + 이번 달 날짜(children) + 다음 달 날짜
  • 요일: <DayOfWeek dayOfWeekStyle={dayOfWeekStyle} />
  • 앞 달 날짜: <NotThisMonth daysArray={leadingDays} cellStyle={...} />
  • 다음 달 날짜: <NotThisMonth daysArray={trailingDays} cellStyle={...} />

로직

• 날짜 계산은 getMonthRange 유틸 함수에서 담당
• 전역 상태(useCalendarStore)를 활용해 연·월·일 관리
• 단일 전역 캘린더이므로 페이지 언마운트 시 상태 리셋 필수

캘린더 설계 구조

1. 컴포넌트 구조

캘린더는 크게 헤더와 날짜 그리드로 구성됩니다.

이번 달 날짜는 {children}으로 넘기기 때문에, 기능이나 스타일을 자유롭게 커스텀 할 수 있습니다.