[Refactor] 달력모달 all-in-one 파일 구조에서 modular-hooks 구조로 리팩토링 작업

src/components/pages/post-meetup/modals/date-picker-modal/calendar/calendar-footer/index.tsx

@@ -0,0 +1,24 @@
+import { useContextCalendars, useContextDays } from '@rehookify/datepicker';
+
+interface Props {
+  currentTab: 'date' | 'time';
+}
+
+export const CalendarFooter = ({ currentTab }: Props) => {
+  const { calendars } = useContextCalendars();
+  const { selectedDates } = useContextDays();
+
+  const { year, month } = calendars[0];
+
+  return (
+    <div className='text-text-md-semibold flex-center mt-3 flex-wrap gap-2.5 text-gray-700'>
+      <span>{year}년</span>
+      <span className={currentTab === 'date' ? 'text-mint-600' : ''}>
+        {month}월 {selectedDates[0].getDate()}일
+      </span>
+      <span className={currentTab === 'time' ? 'text-mint-600' : ''}>12:20</span>
+      <span>AM</span>
+      <span>PM</span>
+    </div>
+  );
+};

src/components/pages/post-meetup/modals/date-picker-modal/date-picker/index.tsx → src/components/pages/post-meetup/modals/date-picker-modal/calendar/date-picker/index.tsx

@@ -1,47 +1,35 @@
-import { useEffect, useState } from 'react';
+'use client';
 
-import { useDatePicker } from '@rehookify/datepicker';
+import { useEffect } from 'react';
+
+import {
+  useContextCalendars,
+  useContextDatePickerOffsetPropGetters,
+  useContextDays,
+  useContextDaysPropGetters,
+} from '@rehookify/datepicker';
 import clsx from 'clsx';
 
 import { Icon } from '@/components/icon';
 
 interface Props {
-  currentTab: 'date' | 'time';
-  handleDateChange: (date: string) => void;
+  handleDateChange: (selectedDate: string) => void;
 }
 
-export const DatePicker = ({ currentTab, handleDateChange }: Props) => {
-  const nowDate = new Date();
-  const [selectedDates, onDatesChange] = useState<Date[]>([nowDate]);
-
-  useEffect(() => {
-    handleDateChange(selectedDates.toString());
-  }, [selectedDates]);
+export const DatePicker = ({ handleDateChange }: Props) => {
+  const { formattedDates } = useContextDays();
+  const { calendars, weekDays } = useContextCalendars();
+  const { addOffset, subtractOffset } = useContextDatePickerOffsetPropGetters();
+  const { dayButton } = useContextDaysPropGetters();
 
-  const {
-    data: { weekDays, calendars },
-    propGetters: { dayButton, addOffset, subtractOffset },
-  } = useDatePicker({
-    selectedDates,
-    onDatesChange,
-    locale: {
-      day: 'numeric',
-      weekday: 'short',
-      monthName: 'numeric',
-    },
-    dates: {
-      minDate: nowDate,
-      maxDate: new Date(nowDate.getFullYear() + 1, 12, 0),
-    },
-    calendar: {
-      mode: 'fluid',
-    },
-  });
+  const { month, days } = calendars[0];
 
-  const { year, month, days } = calendars[0];
+  useEffect(() => {
+    handleDateChange(formattedDates[0].toString());
+  }, [formattedDates]);
 
   return (
-    <section className='mt-4 select-none'>
+    <div>
       <div className='flex justify-end gap-4'>
         <button {...subtractOffset({ months: 1 })} aria-label='Previous month'>
           <Icon id='chevron-left-1' className='text-gray-600' />
@@ -76,16 +64,6 @@ export const DatePicker = ({ currentTab, handleDateChange }: Props) => {
           ))}
         </ul>
       </div>
-
-      <div className='text-text-md-semibold flex-center mt-3 gap-2.5 text-gray-700'>
-        <span>{year}년</span>
-        <span className={currentTab === 'date' ? 'text-mint-600' : ''}>
-          {month}월 {selectedDates[0].getDate()}일
-        </span>
-        <span className={currentTab === 'time' ? 'text-mint-600' : ''}>12:20</span>
-        <span>AM</span>
-        <span>PM</span>
-      </div>
-    </section>
+    </div>
   );
 };

src/components/pages/post-meetup/modals/date-picker-modal/calendar/index.tsx

@@ -0,0 +1,45 @@
+import { Activity, useState } from 'react';
+
+import { DatePickerStateProvider } from '@rehookify/datepicker';
+
+import { CalendarFooter } from '@/components/pages/post-meetup/modals/date-picker-modal/calendar/calendar-footer';
+import { DatePicker } from '@/components/pages/post-meetup/modals/date-picker-modal/calendar/date-picker';
+
+interface Props {
+  currentTab: 'date' | 'time';
+  handleDateChange: (selectedDate: string) => void;
+}
+
+export const Calendar = ({ currentTab, handleDateChange }: Props) => {
+  const nowDate = new Date();
+  const [selectedDates, onDatesChange] = useState<Date[]>([nowDate]);
+
+  return (
+    <section className='mt-4 select-none'>
+      <DatePickerStateProvider
+        config={{
+          selectedDates,
+          onDatesChange,
+          locale: {
+            day: 'numeric',
+            weekday: 'short',
+            monthName: 'numeric',
+          },
+          dates: {
+            minDate: nowDate,
+            maxDate: new Date(nowDate.getFullYear() + 1, 12, 0),
+          },
+          calendar: {
+            mode: 'fluid',
+          },
+        }}
+      >
+        <Activity mode={currentTab === 'date' ? 'visible' : 'hidden'}>
+          <DatePicker handleDateChange={handleDateChange} />
+        </Activity>
+
+        <CalendarFooter currentTab={currentTab} />
+      </DatePickerStateProvider>
+    </section>
+  );
+};

src/components/pages/post-meetup/modals/date-picker-modal/calendar/time-picker/index.tsx

@@ -0,0 +1,3 @@
+export const TimePicker = () => {
+  return <div></div>;
+};

src/components/pages/post-meetup/modals/date-picker-modal/index.tsx

@@ -6,16 +6,15 @@ import { AnyFieldApi } from '@tanstack/react-form';
 import clsx from 'clsx';
 
 import { Icon } from '@/components/icon';
-import { DatePicker } from '@/components/pages/post-meetup/modals/date-picker-modal/date-picker';
-import { ModalContent, ModalTitle, useModal } from '@/components/ui';
+import { Calendar } from '@/components/pages/post-meetup/modals/date-picker-modal/calendar';
+import { ModalContent, ModalTitle } from '@/components/ui';
 
 interface Props {
   field: AnyFieldApi;
 }
 
 export const DatePickerModal = ({ field }: Props) => {
   const [tabMenu, setTabMenu] = useState<'date' | 'time'>('date');
-  const { close } = useModal();
 
   return (
     <ModalContent>
@@ -40,9 +39,11 @@ export const DatePickerModal = ({ field }: Props) => {
           ))}
         </nav>
 
-        <DatePicker
+        <Calendar
           currentTab={tabMenu}
-          handleDateChange={(date: string) => field.handleChange({ ...field.state.value, date })}
+          handleDateChange={(selectedDate: string) =>
+            field.handleChange({ ...field.state.value, selectedDate })
+          }
         />
 
         <div className='flex-center mt-6 gap-2'>