프론트엔드
React와 Day.js를 활용한 공수 캘린더 직접 구현하기
두줄요약
React와 Day.js로 공수·메모 등 날짜별 정보를 담는 재사용 가능한 캘린더를 구현했습니다.\n날짜 계산과 UI를 분리하고 빈칸 배열 및 CSS Grid 정렬의 중요성을 설명합니다.
구조와 흐름
- CustomCalendar의 전체 상태·화면 구성, CalendarMonthGrid의 월 렌더링, buildWeeks의 날짜 배열 생성 역할 분리
- 날짜별 공수·금액·휴일·메모를 선택 속성의 CalendarDayData로 정의하고
YYYY-MM-DD키 기반 조회 - 월 첫날 이전 빈칸과 월별 날짜를 생성한 뒤 7개 단위의 주 배열로 변환
선택 이유
- Day.js의
startOf,daysInMonth,day,date,format,add,isSame활용을 통한 날짜 계산 조건 분기 축소 - 불변 날짜 연산 기반의 월 이동 및 React 상태 변경 흐름 명확화
- 날짜 계산 로직과 UI 표현 분리를 통한 수정 범위 축소
주의할 점
- 데이터 저장·조회 구간의 날짜 키 형식 통일 필요
- 빈 날짜 칸 미렌더링 시 실제 날짜의 요일 위치 이동 가능성
- 마지막 주 뒤쪽 빈칸 부재에 따른 행 길이 불일치와 CSS 레이아웃 영향
적용해볼 점
- CSS Grid의 7열 고정과 빈칸 포함 렌더링으로 요일별 날짜 위치 유지
- 정렬 문제 발생 시 CSS뿐 아니라 주 단위 날짜 배열과 빈칸 구성 함께 점검
