(#246) monthViewWithData 컴포넌트 삭제

Author: ldg-96

src/components/commons/exerciseCalendar/exerciseCalendar.tsx

@@ -10,7 +10,7 @@ import LeftArrow from '@/assets/icon_left_arrow.svg'
 import RightArrow from '@/assets/icon_right_arrow.svg'
 import Typography from '@/components/ui/typography'
 
-import MonthViewWithData from './monthViewWithData'
+import MonthView from './monthView'
 import styles from './exerciseCalendar.module.css'
 
 type Props = {
@@ -142,9 +142,10 @@ const ExerciseCalendar = forwardRef<HTMLDivElement, Props>(
               ),
             }}
           >
-            <MonthViewWithData
+            <MonthView
+              key={prevMonth.toISOString()}
+              month={prevMonth}
               today={today}
-              monthToShow={prevMonth}
               isActive={false}
               onDateSelect={onDateSelect}
               selectedDate={selectedDate}
@@ -153,9 +154,10 @@ const ExerciseCalendar = forwardRef<HTMLDivElement, Props>(
               showStamps={showStamps}
               memberId={memberId ?? undefined}
             />
-            <MonthViewWithData
+            <MonthView
+              key={currentMonth.toISOString()}
+              month={currentMonth}
               today={today}
-              monthToShow={currentMonth}
               isActive={true}
               onDateSelect={onDateSelect}
               selectedDate={selectedDate}
@@ -164,9 +166,10 @@ const ExerciseCalendar = forwardRef<HTMLDivElement, Props>(
               showStamps={showStamps}
               memberId={memberId ?? undefined}
             />
-            <MonthViewWithData
+            <MonthView
+              key={nextMonth.toISOString()}
+              month={nextMonth}
               today={today}
-              monthToShow={nextMonth}
               isActive={false}
               onDateSelect={onDateSelect}
               selectedDate={selectedDate}

src/components/commons/exerciseCalendar/monthView.tsx

@@ -1,48 +1,47 @@
 'use client'
 
 import { memo, useMemo, useRef } from 'react'
-
-import {
-  eachWeekOfInterval,
-  eachDayOfInterval,
-  format,
-  isSameMonth,
-  isSameDay,
-  isAfter,
-  startOfWeek,
-  endOfWeek,
-  startOfMonth,
-  endOfMonth,
-  addDays,
-  parseISO,
-} from 'date-fns'
+import { eachWeekOfInterval, eachDayOfInterval, format, isSameMonth, isSameDay, isAfter, startOfWeek, endOfWeek, startOfMonth, endOfMonth, addDays, parseISO } from 'date-fns'
 import clsx from 'clsx'
-
+import { useExerciseCalendarData } from '@/hooks/useExerciseCalendar' // 훅 직접 호출
 import StampIcon from '@/assets/stamp.svg'
 import Typography from '@/components/ui/typography'
-
 import styles from './monthView.module.css'
 
 type Props = {
   month: Date
   today: Date
-  counts: Record<string, number>
-  onDateClick: (date: Date) => void
+  onDateSelect?: (date: Date) => void
   selectedDate: string
   isReadOnly: boolean
+  isOthers: boolean
   showStamps: boolean
+  isActive: boolean
+  memberId?: string
 }
 
 const MonthView = memo(function MonthView({
   month,
   today,
-  counts,
-  onDateClick,
+  onDateSelect,
   selectedDate,
   isReadOnly,
+  isOthers,
   showStamps,
+  isActive,
+  memberId,
 }: Props) {
+  const { counts } = useExerciseCalendarData({
+    monthToShow: month,
+    today,
+    isOthers,
+    memberId,
+    isActive,
+    showStamps,
+  })
+
   const prevCounts = useRef(counts)
+
   const shouldAnimate = useMemo(() => {
     const prevData = Object.keys(prevCounts.current).length === 0
     const currentData = Object.keys(counts).length > 0
@@ -55,16 +54,10 @@ const MonthView = memo(function MonthView({
     const gridStart = startOfWeek(monthStart, { weekStartsOn: 0 })
     const gridEnd = endOfWeek(monthEnd, { weekStartsOn: 0 })
 
-    const weekStarts = eachWeekOfInterval(
-      { start: gridStart, end: gridEnd },
-      { weekStartsOn: 0 },
-    )
+    const weekStarts = eachWeekOfInterval({ start: gridStart, end: gridEnd }, { weekStartsOn: 0 })
 
     return weekStarts.map((weekStart) =>
-      eachDayOfInterval({
-        start: weekStart,
-        end: addDays(weekStart, 6),
-      }),
+      eachDayOfInterval({ start: weekStart, end: addDays(weekStart, 6) })
     )
   }, [month])
 
@@ -77,12 +70,7 @@ const MonthView = memo(function MonthView({
             const isCurrent = isSameMonth(day, month)
             const isFuture = isAfter(day, today)
             const isSelected = isSameDay(day, parseISO(selectedDate))
-            const count = counts[dateStr] ?? 0
-
-            const stampIconClassName = clsx(styles['stamp-icon'], {
-              [styles['animate-fade-in']]: shouldAnimate,
-              [styles['show-immediately']]: !shouldAnimate,
-            })
+            const count = showStamps ? (counts[dateStr] ?? 0) : 0
 
             return (
               <div
@@ -92,17 +80,24 @@ 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
-                  onDateClick(day)
+                  if (!isCurrent || isFuture || isReadOnly || !onDateSelect) return
+                  onDateSelect(day)
                 }}
               >
                 <Typography as="span" variant="content-medium">
                   {format(day, 'd')}
                 </Typography>
-                {count > 0 && <StampIcon className={stampIconClassName} />}
+                {count > 0 && (
+                  <StampIcon 
+                    className={clsx(styles['stamp-icon'], {
+                      [styles['animate-fade-in']]: shouldAnimate,
+                      [styles['show-immediately']]: !shouldAnimate,
+                    })} 
+                  />
+                )}
               </div>
             )
           })}
@@ -112,4 +107,4 @@ const MonthView = memo(function MonthView({
   )
 })
 
-export default MonthView
+export default MonthView