찍찍이 #데이터 관리, 달력 설정 (Zustand, react-day-picker)

박기범·2024년 12월 8일

react-day-picker 프로젝트

찍찍이 - 일정관리 커뮤니티

목록 보기

12/26

이전 시간에 진행하였던 할일 모달 리팩토링의 추가 작업을 진행하였습니다.

해야할 일

TodoModal 기간 설정에 관한 드롭다운 적용

react-day-picker 도입 (범위 설정 용이)

캘린더 디자인 및 범위 데이터 불러오기

Data store 만들기 (zustand)

내용

TodoModal 기간 설정에 관한 드롭다운 적용 및 react-day-picker 도입

TodoModal 기간에 관한 컴포넌트 하위에 캘린더 드롭다운 컴포넌트 생성 및 상태(열림/닫힘) 연동 + 애니메이션 적용

범위 설정 용이한 + 시간 단축을 위해 react-day-picker 라이브러리 도입!!
react-day-picker 라이브러리
-> 각종 mode를 설정 가능 (single,multi,range)

라이브러리 내장 기능을 통해 다양한 기능 적용
disabled : 선택된 날짜/현재 날짜 이전의 값을 disabled, 요구사항에 따라 선택된 날짜 포함 30일까지 선택되도록
selected : 선택한 범위 값
onSelect : 선택 값 적용 함수

<DayPicker
        mode="range"
        selected={selected}
        onSelect={onSelectRange}
        disabled={{
          before: selected?.from || new Date(),
          after: new Date(
            (selected?.from || new Date()).getFullYear(),
            (selected?.from || new Date()).getMonth(),
            (selected?.from || new Date()).getDate() + 29,
          ),
        }}
      />

캘린더 디자인 및 범위 데이터 불러오기

TMI) react-day-picker 라이브러리에서 범위에 관한 데이터 타입 제공
import { DateRange } from 'react-day-picker';

우선 디자인 같은 경우는 커스텀으로 할 수 있는데 추후 디자인이 정해지면 할 예정

DayPicker를 사용한 하위 컴포넌트 캘린더 드롭다운 -> 상위 컴포넌트 할일 모달 기간 으로 selected, onSelectRange props 전달!!

범위 날짜 변환 유틸함수를 분리 및 적용하여 UX 개선

Data store 만들기 (zustand)

Zustand를 이용한 할일 data store 생성
파일 같은 경우는 우선적으로 파일명 (string)으로 받도록 해줌.
reset함수 추가

각 input 컴포넌트 별로 set 적용 (zustand) 및 모달 닫힘/파일링크 토글변환 조건에 따른 reset 함수 적용

//todoModal
  const { resetAll } = useTodoDataStore();
  const handleClose = () => {
    close();
    resetAll();
  };
//todoModalDocs
 const onClickFileChip = () => {
    setIsFileActive((prev) => !prev);
    setIsLinkActive((prev) => !prev);
    resetLink();
  };
  const onClickLinkChip = () => {
    setIsFileActive((prev) => !prev);
    setIsLinkActive((prev) => !prev);
    resetFileName();
  };