오늘은 Calendar 컴포넌트를 구현하는 과정에서 겪었던 문제들에 대한 내용을 적어보고자 한다. 💪!

요구 사항 명세

현재 아래와 같이 Calendar 컴포넌트는 날짜를 선택하는 DatePicker와 시간을 선택하는 TimePicker 크게 2가지로 구성되어 있다.

이를 통해 날짜와 해당 날짜에 대한 시간을 선택하는 컴포넌트를 개발하고자 하였다.

에러 리포트

문제 1. 동적으로 변하는 캘린더 높이 반영이 안되는 문제

TimePicker의 경우 높이를 지정해서 사용하지 않을 경우 다음과 같이 높이가 컨텐츠 높이 만큼 지정되기 때문에 max-height + overflow-scroll 속성을 넣어줄 필요가 있다.

하지만 높이를 딱 지정해서 달력 컴포넌트를 구현할 경우, 달력의 일수 또는 주차수에 따라서 달라지는 DatePicker의 컨텐츠를 이쁘게 표현하기가 어렵다.

주차가 4주차로 구성된 캘린더

주차가 5주차로 구성된 캘린더

주차가 6주차로 구성된 캘린더

따라서 높이를 동적으로 구성해볼 필요가 있다고 판단을 했다.

해결 1. resizeObserver 활용하기

그래서 문제 해결을 위해서 resizeObserver를 이용해서 DatePicker의 높이를 추적하고, 해당 높이를 Calendar 컴포넌트에 style을 지정해서 컴포넌트의 높이를 지정해주는 식으로 정함으로써 문제를 해결할 수 있었다.