Make Calendar without Calendar library (@date-fns)

편하게 라이브러리 쓰고싶었는데 내가 원하지 않는 모양 쓰기 싫어서 ㄱ-

 

일단 utils/calendar/getCalendarDate.ts 를 만들고 그 안에 날짜 계산하는 함수를 작성한다. 

@date-fns 라이브러리를 사용한 건 처음이라 많은 코드를 구경했고.. 그중에 한 달의 날짜를 주별로 나누어 배열로 반환하는 함수를 작성 한 걸 분석해서 타입을 추가해서 작성했다. 기억이 잘 안나는데 벨로그 글이었던 듯? 제일 이해하기 편하게 작성하셔서 참고해 작성했다.

@date-fns 메서드는 공식 문서랑 구글링 번갈아가면서 찾아 사용함 !! 

// 주를 반환
function takeWeek(selectedDate: Date = new Date()): () => Date[] {
  let date: Date = startOfWeek(startOfDay(selectedDate))
  return function (): Date[] {
    const week: Date[] = [...Array(7)].map((_, idx) => addDays(date, idx))
    date = addDays(week[6], 1)
    return week
  }
}  

// 마지막 주의 마지막 날을 반환
function lastDay(range: Date[][]): Date | null {
  if (range.length === 0) {
    return null
  }
  const lastWeek = range[range.length - 1]
  if (lastWeek.length < 7) {
    return null
  }
  return lastWeek[6]
}

// 위의 함수를 사용해서 달을 주 별로 나누고 배열로 반환
export default function takeMonth(startDate: Date = new Date()): () => Date[][] {
  let month: Date[][] = []
  let date: Date = startDate
  return function (): Date[][] {
    const weekGen = takeWeek(startOfMonth(date))
    const endDate: Date = startOfDay(endOfMonth(date))

    while (lastDay(month)! < endDate) {
      month.push(weekGen())
    }

    const range: Date[][] = month
    month = []
    date = addDays(lastDay(range)!, 1)

    return range
  }
}

 

 

그리고 Calendar 페이지에 사용할 컴포넌트로 CalendarList, CalendarItem로 나눠 분리했다.

 

처음에는 CalendarList에 캘린더에 필요한 모든 걸 몰빵해서 넣었는데, 쓰다보니 이후 추가할 CRUD 기능에 태스크 갯수까지 반환하도록 넣으면 엄청나게 코드가 길어질 것 같았다.

 

일단 CalendarList >>

여기서도 투두리스트 페이지에서 당일의 데이터를 가져오던 것처럼 fetchTaskMonth라는 상태관리 함수를 따로 작성하고 useEffect로 currentDate가 변경될 때마다 currentDate에 해당하는 데이터를 가져오도록 했다. 

const CalendarList = () => {
  const toggleSidebar = useToggleSidebar(state => state.toggleSidebar)
  const [currentDate, setCurrentDate] = useState(new Date())
  const fetchTaskMonth = useTaskStore(state => state.fetchTaskMonth)
  
  const prevMonth = useCallback(() => {
    const minusMonth = subMonths(currentDate, 1)
    setCurrentDate(minusMonth)
    fetchTaskMonth(minusMonth)
  }, [currentDate, fetchTaskMonth])

  const nextMonth = useCallback(() => {
    const addMonth = addMonths(currentDate, 1)
    setCurrentDate(addMonth)
    fetchTaskMonth(addMonth)
  }, [currentDate, fetchTaskMonth])


  useEffect(() => {
    fetchTaskMonth(currentDate)
  }, [currentDate, fetchTaskMonth])

  return (
    <>
      <div>
        <div>
          <div>
            <button onClick={toggleSidebar}>
              <Image src={ThreeLine} alt="line" style={{ width: 20, height: 16 }} />
            </button>
            <div>Calendar</div>
          </div>

          <div>
            <button onClick={prevMonth} className="text-neutral-600">
              {'< '}prev
            </button>
            <h1>{format(currentDate, 'MMMM yyyy')}</h1>
            <button onClick={nextMonth}>
              next {' >'}
            </button>
          </div>

          <div>
            <WeekNames /> // 월화수목금토일
            <CalendarItem currentDate={currentDate} /> // CalendterItem 컴포넌트에 현재 보여지는 date를 (default는 사용자의 로컬 세팅된 연월일) props로 전달해서 컴포넌트 내에서 달력 전환이 될 수 있도록 함
          </div>
        </div>
      </div>
    </>
  )
}

export default CalendarList

 

 

WeekNames는 요일 택을 분리시켜둔거임 >일월화수목금토<

 

그리고 CalendarItem에 currentDate를 props로 전달해서 저 날짜를 due_date로 task를 작성할 수 있도록 했다.

default 값은 사용자 로컬 기준 날짜로 설정해두었다! prevMonth 버튼과 nextMonth 버튼으로 날짜가 이동되었을 때 해당 값으로 currentDate를 변경하고 이 값은 props로 CalendarItem에 전달된다.

 

interface CalendarItemProps {
  currentDate: Date
}

