diff --git a/src/components/Modal/ReservationDetailsModal/ReservationDetailsModal.tsx b/src/components/Modal/ReservationDetailsModal/ReservationDetailsModal.tsx index fec788b..ed4479b 100644 --- a/src/components/Modal/ReservationDetailsModal/ReservationDetailsModal.tsx +++ b/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, diff --git a/src/components/Modal/ReservationDetailsModal/components/ApprovedContent.tsx b/src/components/Modal/ReservationDetailsModal/components/ApprovedContent.tsx index 1fd322c..67e5c73 100644 --- a/src/components/Modal/ReservationDetailsModal/components/ApprovedContent.tsx +++ b/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({ 예약 내역 {reservationData ? (
-
+
{approvedReservations.length > 0 ? ( approvedReservations.map((reservation) => ( )) ) : ( diff --git a/src/components/Modal/ReservationDetailsModal/components/RejectedContent.tsx b/src/components/Modal/ReservationDetailsModal/components/RejectedContent.tsx index db6ca25..5ea2ddf 100644 --- a/src/components/Modal/ReservationDetailsModal/components/RejectedContent.tsx +++ b/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,7 +23,6 @@ function RejectedContent({ {selectedDate.getFullYear()}년 {selectedDate.getMonth() + 1}월{' '} {selectedDate.getDate()}일

- {/* {reservationData && reservationData.reservations.declined > 0 && ( */} - {/* )} */}
예약 내역 {reservationData ? (
-
+
{rejectedReservations.length > 0 ? ( rejectedReservations.map((reservation) => ( )) ) : ( diff --git a/src/components/Modal/ReservationModal.tsx b/src/components/Modal/ReservationModal.tsx index 5de7494..4318ee6 100644 --- a/src/components/Modal/ReservationModal.tsx +++ b/src/components/Modal/ReservationModal.tsx @@ -150,7 +150,9 @@ function ReservationModal({ activityId }: IReservationModal) { ₩ {headCount * price}
- 예약이 완료되었습니다. + {reservationMutation.isSuccess && ( + 예약이 완료되었습니다. + )}
); } diff --git a/src/components/Modal/ReviewModal.tsx b/src/components/Modal/ReviewModal.tsx index 3eee4d8..46729f0 100644 --- a/src/components/Modal/ReviewModal.tsx +++ b/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 ( -
-
- 테스트 이미지 -
-

- 함께 배우면 즐거운 스트릿 댄스 -

-

- 2023. 2. 14 · 11:00 - 12:30 · 10명 -

-
-

₩10,000

-
-
-
-
- {STARS.map((starIdx) => ( - 평점아이콘 handleRateClick(starIdx)} - /> - ))} + {reservation ? ( +
+
+ 테스트 이미지 +
+

+ {reservation.activity.title} +

+

+ {reservation.date} · {reservation.startTime} -{' '} + {reservation.endTime} · {reservation.headCount}명 +

+
+

+ ₩{reservation.totalPrice.toLocaleString()} +

+
-