[React] React calendar 라이브러리 (react-day-picker) 사용하여 날짜 선택하기

react-calendar는 ts가 더이상 지원이 안되서 다른 걸 사용하기로 했다.
react-day-picker를 사용하기로!!
npm 링크

구현하고자 하는 기능

1V. 날짜 선택하여 현재 보여줄 일자 바꾸기 -> atom & onSelect 대신 onDayClick 사용 (커스텀 핸들러 쓰기위해)
2V. 클릭된 날짜 체크하기 -> selected 사용
3V. 이전 날짜까지 다 보이게 -> showOutsideDays props 전달
4V. 월요일부터 시작하게 -> weekStartsOn={1}
5. 주말은 글자색 다르게

실제 코드

import { useState } from "react";
import { useSetRecoilState } from "recoil";
import { DayPicker } from "react-day-picker";
import "react-day-picker/dist/style.css";
import { selectedDateState } from "../../models/atoms";

const css = `
  .my-selected {
    background-color: #78b4d7ba;
    border-radius: 20%;
    color: white;
  }
  .my-selected:hover:not([disabled]) { 
    color: black;
  }
  .my-outside {
    color: #ABCBFC;
  }
`;

function ShowCalendar() {
  const [pickedDate, setPickedDate] = useState<Date>();
  const setselectedDateState = useSetRecoilState(selectedDateState);
  const handleDayClick = (day: Date) => {
    setPickedDate(day);
    setselectedDateState(day);
  };

  return (
    <div>
      <style>{css}</style>
      <DayPicker
        mode="single" // single day can be selected
        showOutsideDays // show outside dates
        weekStartsOn={1} // start Mon
        selected={pickedDate}
        onDayClick={handleDayClick}
        modifiersClassNames={{
          selected: "my-selected",
          outside: "my-outside",
        }}
      />
    </div>
  );
}

export default ShowCalendar;