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
-
-
-
@@ -78,6 +92,7 @@ const MyReservations: React.FC = () => {
)}
+
);
};
diff --git a/src/components/myreservations/component/ReservationCard.tsx b/src/components/myreservations/component/ReservationCard.tsx
index 9da1b83..5f59bb8 100644
--- a/src/components/myreservations/component/ReservationCard.tsx
+++ b/src/components/myreservations/component/ReservationCard.tsx
@@ -16,9 +16,13 @@ interface ReservationCardProps {
| 'canceled'
| 'completed'
| undefined;
+ onReviewClick: () => void;
}
-const ReservationCard: React.FC = ({ reservations }) => {
+const ReservationCard: React.FC = ({
+ reservations,
+ onReviewClick,
+}) => {
const [currentReservations, setCurrentReservations] = useState<
IMyReservation[]
>(reservations || []);
@@ -117,7 +121,9 @@ const ReservationCard: React.FC = ({ reservations }) => {
{reservation.status === 'completed' &&
reservation.reviewSubmitted === false && (
-
)}
{reservation.status === 'pending' && }
diff --git a/src/containers/activityDetail/ActivityDetail.tsx b/src/containers/activityDetail/ActivityDetail.tsx
index 54b4e49..9b2b1b5 100644
--- a/src/containers/activityDetail/ActivityDetail.tsx
+++ b/src/containers/activityDetail/ActivityDetail.tsx
@@ -311,9 +311,16 @@ function ActivityDetail() {
- {reviewData.reviews.map((review: any) => (
+ {/* {reviewData.reviews.map((review: any) => (
- ))}
+ ))} */}
+ {reviewData.reviews && reviewData.reviews.length > 0 ? (
+ reviewData.reviews.map((review: any) => (
+
+ ))
+ ) : (
+
후기가 없습니다.
+ )}
diff --git a/src/containers/activityDetail/ReviewCard.tsx b/src/containers/activityDetail/ReviewCard.tsx
index f158c37..f4cf8ed 100644
--- a/src/containers/activityDetail/ReviewCard.tsx
+++ b/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 (
{
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);
diff --git a/src/containers/reservationSchedule/components/Calendar.tsx b/src/containers/reservationSchedule/components/Calendar.tsx
index 99d1e9b..5f5d54b 100644
--- a/src/containers/reservationSchedule/components/Calendar.tsx
+++ b/src/containers/reservationSchedule/components/Calendar.tsx
@@ -91,7 +91,7 @@ function Calendar({ reservations, changeMonth, currentDate, activityId }) {
)}
{reservationData.reservations.completed > 0 && (
-
+
완료 {reservationData.reservations.completed}
)}
diff --git a/src/types/modal.d.ts b/src/types/modal.d.ts
index dc5b013..b67dc19 100644
--- a/src/types/modal.d.ts
+++ b/src/types/modal.d.ts
@@ -11,13 +11,13 @@ interface IModalPortal {
interface IBaseModal {
type: 'modal' | 'nonModal';
size:
- | 'alert'
- | 'confirm'
- | 'review'
- | 'reservation'
- | 'reservationDetailLarge'
- | 'reservationDetailMedium'
- | 'notice';
+ | 'alert'
+ | 'confirm'
+ | 'review'
+ | 'reservation'
+ | 'reservationDetailLarge'
+ | 'reservationDetailMedium'
+ | 'notice';
titleContent?: null | string;
tStyle?: 'review' | 'reservationDetail' | 'notice';
xStyle?: 'review' | 'reservationDetail' | 'notice';
@@ -33,6 +33,10 @@ type IAlertModal = Pick
& {
type IConfirmModal = Pick;
+interface ReviewModal {
+ reservation: IMyReservation | null;
+}
+
interface ITabContent {
options: { label: string; value: string }[];
selectedDate: Date;