fix: today에 다시 useState 사용

components/calendar/Calendar.tsx

@@ -7,10 +7,29 @@ import { CalendarGrid } from './CalendarGrid'
 
 export const Calendar = ({ bibleData }: { bibleData: BibleData }) => {
   const [currentDate, setCurrentDate] = useState(new Date())
-  const today = useMemo(() => new Date(), [])
+  const [today, setToday] = useState(new Date())
 
   const createCalendar = useCallback(
     (date: Date) => {
+      const getDayStyle = (date: Date, today: Date) => {
+        date.setHours(0, 0, 0, 0)
+        today.setHours(0, 0, 0, 0)
+
+        const isPast = date < today
+        const isToday = !(date.getTime() - today.getTime())
+        const isSunday = date.getDay() === 0
+        const isSaturday = date.getDay() === 6
+
+        const styles = ['hover:shadow-md transition-shadow']
+
+        if (isPast) styles.push('opacity-50')
+        if (isToday) styles.push('bg-blue-100 border-blue-500')
+        if (isSunday) styles.push('text-red-500')
+        if (isSaturday) styles.push('text-blue-600')
+
+        return styles.join(' ')
+      }
+
       const year = date.getFullYear()
       const month = date.getMonth()
       const monthlyBible = bibleData[year]?.[month] ?? {}
@@ -56,22 +75,3 @@ export const Calendar = ({ bibleData }: { bibleData: BibleData }) => {
     </div>
   )
 }
-
-const getDayStyle = (date: Date, today: Date) => {
-  date.setHours(0, 0, 0, 0)
-  today.setHours(0, 0, 0, 0)
-
-  const isPast = date < today
-  const isToday = !(date.getTime() - today.getTime())
-  const isSunday = date.getDay() === 0
-  const isSaturday = date.getDay() === 6
-
-  const styles = ['hover:shadow-md transition-shadow']
-
-  if (isPast) styles.push('opacity-50')
-  if (isToday) styles.push('bg-blue-100 border-blue-500')
-  if (isSunday) styles.push('text-red-500')
-  if (isSaturday) styles.push('text-blue-600')
-
-  return styles.join(' ')
-}