Feat[#224]: 마이페이지/신청한 예약 api 연동

src/components/commons/buttons/CardButton.module.scss

@@ -11,7 +11,7 @@
 
   span {
     display: inline-block;
-    width: 4.8rem;
+    width: 6rem;
   }
 }
 
@@ -46,3 +46,9 @@
 
   color: $red;
 }
+
+.btn-color-gray {
+  color: $gray40;
+  background-color: transparent;
+  border: 0.1rem solid $gray50;
+}

src/components/commons/buttons/CardButton.tsx

@@ -8,8 +8,8 @@ const cx = classNames.bind(styles);
 
 type CardButton = {
   children: string;
-  onClick: MouseEventHandler<HTMLButtonElement>;
-  color?: 'yellow' | 'red';
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  color?: 'yellow' | 'red' | 'gray';
 };
 
 export const CardButton = ({ children, onClick, color = 'yellow' }: CardButton) => {

src/components/commons/cards/ReservedCard.module.scss

@@ -1,4 +1,11 @@
 .card {
+  @include responsive(PC) {
+    &:hover {
+      background-color: $black60;
+      border-radius: 0.8rem;
+    }
+  }
+
   position: relative;
 
   width: 100%;
@@ -8,15 +15,6 @@
 
   transition: $base-transition;
 
-  &:hover {
-    @include responsive(M) {
-      background-color: $card-background;
-    }
-
-    background-color: $black60;
-    border-radius: 0.8rem;
-  }
-
   &-content {
     @include column-flexbox(start, start, 0.4rem);
 

src/components/commons/cards/ReservedCard.tsx

@@ -7,6 +7,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import classNames from 'classnames/bind';
 
 import { MyReservations } from '@/apis/myReservations';
+import { QUERY_KEYS } from '@/apis/queryKeys';
 import { SVGS } from '@/constants';
 import { isExpirationDate, getFormatDate } from '@/utils';
 
@@ -28,6 +29,7 @@ export type ReservedCardProps = {
   reservationId: number;
   path: string;
   status: MyReservationsStatus | string;
+  reviewSubmitted: boolean;
   postType: ReservedPostTypesEN | string;
   title: string;
   address: string;
@@ -42,6 +44,7 @@ export const ReservedCard = ({
   reservationId,
   path,
   status,
+  reviewSubmitted,
   postType,
   title,
   address,
@@ -54,14 +57,14 @@ export const ReservedCard = ({
   const { multiState, toggleClick } = useMultiState(['cancelReservationModal', 'submitReviewModal']);
   const isOffline = postType === 'offline';
   const isPending = status === 'pending';
-  const isReviewWritable = status === 'completed' && isExpirationDate(date, endTime);
+  const isReviewWritable = status === 'completed' && isExpirationDate(date, endTime) && !reviewSubmitted;
   const MyReservationDate = `${date} | ${startTime}-${endTime}`;
 
   const queryClient = useQueryClient();
   const { mutate: cancelReservationMutation } = useMutation({
     mutationFn: MyReservations.cancel,
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['myReservations', reservationId] });
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.myReservations.get });
     },
   });
 
@@ -112,6 +115,7 @@ export const ReservedCard = ({
             {isReviewWritable && (
               <CardButton onClick={(event) => handleButtonClick(event, 'submitReviewModal')}>리뷰</CardButton>
             )}
+            {reviewSubmitted && <CardButton color='gray'>리뷰 완료</CardButton>}
           </div>
         </Link>
       </article>

src/components/mypage/MyReservations/ReservedTabContent/index.tsx

@@ -1,8 +1,11 @@
 import { useState } from 'react';
 
+import { useQuery } from '@tanstack/react-query';
 import classNames from 'classnames/bind';
 
-import { MY_RESERVATIONS_STATUS_FILTERS, SORT_OPTIONS } from '@/constants';
+import { getMyReservations } from '@/apis/queryFunctions';
+import { QUERY_KEYS } from '@/apis/queryKeys';
+import { GAME_NAME_KR_TO_PATH_NAME, MY_RESERVATIONS_STATUS_FILTERS, SORT_OPTIONS } from '@/constants';
 import { formatStatusToKR, splitTitleByDelimiter } from '@/utils';
 import { getPostPageSize } from '@/utils/getPageSize';
 
@@ -11,24 +14,15 @@ import Dropdown from '@/components/commons/Dropdown';
 import Filter from '@/components/commons/Filter';
 import Pagination from '@/components/commons/Pagination';
 import EmptyCard from '@/components/layout/empty/EmptyCard';
-import myReservationsMockData from '@/constants/mockData/myReservationsMockData.json';
 import { useDeviceType } from '@/hooks/useDeviceType';
 import useProcessedDataList from '@/hooks/useProcessedDataList';
 
-import { MyReservationsResponse, ReservationResponse, SortOption, Order } from '@/types';
+import { ReservationResponse, SortOption, Order } from '@/types';
 
 import styles from './ReservedTabContent.module.scss';
 
 const cx = classNames.bind(styles);
 
-const myReservationsData: MyReservationsResponse = {
-  cursorId: 0,
-  totalCount: 0,
-  reservations: myReservationsMockData,
-};
-
-const { reservations: initialDataList } = myReservationsData;
-
 const initialFilter = {
   status: MY_RESERVATIONS_STATUS_FILTERS[0].id,
 };
@@ -40,6 +34,8 @@ const initialSortOption: SortOption<ReservationResponse> = {
 };
 
 const ReservedTabContent = () => {
+  const { data: initialDataList } = useQuery({ queryKey: QUERY_KEYS.myReservations.get, queryFn: getMyReservations });
+
   const [page, setPage] = useState(1);
   const [selectFilter, setSelectFilter] = useState(initialFilter);
   const [sortOption, setSortOption] = useState(initialSortOption);
@@ -86,8 +82,9 @@ const ReservedTabContent = () => {
               <li key={card.id}>
                 <ReservedCard
                   reservationId={card.id}
-                  path='/'
+                  path={`/${GAME_NAME_KR_TO_PATH_NAME[category]}/${card.activity.id}`}
                   status={card.status}
+                  reviewSubmitted={card.reviewSubmitted}
                   postType={postType}
                   title={title}
                   address={address}

src/components/mypage/MyReservations/ReviewModalContent/index.tsx

@@ -9,6 +9,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { MyReservations } from '@/apis/myReservations';
+import { QUERY_KEYS } from '@/apis/queryKeys';
 import { SVGS, ERROR_MESSAGE, REGEX } from '@/constants';
 
 import { BaseButton } from '@/components/commons/buttons';
@@ -27,17 +28,17 @@ type ReviewModalContentProps = {
   reservationId: number;
   title: string;
   date: string;
-  handleModalClose: (arg: string) => void;
+  handleModalClose: (modalKey: string) => void;
 };
 
-const ReviewModalContent = ({ reservationId, title, date, handleModalClose }: ReviewModalContentProps) => {
-  const ReviewModalSchema = z.object({
-    rating: z.number().min(1, { message: rating.min }),
-    content: z
-      .string()
-      .refine((content) => content.replace(REGEX.textarea, '').length >= MIN_LENGTH_TEXTAREA, { message: review.min }),
-  });
+const ReviewModalSchema = z.object({
+  rating: z.number().min(1, { message: rating.min }),
+  content: z
+    .string()
+    .refine((content) => content.replace(REGEX.textarea, '').length >= MIN_LENGTH_TEXTAREA, { message: review.min }),
+});
 
+const ReviewModalContent = ({ reservationId, title, date, handleModalClose }: ReviewModalContentProps) => {
   const methods = useForm({
     mode: 'all',
     resolver: zodResolver(ReviewModalSchema),
@@ -51,7 +52,7 @@ const ReviewModalContent = ({ reservationId, title, date, handleModalClose }: Re
   const { mutate: createReviewMutation } = useMutation({
     mutationFn: MyReservations.createReview,
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['myReservations', reservationId, 'reviews'] });
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.myReservations.get });
     },
   });
 
@@ -62,15 +63,14 @@ const ReviewModalContent = ({ reservationId, title, date, handleModalClose }: Re
     setCurrentRating(rating);
   };
 
-  const onSubmit = (data: object) => {
-    const newReview = { reservationId: reservationId, value: data };
-    createReviewMutation(newReview);
+  const handleReviewSubmit = (data: object) => {
+    createReviewMutation({ reservationId: reservationId, value: data });
     handleModalClose('submitReviewModal');
   };
 
   return (
     <FormProvider {...methods}>
-      <form className={cx('review-form')} onSubmit={handleSubmit(onSubmit)}>
+      <form className={cx('review-form')} onSubmit={handleSubmit(handleReviewSubmit)}>
         <header className={cx('review-form-header')}>
           <h2 className={cx('review-form-title')}>{title}</h2>
           <div className={cx('review-form-date')}>

src/constants/games.ts

@@ -30,3 +30,10 @@ export const GAME_FILTERS = [
   { id: '관광', text: '오버워치 2' },
   { id: '웰빙', text: '마인크래프트' },
 ];
+
+export const GAME_NAME_KR_TO_PATH_NAME: Record<string, string> = {
+  리그오브레전드: 'league-of-legends',
+  배틀그라운드: 'battlegrounds',
+  '오버워치 2': 'overwatch-2',
+  마인크래프트: 'minecraft',
+};

src/stories/ReservedCard.stories.ts

@@ -15,6 +15,7 @@ export const Example: Story = {
     reservationId: 0,
     path: '/',
     status: 'pending',
+    reviewSubmitted: false,
     postType: 'offline',
     title: '[PC방 대회]리그 오브 레전드 개발자들의 PC방 습격!',
     address: '강남 SBXG 포탈 PC방',