const CalendarItem: React.FC<CalendarItemProps> = ({ currentDate }) => {
  const viewTask = useViewTaskModalState()
// const editTask = useEditTaskModalState()
// const deleteTask = useTaskStore(state => state.deleteTask)
  const { changeModalState } = useModalActions()
  const fetchTaskSelected = useTaskStore(state => state.fetchTaskSelected)
  const fetchTaskMonth = useTaskStore(state => state.fetchTaskMonth)
  const tasks = useTaskStore(state => state.tasks)

  const [selectedTask, setSelectedTask] = useState<Task | null>(null)
  const dateData = takeMonth(currentDate)()
  const [selectedDate, setSelectedDate] = useState(currentDate)

  const selectDateItem = useCallback(
    (date: Date) => {
      setSelectedDate(date)
 	if (!viewTask) {
        changeModalState('view', true)
      }
    },
    [viewTask, changeModalState, fetchTaskSelected],
  )
  
  useEffect(() => {
    fetchTaskMonth(currentDate)
  }, [currentDate, fetchTaskMonth])

  useEffect(() => {
    if (viewTask || editTask) {
      document.body.style.overflow = 'hidden'
    } else {
      document.body.style.overflow = ''
    }
    return () => {
      document.body.style.overflow = ''
    }
  }, [viewTask, editTask])

  const getTaskCountForDate = (date: Date) => {
    return tasks.filter(task => {
      const taskDate = new Date(task.due_date)
      return (
        taskDate.getDate() === date.getDate() &&
        taskDate.getMonth() === date.getMonth() &&
        taskDate.getFullYear() === date.getFullYear()
      )
    }).length
  }

  return (
    <div>
      {dateData.map((week, index) => (
        <div key={index}>
          {week.map(day => {
            const taskCount = getTaskCountForDate(day)
            const isCurrentMonth = isSameMonth(day, currentDate)
            return (
              <div
                onClick={() => selectDateItem(day)}
                key={format(day, 'yyyy-MM-dd')}>
                <div>
                  <button>{format(day, 'd')}</button>
                  {taskCount > 0 && (
                    <div>
                      {taskCount}
                    </div>
                  )}
                </div>
              </div>
            )
          })}
        </div>
      ))}
      <Modal>
        {viewTask && selectedTask ? (
          <div>
            {editTask ? ( // edit 아직안됨
              <TaskForm
                initialTitle={selectedTask.todo_title}
                initialDetail={selectedTask.todo_detail}
                taskId={selectedTask.todo_id}
                dueDate={selectedTask.due_date}
              />
            ) : (
              <div>
                <div>
                  <div>{selectedTask.todo_title}</div>
                </div>
                <div>
                  <div>{selectedTask.todo_detail}</div>
                </div>
                <div>
                  <button
                    onClick={() => deleteTaskBtn(selectedTask.todo_id)}>
                    <Image
                      src={RemoveIcon}
                      alt="delete button" />
                  </button>
                  <button
                    onClick={editTaskBtn}>
                    <Image src={EditIcon} alt="edit button" />
                  </button>
                </div>
              </div>
            )}
          </div>
        ) : (
          <TaskForm dueDate={selectedDate} />
        )}
      </Modal>
    </div>
  )
}

export default CalendarItem

 

요래요래하면 캘린더 페이지에서 태스크 등록이 가능하고, 일자별 태스크 갯수를 확인할 수 있다.

 

지금 화면은 대충 이런 너낌.. 

 

일자별 태스크 갯수 띄우는거 ㄹㅇ 어려웠다 ㅜ 머릿속에는 어떤 식으로 필터링하면 되겠다고 생각은 드는데 정작 구현하는 방법이 생각이 안나서 docs에 이거 필터링 하는 방법 없나 뒤지고......... 며칠 손 놓고 있다가 구글링해서 필터링함 근데 저거 숫자 말고 감성 마케팅으로그냥 점으로 표기할까도 생각중이다 숫자?...직관적이야

페이지가 아직 완성된 부분이 아니라서 이후에 계속 변할 거 같은데 어쨌든 이런 식으로 작성하면 되는 구나~를 배웠다.

 

 

 

@date-fns도 어떤 날짜 라이브러리 사용할까 서치하다가 다른 유명한 녀석은 더이상 업데이트 안한다고 했길래 이 녀석으로 골랐는데, 사용하기 편하다! 좋은 경험으로 남아서 다음에도 기회가 있다면 사용할듯..

 

여기서 더 해야 하는 거는 일자 클릭하면 모달이 열리는데 

- 등록된 태스크가 없으면 create modal >

- 등록된 태스크가 있으면 view modal >

   등록되어 있는 태스크들을 (모달 내에서) 제목+내용으로 읽을 수 있고, 오른쪽 사이드에 점 세개 아이콘 누르면 edit, 하단의 select delete 버튼 추가해서 선택 삭제 기능

 

요렇게 하면 원하던 기본 기능은 끝난다. 모달 생김새 정돈 좀 하고 태그 기능 추가하면 내가 원하던 녀석들을 다 넣는 것... 킵고잉