캘린더 라이브러리 제작기 1 - Overall

Seuling·2023년 5월 31일

npm배포 라이브러리 캘린더

캘린더 라이브러리 제작기

목록 보기

1/7

소개

트립비토즈라는 여행사이트를 클론하는 과제를 수행한 적이 있다. (블로그 글도 작성했었다!)
당시 팀프로젝트로 진행을 하였는데, 캘린더 부분을 라이브러리 없이 구현을 했었다.
되게 부족하지만 3개의 큰 컴포넌트로 구현되었었기에, 이부분을 가져와서 언제든지 import해서 사용할 수 있으면 나만의 라이브러리가 되지않을까? 라는 생각에서부터 시작하게 되었다.

프로젝트 개요

리액트로 만든 달력 라이브러리이며, 사용자 입력에 따른 캘린더 뷰의 개수를 조정할 수 있고, 특히 체크인 / 체크아웃 기능이 포함되어 있다.

개발 과정

처음 라이브러리를 만들어봐야한다 생각했을 때, 일단 검색해보았다.
create react component library
최소한의 번들을 위해 Create React App 미사용
- webpack 혹은 Rollup을 사용한다.
- 더 찾아보니, webpack 대신 rollup을 더 많이 사용한다.
- why ?? 웹팩은 애플리케이션을 번들링할때 주로 사용, 롤업은 라이브러리를 번들링할 때 주로 사용
일단은 vite로 리액트를 로컬에서만 돌아가게 먼저 구현을 해보았다.
하나의 팀 프로젝트 내의 캘린더 컴포넌트만 분리한다는것 자체가 쉽지않았다.
- 1년전의 코드이기에 내가 짠 코드도 정말 새로웠기 때문이다.
- 여기서 느낀점은, 정말 쉽게 이해할 수 있는 코드가 좋은 코드라는것...
그리고 나서 이제 사용자 경험을 생각해보았다. 내가 이 캘린더를 다운받아서 사용한다면 뭐가 필요하지?
- 옵션 : 언어, 캘린더 뷰 개수, 체크인 체크아웃 날짜를 받아올 수 있는 함수, 스타일(색상, 크기, ...)
그렇다면 캘린더로 유명한 다른 라이브러리에서는 어떻게하는지 부터 보기위해 github에서 코드를 확인하였다.
- react-dates vs react-calendar
- react-dates 는 모든 함수를 utils로 분리하였고, react-calendar는 shareds로 분리하였다.
- react-dates 는 moment 를 사용하였고, , react-calendar는 @wojtekmaj/date-utils를 사용하였다.
- 나는 보통 utils에 날짜계산하는 로직을 넣었는데 보니까 처음에 Date 객체로 계산해서 날짜를 계산해주었다. 하지만 좀더 범용적인 사용을 생각해보면 시간을 좀 더 정확하게 오차없이 하기위해 Dayjs 와 같은 라이브러리를 사용해야겠다고 생각하고, 적용해보니 원래 필요했던 utils함수가 필요없어졌다.
- 예를들자면, addMonthDate -> dayjs().add(7, "day"),
```
export const addMonthDate = (date: Date, num: number): Date => {
const newDate = new Date(date);
newDate.setMonth(newDate.getMonth() + num);
return newDate;
}; 
																				``` 
```

주요 기능

기술스택

react, styled-components, TypeScript

주요 기능

체크 인/아웃 날짜를 선택할 수 있는 캘린더 구현
오늘 날짜부터 12개월까지 보여지는 캘린더를 구현
이번달의 지난날은 모두 선택되지 않아야 함
처음 캘린더를 선택할 때 default로 일주일 뒤 1박으로 체크인 되도록 함
처음 선택한 날이 체크인이 되며 두 번째 선택한 날이 체크아웃으로 설정됨
처음 선택한 날보다 이전 날짜를 선택한 경우 처음 선택한 날짜가 초기화 되고 두 번째 선택한 날짜가 체크인으로 됨
시작일(체크인)과 종료일(체크아웃) 날짜는 highlighting 되며 체크인과 체크아웃 사이의 날짜도 동일하게 highlighting 됨
시작일(체크인)과 종료일(체크아웃)을 선택한 상태에서 다른 날짜를 선택하면 기존 선택값은 초기화 되며, 선택한 다른 날짜가 시작일(체크인)이 됨
Props로 확장성 넓히기

사용법

npm install react-check-in-out-calendar

yarn

yarn add react-check-in-out-calendar

import { Calendar } from "react-check-in-out-calendar";

function App() {
  return (
    <Calendar
      mainColor="#ff6347"
      subMainColor="#ffa07a"
      startDay={0}
      numMonths={2}
      language="ko"
      maximumMonths={12}
      defaultCheckIn="2023-06-01"
      defaultCheckOut="2023-06-15"
      isRectangular={true}
      onCheckInOutChange={(checkInDate, checkOutDate) => {
        console.log("Check-in: ", checkInDate, " Check-out: ", checkOutDate);
      }}
    />
  );
}