(#246) monthViewWithData 컴포넌트 설계 변경

Author: ldg-96

src/components/commons/exerciseCalendar/exerciseCalendar.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useQueryState } from 'nuqs'
 import { useState, useMemo, useRef, forwardRef } from 'react'
 import { startOfMonth, subMonths, addMonths, format } from 'date-fns'
 import { ko } from 'date-fns/locale'
@@ -31,6 +32,7 @@ const ExerciseCalendar = forwardRef<HTMLDivElement, Props>(
     },
     ref,
   ) => {
+    const [memberId] = useQueryState('memberId')
     const today = new Date()
     const [currentMonth, setCurrentMonth] = useState<Date>(startOfMonth(today))
     const prevMonth = useMemo(() => subMonths(currentMonth, 1), [currentMonth])
@@ -149,6 +151,7 @@ const ExerciseCalendar = forwardRef<HTMLDivElement, Props>(
               isReadOnly={isReadOnly}
               isOthers={isOthers}
               showStamps={showStamps}
+              memberId={memberId ?? undefined}
             />
             <MonthViewWithData
               today={today}
@@ -159,6 +162,7 @@ const ExerciseCalendar = forwardRef<HTMLDivElement, Props>(
               isReadOnly={isReadOnly}
               isOthers={isOthers}
               showStamps={showStamps}
+              memberId={memberId ?? undefined}
             />
             <MonthViewWithData
               today={today}
@@ -169,6 +173,7 @@ const ExerciseCalendar = forwardRef<HTMLDivElement, Props>(
               isReadOnly={isReadOnly}
               isOthers={isOthers}
               showStamps={showStamps}
+              memberId={memberId ?? undefined}
             />
           </animated.div>
         </div>

src/components/commons/exerciseCalendar/monthView.tsx

@@ -3,6 +3,8 @@
 import { memo, useMemo, useRef } from 'react'
 
 import {
+  eachWeekOfInterval,
+  eachDayOfInterval,
   format,
   isSameMonth,
   isSameDay,
@@ -48,19 +50,22 @@ const MonthView = memo(function MonthView({
   }, [counts])
 
   const weeks = useMemo(() => {
-    const gridStart = startOfWeek(startOfMonth(month), { weekStartsOn: 0 })
-    const gridEnd = endOfWeek(endOfMonth(month), { weekStartsOn: 0 })
-    const newWeeks: Date[][] = []
-    let cursor = gridStart
-    while (cursor <= gridEnd) {
-      const days: Date[] = []
-      for (let i = 0; i < 7; i++) {
-        days.push(cursor)
-        cursor = addDays(cursor, 1)
-      }
-      newWeeks.push(days)
-    }
-    return newWeeks
+    const monthStart = startOfMonth(month)
+    const monthEnd = endOfMonth(month)
+    const gridStart = startOfWeek(monthStart, { weekStartsOn: 0 })
+    const gridEnd = endOfWeek(monthEnd, { weekStartsOn: 0 })
+
+    const weekStarts = eachWeekOfInterval(
+      { start: gridStart, end: gridEnd },
+      { weekStartsOn: 0 },
+    )
+
+    return weekStarts.map((weekStart) =>
+      eachDayOfInterval({
+        start: weekStart,
+        end: addDays(weekStart, 6),
+      }),
+    )
   }, [month])
 
   return (
@@ -87,7 +92,7 @@ const MonthView = memo(function MonthView({
                   !isCurrent && styles['empty'],
                   isFuture && styles['disabled'],
                   isSelected && styles['selected'],
-                  !showStamps && styles['is-picker']
+                  !showStamps && styles['is-picker'],
                 )}
                 onClick={() => {
                   if (!isCurrent || isFuture || isReadOnly) return

src/components/commons/exerciseCalendar/monthViewWithData.tsx

@@ -1,12 +1,6 @@
 'use client'
 
-import { useQueryState } from 'nuqs'
-import useSWR from 'swr'
-import { format, isSameMonth, startOfMonth, endOfMonth } from 'date-fns'
-
-import { useReadExerciseRange } from '@/hooks/api/useExerciseApi'
-import { useReadMemberExerciseRange } from '@/hooks/api/useMemberApi'
-import { ExerciseRange } from '@/types/exercise'
+import { useExerciseCalendarData } from '@/hooks/useExerciseCalendar'
 
 import MonthView from './monthView'
 import styles from './monthViewWithData.module.css'
@@ -20,6 +14,7 @@ type Props = {
   isReadOnly: boolean
   isOthers: boolean
   showStamps: boolean
+  memberId?: string
 }
 
 const MonthViewWithData = ({
@@ -31,38 +26,16 @@ const MonthViewWithData = ({
   isReadOnly,
   isOthers,
   showStamps,
+  memberId,
 }: Props) => {
-  const isFutureMonth = monthToShow.getTime() > startOfMonth(today).getTime()
-  const shouldFetch = !isFutureMonth && isActive && showStamps
-  const startDate = format(startOfMonth(monthToShow), 'yyyy-MM-dd')
-  const endDate = isSameMonth(monthToShow, today)
-    ? format(today, 'yyyy-MM-dd')
-    : format(endOfMonth(monthToShow), 'yyyy-MM-dd')
-  const [memberId] = useQueryState('memberId')
-  const { data: myData } = useReadExerciseRange(
-    startDate,
-    endDate,
-    shouldFetch && !isOthers,
-  )
-  const { data: othersData } = useReadMemberExerciseRange(
-    memberId!,
-    startDate,
-    endDate,
-    shouldFetch && isOthers,
-  )
-  const fetchedData = isOthers ? othersData : myData
-  const swrKey = isOthers
-    ? ['member/exerciseRange', memberId, startDate.substring(0, 7)]
-    : ['exercise/range', startDate.substring(0, 7)]
-  const { data: cachedData } = useSWR<ExerciseRange[]>(swrKey, null)
-  const data = fetchedData || cachedData
-  const counts: Record<string, number> = {}
-
-  if (data) {
-    data.forEach(({ date, record }) => {
-      counts[date] = record
-    })
-  }
+  const { counts } = useExerciseCalendarData({
+    monthToShow,
+    today,
+    isOthers,
+    memberId,
+    isActive,
+    showStamps,
+  })
 
   const handleDateClick = (date: Date) => {
     if (onDateSelect) {

src/hooks/useExerciseCalendar.ts

@@ -0,0 +1,62 @@
+import { useMemo } from 'react'
+import { format, startOfMonth, endOfMonth, isSameMonth } from 'date-fns'
+import useSWR from 'swr'
+
+import { useReadExerciseRange } from '@/hooks/api/useExerciseApi'
+import { useReadMemberExerciseRange } from '@/hooks/api/useMemberApi'
+import type { ExerciseRange } from '@/types/exercise'
+
+type Props = {
+  monthToShow: Date
+  today: Date
+  isOthers: boolean
+  memberId?: string
+  isActive: boolean
+  showStamps: boolean
+}
+
+export const useExerciseCalendarData = ({
+  monthToShow,
+  today,
+  isOthers,
+  memberId,
+  isActive,
+  showStamps,
+}: Props) => {
+  const isFutureMonth = monthToShow.getTime() > startOfMonth(today).getTime()
+  const startDate = format(startOfMonth(monthToShow), 'yyyy-MM-dd')
+  const endDate = isSameMonth(monthToShow, today)
+    ? format(today, 'yyyy-MM-dd')
+    : format(endOfMonth(monthToShow), 'yyyy-MM-dd')
+
+  const shouldFetch = !isFutureMonth && isActive && showStamps
+
+  const { data: myData } = useReadExerciseRange(
+    startDate,
+    endDate,
+    shouldFetch && !isOthers,
+  )
+  const { data: othersData } = useReadMemberExerciseRange(
+    memberId!,
+    startDate,
+    endDate,
+    shouldFetch && isOthers,
+  )
+
+  const fetchedData = isOthers ? othersData : myData
+
+  const swrKey = isOthers
+    ? ['member/exerciseRange', memberId, startDate.substring(0, 7)]
+    : ['exercise/range', startDate.substring(0, 7)]
+
+  const { data: cachedData } = useSWR<ExerciseRange[]>(swrKey, null)
+  const data = fetchedData || cachedData
+
+  const counts = useMemo(() => {
+    if (!data) return {}
+
+    return Object.fromEntries(data.map(({ date, record }) => [date, record]))
+  }, [data])
+
+  return { counts }
+}