Fix: 예약기능 오류 수정

src/components/Modal/ReservationDetailsModal/ReservationDetailsModal.tsx

@@ -56,6 +56,12 @@ function ReservationDetailsModal({
   const [selectedTimeSlot, setSelectedTimeSlot] = useState(null);
   const [label, setLabel] = useState('');
 
+  const tabToTab = {
+    requestTab: 'pending',
+    approvedTab: 'confirmed',
+    rejectedTab: 'declined',
+  };
+
   const dateString = `${selectedDate.getFullYear()}-${String(selectedDate.getMonth() + 1).padStart(2, '0')}-${String(selectedDate.getDate()).padStart(2, '0')}`;
 
   const { data: reservedSchedule = [] } = useReservedSchedule(
@@ -69,13 +75,7 @@ function ReservationDetailsModal({
 
   const scheduleId = selectedSchedule ? selectedSchedule.scheduleId : null;
 
-  const status = selectedSchedule
-    ? selectedSchedule.count.declined > 0
-      ? 'declined'
-      : selectedSchedule.count.pending > 0
-        ? 'pending'
-        : 'confirmed'
-    : 'pending';
+  const status = tabToTab[activeTab];
 
   const { data: reservationsData } = useReservations(
     activityId,
@@ -84,8 +84,6 @@ function ReservationDetailsModal({
     status,
   );
 
-  console.log('Reservations Data:', reservationsData);
-
   const options = reservedSchedule.map((schedule) => ({
     label: `${schedule.startTime} ~ ${schedule.endTime}`,
     value: schedule.scheduleId,

src/components/Modal/ReservationDetailsModal/components/ApprovedContent.tsx

@@ -9,7 +9,6 @@ function ApprovedContent({
   setValue,
   approvedReservations,
   setLabel,
-  // setApprovedReservations,
 }: ITabContent) {
   const dateString = `${selectedDate.getFullYear()}-${String(selectedDate.getMonth() + 1).padStart(2, '0')}-${String(selectedDate.getDate()).padStart(2, '0')}`;
   const reservationData = reservations.find(
@@ -39,13 +38,12 @@ function ApprovedContent({
         <span className="text-2lg font-semibold">예약 내역</span>
         {reservationData ? (
           <div>
-            <div className="max-h-72 overflow-y-auto">
+            <div className="max-h-[200px] overflow-y-auto">
               {approvedReservations.length > 0 ? (
                 approvedReservations.map((reservation) => (
                   <ReservationDetailCard
                     key={`${reservation.scheduleId}-${reservation.userId}`}
                     reservation={reservation}
-                    // setApprovedReservations={setApprovedReservations}
                   />
                 ))
               ) : (

src/components/Modal/ReservationDetailsModal/components/RejectedContent.tsx

@@ -9,7 +9,6 @@ function RejectedContent({
   setValue,
   rejectedReservations,
   setLabel,
-  // setRejectedReservations,
 }: ITabContent) {
   const dateString = `${selectedDate.getFullYear()}-${String(selectedDate.getMonth() + 1).padStart(2, '0')}-${String(selectedDate.getDate()).padStart(2, '0')}`;
   const reservationData = reservations.find(
@@ -24,28 +23,25 @@ function RejectedContent({
             {selectedDate.getFullYear()}년 {selectedDate.getMonth() + 1}월{' '}
             {selectedDate.getDate()}일
           </p>
-          {/* {reservationData && reservationData.reservations.declined > 0 && ( */}
           <DropDown
             size="full"
             label={label}
             options={options}
             setValue={setValue}
             setLabel={setLabel}
           />
-          {/* )} */}
         </div>
       </div>
       <div>
         <span className="text-2lg font-semibold">예약 내역</span>
         {reservationData ? (
           <div>
-            <div className="max-h-72 overflow-y-auto">
+            <div className="max-h-[200px] overflow-y-auto">
               {rejectedReservations.length > 0 ? (
                 rejectedReservations.map((reservation) => (
                   <ReservationDetailCard
                     key={`${reservation.scheduleId}-${reservation.userId}`}
                     reservation={reservation}
-                    // setRejectedReservations={setRejectedReservations}
                   />
                 ))
               ) : (

src/components/Modal/ReservationModal.tsx

@@ -150,7 +150,9 @@ function ReservationModal({ activityId }: IReservationModal) {
           <span>₩ {headCount * price}</span>
         </div>
       </div>
-      <AlertModal>예약이 완료되었습니다.</AlertModal>
+      {reservationMutation.isSuccess && (
+        <AlertModal>예약이 완료되었습니다.</AlertModal>
+      )}
     </div>
   );
 }

src/components/Modal/ReviewModal.tsx

@@ -4,10 +4,12 @@ import Image from 'next/image';
 import { ChangeEvent, useState } from 'react';
 import Button from '@/components/Button/Button';
 import BaseModal from './BaseModal';
+import { useMutation } from '@tanstack/react-query';
+import axiosInstance from '@/services/axios';
 
 const STARS = [0, 1, 2, 3, 4];
 
-function ReviewModal() {
+function ReviewModal({ reservation }: ReviewModal) {
   const [isStarOn, setIsStarOn] = useState([false, false, false, false, false]);
   const [rating, setRating] = useState(0);
   const [content, setContent] = useState('');
@@ -35,6 +37,32 @@ function ReviewModal() {
     }
   };
 
+  const submitReviewRequest = async () => {
+    const response = await axiosInstance.post(
+      `/my-reservations/${reservation.id}/reviews`,
+      {
+        rating,
+        content,
+      },
+    );
+    return response.data;
+  };
+
+  const submitMutation = useMutation({
+    mutationFn: submitReviewRequest,
+    onSuccess: () => {
+      alert('리뷰가 성공적으로 작성되었습니다.');
+    },
+    onError: (error) => {
+      alert(`리뷰 작성 실패: ${error.message}`);
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    submitMutation.mutate();
+  };
+
   return (
     <BaseModal
       type="modal"
@@ -43,46 +71,55 @@ function ReviewModal() {
       tStyle="review"
       footerButton={null}
     >
-      <div className="mt-[41px] mobile:mt-[35px]">
-        <div className="mb-[24px] flex items-center mobile:mb-[12px]">
-          <Image
-            className="mr-[8px] h-[126px] w-[126px] rounded-[12px] mobile:h-[100px] mobile:w-[100px]"
-            src={ImgTest}
-            alt="테스트 이미지"
-          />
-          <div className="flex flex-col gap-[12px] mobile:gap-[6px]">
-            <p className="text-xl font-bold mobile:text-lg">
-              함께 배우면 즐거운 스트릿 댄스
-            </p>
-            <p className="text-2lg font-regular mobile:text-md">
-              2023. 2. 14 · 11:00 - 12:30 · 10명
-            </p>
-            <hr className="border-[1px] border-black-nomad opacity-10" />
-            <p className="text-3xl font-bold mobile:text-[20px]">₩10,000</p>
-          </div>
-        </div>
-        <form>
-          <div className="flex h-[100px] items-center justify-center gap-[9.75px]">
-            {STARS.map((starIdx) => (
-              <Image
-                key={starIdx}
-                className="h-[49.01px] w-[52.5px] cursor-pointer"
-                src={isStarOn[starIdx] ? IconStarOn : IconStarOff}
-                alt="평점아이콘"
-                onClick={() => handleRateClick(starIdx)}
-              />
-            ))}
+      {reservation ? (
+        <div className="mt-[41px] mobile:mt-[35px]">
+          <div className="mb-[24px] flex items-center mobile:mb-[12px]">
+            <Image
+              className="mr-[8px] h-[126px] w-[126px] rounded-[12px] mobile:h-[100px] mobile:w-[100px]"
+              src={ImgTest}
+              alt="테스트 이미지"
+            />
+            <div className="flex flex-col gap-[12px] mobile:gap-[6px]">
+              <p className="text-xl font-bold mobile:text-lg">
+                {reservation.activity.title}
+              </p>
+              <p className="text-2lg font-regular mobile:text-md">
+                {reservation.date} · {reservation.startTime} -{' '}
+                {reservation.endTime} · {reservation.headCount}명
+              </p>
+              <hr className="border-[1px] border-black-nomad opacity-10" />
+              <p className="text-3xl font-bold mobile:text-[20px]">
+                ₩{reservation.totalPrice.toLocaleString()}
+              </p>
+            </div>
           </div>
-          <textarea
-            className="y-full my-[24px] flex h-[240px] w-full resize-none rounded-[4px] border-[1px] border-gray-79 p-[16px] text-lg font-regular outline-none placeholder:text-gray-79 mobile:mb-[24px] mobile:mt-[12px] mobile:h-[346px]"
-            placeholder="후기를 작성해주세요"
-            value={content}
-            onChange={handleTextareaChange}
-          />
+          <form onSubmit={handleSubmit}>
+            <div className="flex h-[100px] items-center justify-center gap-[9.75px]">
+              {STARS.map((starIdx) => (
+                <Image
+                  key={starIdx}
+                  className="h-[49.01px] w-[52.5px] cursor-pointer"
+                  src={isStarOn[starIdx] ? IconStarOn : IconStarOff}
+                  alt="평점아이콘"
+                  onClick={() => handleRateClick(starIdx)}
+                />
+              ))}
+            </div>
+            <textarea
+              className="y-full my-[24px] flex h-[240px] w-full resize-none rounded-[4px] border-[1px] border-gray-79 p-[16px] text-lg font-regular outline-none placeholder:text-gray-79 mobile:mb-[24px] mobile:mt-[12px] mobile:h-[346px]"
+              placeholder="후기를 작성해주세요"
+              value={content}
+              onChange={handleTextareaChange}
+            />
 
-          <Button size="largeModal">작성하기</Button>
-        </form>
-      </div>
+            <Button type="submit" size="largeModal">
+              작성하기
+            </Button>
+          </form>
+        </div>
+      ) : (
+        <p>예약 정보가 없습니다.</p>
+      )}
     </BaseModal>
   );
 }

src/components/myreservations/MyReservations.tsx

@@ -1,11 +1,16 @@
 'use client';
 import getMyReservations from './component/getMyReservation';
 import EmptyPage from './component/EmptyPage';
-import { ReservationDatas } from '@/types/myActivityReservationList';
+import {
+  IMyReservation,
+  ReservationDatas,
+} from '@/types/myActivityReservationList';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import ReservationCard from './component/ReservationCard';
+import ReviewModal from '../Modal/ReviewModal';
+import { useModalStore } from '@/stores/modalStore';
 
 type ReservationStatus =
   | 'pending'
@@ -19,6 +24,14 @@ const MyReservations: React.FC = () => {
     ReservationStatus | undefined
   >(undefined);
   const { ref, inView } = useInView();
+  const [selectedReservation, setSelectedReservation] =
+    useState<IMyReservation | null>(null);
+  const { setOpenModal } = useModalStore();
+
+  const openReviewModal = (reservation: IMyReservation) => {
+    setSelectedReservation(reservation);
+    setOpenModal();
+  };
 
   const {
     data,
@@ -71,13 +84,15 @@ const MyReservations: React.FC = () => {
                 key={reservation.id}
                 reservations={[reservation]}
                 selectedStatus={selectedStatus}
+                onReviewClick={() => openReviewModal(reservation)}
               />
             ))}
           </div>
 
           <div ref={ref} />
         </div>
       )}
+      <ReviewModal reservation={selectedReservation} />
     </div>
   );
 };

src/components/myreservations/component/ReservationCard.tsx

@@ -16,9 +16,13 @@ interface ReservationCardProps {
     | 'canceled'
     | 'completed'
     | undefined;
+  onReviewClick: () => void;
 }
 
-const ReservationCard: React.FC<ReservationCardProps> = ({ reservations }) => {
+const ReservationCard: React.FC<ReservationCardProps> = ({
+  reservations,
+  onReviewClick,
+}) => {
   const [currentReservations, setCurrentReservations] = useState<
     IMyReservation[]
   >(reservations || []);
@@ -117,7 +121,9 @@ const ReservationCard: React.FC<ReservationCardProps> = ({ reservations }) => {
                 {reservation.status === 'completed' &&
                   reservation.reviewSubmitted === false && (
                     <div className="">
-                      <Button onClick={() => {}} size={'small'} />
+                      <Button onClick={onReviewClick} size={'small'}>
+                        후기 작성
+                      </Button>
                     </div>
                   )}
                 {reservation.status === 'pending' && <div className=""></div>}

src/containers/activityDetail/ActivityDetail.tsx

@@ -311,9 +311,16 @@ function ActivityDetail() {
                   </div>
                 </div>
                 <div>
-                  {reviewData.reviews.map((review: any) => (
+                  {/* {reviewData.reviews.map((review: any) => (
                     <ReviewCard review={review} />
-                  ))}
+                  ))} */}
+                  {reviewData.reviews && reviewData.reviews.length > 0 ? (
+                    reviewData.reviews.map((review: any) => (
+                      <ReviewCard key={review.id} review={review} />
+                    ))
+                  ) : (
+                    <p>후기가 없습니다.</p>
+                  )}
                 </div>
               </div>
             </div>

src/containers/activityDetail/ReviewCard.tsx

@@ -4,11 +4,12 @@ import React from 'react';
 import { format } from 'date-fns';
 
 function ReviewCard({ review }: { review: any }) {
+  const defaultProfileImage = '/path/to/default/profile/image.png';
   return (
     <div>
       <div className="flex items-start gap-[16px] border-b-[1px] border-black-nomad pb-[24px]">
         <Image
-          src={review.user.profileImageUrl}
+          src={review.user.profileImageUrl || defaultProfileImage}
           alt={'프로필이미지'}
           width={45}
           height={45}

src/containers/register/Register.tsx

@@ -131,10 +131,24 @@ const Register = () => {
       bannerImageUrl,
       subImageUrls,
       address,
-      schedules: availableTimes.map((time) => ({
-        ...time,
-        date: time.date ? time.date.toISOString().split('T')[0] : null,
-      })),
+      // schedules: availableTimes.map((time) => ({
+      //   ...time,
+      //   date: time.date ? time.date.toISOString().split('T')[0] : null,
+      // })),
+      schedules: availableTimes.map((time) => {
+        if (time.date) {
+          time.date.setDate(time.date.getDate() + 1);
+          return {
+            ...time,
+            date: time.date.toISOString().split('T')[0],
+          };
+        } else {
+          return {
+            ...time,
+            date: null,
+          };
+        }
+      }),
     };
     console.log(postData);
     submitDataMutation.mutate(postData);

src/containers/reservationSchedule/components/Calendar.tsx

@@ -91,7 +91,7 @@ function Calendar({ reservations, changeMonth, currentDate, activityId }) {
                 </div>
               )}
               {reservationData.reservations.completed > 0 && (
-                <div className="w-full">
+                <div className="w-full rounded-[4px] bg-gray-dd px-[4px] py-[3px] text-sm font-semibold text-gray-4b">
                   완료 {reservationData.reservations.completed}
                 </div>
               )}