
서론이번에 진행하는 프로젝트에서 공통 컴포넌트 설계를 맡아 진행하였습니다. 그중 검색 페이지에서 기간 선택을 하는 기능이 있어 캘린더 컴포넌트가 필요하여 캘린더 컴포넌트를 제작할 일이 생겼습니다. 라이브러리를 사용해서 구현할 수 있으나 상담 부분 커스텀이 필요하였고, 커스텀하였을 때 결과가 원하는 디자인대로 나올지 또한 의문이었습니다. 또 한 번 만들어두면 나중에 사용할 일이 있을 거 같아서...ㅎㅎ 직접 구현하기로 결정하였습니다. 사용한 기술스택- TypeScript- React- Styled-components- date-fns 폴더 구조├── calendar│ ├── CalendarLayout.tsx│ ├── CommonStyle.ts │ ├── DateButton.tsx│ ├..