Fix: 캘린더 이슈 해결

eunji-0623 · Jul 16, 2024 · 9947ae3 · 9947ae3
1 parent f1b5a03
commit 9947ae3
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 33 deletions.
diff --git a/components/ActivityDetails/Reservation/Reservation.tsx b/components/ActivityDetails/Reservation/Reservation.tsx
@@ -105,7 +105,7 @@ export default function Reservation({ activity }: ReservationProps) {
         popupType: 'alert',
         content: '예약이 완료되었습니다.',
         btnName: ['확인'],
-        callBackFnc: () => router.push(`/`),
+        callBackFnc: () => router.push(`/activity-details/${activity.id}`),
       });
     },
     onError: (error) => {

diff --git a/components/Calendar/Calendar.tsx b/components/Calendar/Calendar.tsx
@@ -1,10 +1,9 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import FullCalendar from '@fullcalendar/react';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import { useQuery } from '@tanstack/react-query';
 import { getMyMonthSchedule } from '@/pages/api/myActivities/apimyActivities';
-import Spinner from '../Spinner/Spinner';
 import { CalendarProps } from './Calendar.types';
 import { getMyMonthScheduleResponse } from '@/pages/api/myActivities/apimyActivities.types';
 import { StyleWrapper } from './StyleWrapper';
@@ -24,29 +23,24 @@ const Calendar: React.FC<CalendarProps> = ({ activityId }) => {
     queryFn: () => getMyMonthSchedule({ activityId, year, month }),
   });
 
-  const { openModal, closeModal } = useModal();
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { openModal } = useModal();
   const [modalDate, setModalDate] = useState<Date | null>(null);
 
   const handleDateClick = (arg: DateClickArg) => {
-    setModalDate(new Date(arg.dateStr));
-    setIsModalOpen(true);
+    const newDate = new Date(arg.dateStr);
+    setModalDate(newDate);
     openModal({
       title: '예약 정보',
       hasButton: false,
-      content: modalDate && (
+      content: (
         <ReservationModalContent
-          selectedDate={modalDate}
+          selectedDate={newDate}
           activityId={activityId}
         />
       ),
     });
   };
 
-  if (isLoading) {
-    return <Spinner />;
-  }
-
   if (error) {
     return <div>Error: {error.message}</div>;
   }

diff --git a/components/Calendar/ReservationModalContent.tsx b/components/Calendar/ReservationModalContent.tsx
@@ -4,7 +4,6 @@ import Image from 'next/image';
 import Down from '@/public/icon/chevron_down.svg';
 import Up from '@/public/icon/chevron_up.svg';
 import CheckMark from '@/public/icon/Checkmark.svg';
-import Spinner from '../Spinner/Spinner';
 import {
   getMyDateSchedule,
   getMyTimeSchedule,
@@ -52,15 +51,10 @@ const ReservationDateTime: React.FC<{
     onSelectTime(scheduleId);
   };
 
-  const { data: dateSchedule, isLoading: isDateScheduleLoading } =
-    useMyDateSchedule({
-      activityId,
-      date: selectedDate.toISOString().split('T')[0],
-    });
-
-  if (isDateScheduleLoading) {
-    return <Spinner />;
-  }
+  const { data: dateSchedule } = useMyDateSchedule({
+    activityId,
+    date: selectedDate.toISOString().split('T')[0],
+  });
 
   return (
     <>
@@ -173,6 +167,7 @@ const ApplicationList: React.FC<{
       queryClient.invalidateQueries({
         queryKey: ['myReservations', activityId],
       });
+      refetch();
     },
     onError: (error) => {
       console.error('Error updating reservation:', error);
@@ -181,9 +176,9 @@ const ApplicationList: React.FC<{
 
   const handleReservation = (
     reservationId: number,
-    status: 'pending' | 'confirmed' | 'declined'
+    newStatus: 'pending' | 'confirmed' | 'declined'
   ) => {
-    mutation.mutate({ reservationId, status });
+    mutation.mutate({ reservationId, status: newStatus });
   };
 
   useEffect(() => {
@@ -192,14 +187,10 @@ const ApplicationList: React.FC<{
     }
   }, [mutation.isSuccess, isTimeScheduleLoading, refetch]);
 
-  if (isTimeScheduleLoading) {
-    return <Spinner />;
-  }
-
   return (
     <>
       <span className="font-bold">예약 내역</span>
-      <div className="mt-2">
+      <div className="mt-2 h-[250px] overflow-auto ">
         {timeSchedule?.reservations.map((reservation) => (
           <div
             key={reservation.id}
@@ -216,7 +207,7 @@ const ApplicationList: React.FC<{
               </div>
             </div>
             <div className="flex gap-2 items-center justify-center">
-              {status === 'pending' && (
+              {reservation.status === 'pending' && (
                 <>
                   <PrimaryButton
                     size="small"
@@ -238,12 +229,12 @@ const ApplicationList: React.FC<{
                   </PrimaryButton>
                 </>
               )}
-              {status === 'confirmed' && (
+              {reservation.status === 'confirmed' && (
                 <div className="w-[85px] h-[40px] flex items-center justify-center font-bold text-sm rounded-3xl bg-var-orange1 text-var-orange2">
                   예약 승인
                 </div>
               )}
-              {status === 'declined' && (
+              {reservation.status === 'declined' && (
                 <div className="w-[85px] h-[40px] flex items-center justify-center font-bold text-sm rounded-3xl bg-var-red1 text-var-red2">
                   예약 거절
                 </div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "next": "14.2.4",
     "react": "^18",
     "react-calendar": "^5.0.0",
+    "react-daum-postcode": "^3.1.3",
     "react-dom": "^18",
     "react-hook-form": "^7.52.1",
     "react-intersection-observer": "^9.13.0",