Fix: 예약 승인 및 거절 시 캘린더에 바로 반영 안되는 이슈 해결

eunji-0623 · Aug 7, 2024 · 1013d78 · 1013d78
1 parent b37ec12
commit 1013d78
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/components/Calendar/Calendar.tsx b/components/Calendar/Calendar.tsx
@@ -3,7 +3,7 @@ import FullCalendar from '@fullcalendar/react';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin, { DateClickArg } from '@fullcalendar/interaction';
 import { EventClickArg } from '@fullcalendar/core';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { getMyMonthSchedule } from '@/pages/api/myActivities/apimyActivities';
 import { CalendarProps } from './Calendar.types';
 import { getMyMonthScheduleResponse } from '@/pages/api/myActivities/apimyActivities.types';
@@ -17,8 +17,9 @@ const Calendar: React.FC<CalendarProps> = ({ activityId }) => {
   const darkMode = useRecoilValue(darkModeState);
   const year = new Date().getFullYear().toString();
   const month = (new Date().getMonth() + 1).toString().padStart(2, '0');
+  const queryClient = useQueryClient();
 
-  const { data, error, isLoading } = useQuery<
+  const { data, error, isLoading, refetch } = useQuery<
     getMyMonthScheduleResponse[],
     Error
   >({
@@ -39,6 +40,9 @@ const Calendar: React.FC<CalendarProps> = ({ activityId }) => {
         <ReservationModalContent
           selectedDate={newDate}
           activityId={activityId}
+          onActionComplete={() => {
+            refetch();
+          }}
         />
       ),
     });
@@ -59,7 +63,6 @@ const Calendar: React.FC<CalendarProps> = ({ activityId }) => {
   const events =
     data?.flatMap((item: getMyMonthScheduleResponse) => {
       const { date, reservations } = item;
-
       const events = [];
 
       if (reservations.completed > 0) {

diff --git a/components/Calendar/ReservationModalContent.tsx b/components/Calendar/ReservationModalContent.tsx
@@ -125,7 +125,8 @@ const ApplicationList: React.FC<{
   activityId: number;
   scheduleId: number;
   status: string;
-}> = ({ activityId, scheduleId, status }) => {
+  onActionComplete: () => void;
+}> = ({ activityId, scheduleId, status, onActionComplete }) => {
   const {
     data: timeSchedule,
     isLoading: isTimeScheduleLoading,
@@ -167,6 +168,7 @@ const ApplicationList: React.FC<{
         queryKey: ['myReservations', activityId],
       });
       refetch();
+      onActionComplete();
     },
     onError: (error) => {
       console.error('Error updating reservation:', error);
@@ -255,7 +257,8 @@ const ApplicationList: React.FC<{
 const ReservationModalContent: React.FC<{
   selectedDate: Date;
   activityId: number;
-}> = ({ selectedDate, activityId }) => {
+  onActionComplete: () => void;
+}> = ({ selectedDate, activityId, onActionComplete }) => {
   const [selectedScheduleId, setSelectedScheduleId] = useState<number | null>(
     null
   );
@@ -267,6 +270,13 @@ const ReservationModalContent: React.FC<{
     setSelectedScheduleId(scheduleId);
   };
 
+  const handleActionComplete = () => {
+    refetchPending();
+    refetchConfirmed();
+    refetchDeclined();
+    onActionComplete();
+  };
+
   const { data: pendingData, refetch: refetchPending } = useMyTimeSchedule({
     activityId,
     scheduleId: selectedScheduleId || 0,
@@ -319,6 +329,7 @@ const ReservationModalContent: React.FC<{
               activityId={activityId}
               scheduleId={selectedScheduleId}
               status="pending"
+              onActionComplete={handleActionComplete}
             />
           )}
         </div>
@@ -333,6 +344,7 @@ const ReservationModalContent: React.FC<{
               activityId={activityId}
               scheduleId={selectedScheduleId}
               status="confirmed"
+              onActionComplete={handleActionComplete}
             />
           )}
         </div>
@@ -347,6 +359,7 @@ const ReservationModalContent: React.FC<{
               activityId={activityId}
               scheduleId={selectedScheduleId}
               status="declined"
+              onActionComplete={handleActionComplete}
             />
           )}
         </div>