[SOC-202] 예매 취소 api연결 완료, 예매 취소와 관련된 것들 변경 (#198)

* feat: Add cancel

* feat: Add cancel

* feat: Update cancel ticket

Author: hyeda

src/api/orders/ordersApi.ts

@@ -2,27 +2,20 @@ import axios from "axios";
 import {
   GetAllOrderResponse,
   GetOneOrderResponse,
-  NewOrder,
-  NewOrderResponse,
 } from "../../types/api/order";
 import { baseURL } from "../../constants/api";
+import { ApiResponse } from "../../types/api/common";
 
 const API_URL = baseURL + "orders/";
 
 const api = axios.create({
   baseURL: API_URL,
 });
 
-const createNewOrder = async ({
-  eventId,
-  eventDateId,
-  seatIds,
-}: NewOrder): Promise<NewOrderResponse> => {
-  const response = await api.post<NewOrderResponse>(API_URL, {
-    eventId,
-    eventDateId,
-    seatIds,
-  });
+const cancelOrder = async (orderId: string): Promise<ApiResponse<"">> => {
+  const response = await api.post<ApiResponse<"">>(
+    API_URL + `${orderId}/cancel`
+  );
   return response.data;
 };
 
@@ -54,4 +47,4 @@ api.interceptors.request.use(
   }
 );
 
-export { createNewOrder, getAllOrder, getOneOrder };
+export { cancelOrder, getAllOrder, getOneOrder };

src/components/organisms/reservation/ReservationSeatInfo.tsx

@@ -47,10 +47,13 @@ const ReservationSeatInfo = (eventData: Event) => {
             <>
               <Button
                 onClick={() => void handleReservationSocketSubmit()}
-                className="p-4 w-full transition-colors "
+                className="p-4 w-full transition-colors flex items-center justify-between"
                 variant="primary"
               >
-                선택 좌석 예매하기
+                <span>선택 좌석 예매하기</span>
+                <div className="size-6 text-sm rounded-full flex items-center justify-center text-black bg-gray-300">
+                  {selectedSeats.length}
+                </div>
               </Button>
               {selectedSeats.map((seat) => (
                 <div

src/components/pages/MyDetailPage.tsx

@@ -1,34 +1,82 @@
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import MainLayout from "../layout/MainLayout";
-import { GetOrder } from "../../types/api/order";
+import { GetOneOrderResponse } from "../../types/api/order";
 import Font from "../atoms/fonts/Font";
-import { fetchErrorMessages } from "../../constants/errorMessages";
+import {
+  fetchErrorMessages,
+  cancelOrderErrorMessages,
+} from "../../constants/errorMessages";
 import { formatToKoreanDateAndTime } from "../../utils/dateUtils";
 import Button from "../atoms/buttons/Button";
-import { useState } from "react";
+import { useContext, useState } from "react";
+import { cancelOrder, getOneOrder } from "../../api/orders/ordersApi";
+import { toast } from "react-toastify";
+import { UserContext } from "../../store/UserContext";
+import { useQueryClient } from "@tanstack/react-query";
+import { createResourceQuery } from "../../hooks/useCustomQuery";
 
 const MyDetailPage = () => {
-  const location = useLocation();
+  const { orderId } = useParams<{ orderId: string }>();
+  const queryClient = useQueryClient();
+
   const navigate = useNavigate();
-  const state = location.state as { order: GetOrder };
-  const order = state.order;
-  const [isCancleModalOpen, setIsCancleModalOpen] = useState(false);
+  const { userId } = useContext(UserContext);
+  const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
   const [isShowModalOpen, setIsShowModalOpen] = useState(false);
-  if (!order) {
-    return <div>{fetchErrorMessages.noReservationData}</div>;
-  }
+  const useOneOrder = createResourceQuery<GetOneOrderResponse>(
+    `my-order-${userId}`, // 쿼리 키의 기본 이름
+    (orderId) => getOneOrder(orderId) // fetchFn으로 getAllOrder 사용
+  );
+  const { data, isLoading, isError } = useOneOrder(orderId);
 
+  const order = data?.data;
+  if (isLoading) return <p>{fetchErrorMessages.isLoading}</p>;
+  if (isError) return <p>{fetchErrorMessages.general}</p>;
+  if (!order) return <p>{fetchErrorMessages.noReservationData}</p>;
+
+  const handleCancelOrder = async () => {
+    try {
+      const response = await cancelOrder(orderId!);
+      if (response.code === 0) {
+        toast.success(cancelOrderErrorMessages.success);
+      } else {
+        switch (response.code) {
+          case 8:
+            toast.error(cancelOrderErrorMessages.unauthorized);
+            break;
+          case 15:
+            toast.error(cancelOrderErrorMessages.notFound);
+            break;
+          case 22:
+            toast.error(cancelOrderErrorMessages.alreadyCanceled);
+            break;
+          case 6:
+            toast.error(cancelOrderErrorMessages.internalServerError);
+            break;
+          default:
+            toast.error("알 수 없는 오류가 발생했습니다.");
+        }
+      }
+    } catch (error) {
+      console.log(error);
+      toast.error("취소 처리 중 오류가 발생했습니다.");
+    }
+  };
   // 모달 열기
-  const openCancleModal = () => setIsCancleModalOpen(true);
+  const openCancelModal = () => setIsCancelModalOpen(true);
   const openShowModal = () => setIsShowModalOpen(true);
 
   // 모달 닫기
-  const closeCancleModal = () => setIsCancleModalOpen(false);
+  const closeCancelModal = () => setIsCancelModalOpen(false);
   const closeShowModal = () => setIsShowModalOpen(false);
 
   // 예매 취소 확인
-  const handleCancelReservation = () => {
-    closeCancleModal(); // 모달 닫기
+  const handleCancelReservation = async () => {
+    closeCancelModal(); // 모달 닫기
+    await handleCancelOrder();
+    await queryClient.invalidateQueries({
+      queryKey: [`my-orders-${userId}`],
+    }); // orders 쿼리 무효화
     navigate("/mypage"); // 마이페이지로 이동
   };
 
@@ -123,15 +171,15 @@ const MyDetailPage = () => {
           {/* 예매 취소 버튼 */}
           <div className="fixed bottom-0 right-8 md:left-0 md:right-0 pb-4  flex justify-center">
             <Button
-              onClick={openCancleModal}
+              onClick={openCancelModal}
               className="bg-se-500 text-white px-6 py-3 rounded-lg hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-300"
             >
               예매 취소
             </Button>
           </div>
         </div>
         {/* 모달 */}
-        {isCancleModalOpen && (
+        {isCancelModalOpen && (
           <div className="fixed inset-0 flex items-center justify-center bg-black/50 z-50">
             <div className="bg-white rounded-lg shadow-lg p-6 w-96">
               <h2 className="text-xl font-bold mb-4">예매 취소</h2>
@@ -141,15 +189,20 @@ const MyDetailPage = () => {
               <div className="flex justify-end space-x-4">
                 <Button
                   size="sm"
-                  onClick={handleCancelReservation}
+                  onClick={() => {
+                    handleCancelReservation().catch((error) => {
+                      console.error("취소 처리 중 오류 발생:", error);
+                      toast.error("취소 처리 중 문제가 발생했습니다.");
+                    });
+                  }}
                   className="px-4 py-2 rounded-lg bg-red-500 text-white hover:bg-red-600"
                 >
                   예매 취소
                 </Button>
                 <Button
                   size="sm"
                   variant="secondary"
-                  onClick={closeCancleModal}
+                  onClick={closeCancelModal}
                   className="px-4 py-2 rounded-lg border border-gray-300 hover:bg-gray-100"
                 >
                   뒤로 가기

src/components/pages/MyPageUser.tsx

@@ -37,6 +37,7 @@ const MyPageUser = () => {
   const upcomingEvents = reservationData.filter(
     (reservation) => new Date(reservation.eventDate) >= currentTime
   );
+
   const renderReservationList = (events: GetOrder[], emptyMessage: string) => (
     <div className="mb-4">
       <ul className="space-y-4">
@@ -48,67 +49,65 @@ const MyPageUser = () => {
             <Button onClick={() => navigate("/")}>이벤트 보러가기</Button>
           </div>
         ) : (
-          events.map((reservation) => (
+          events.map((order) => (
             <li
-              key={reservation.orderId}
+              key={order.orderId}
               className="p-4 px-6 border border-gray-300 rounded-lg shadow-sm flex flex-col md:flex-row md:items-center space-x-4"
             >
               <div className="flex justify-around items-start m-2">
                 <img
-                  src={reservation.eventThumbnail}
-                  alt={reservation.eventTitle}
+                  src={order.eventThumbnail}
+                  alt={order.eventTitle}
                   className="md:w-16 h-24 rounded-lg object-cover"
                 />
               </div>
               <div className="flex-1 pl-3">
                 <h3 className="text-lg font-bold text-gray-700 mb-1">
-                  {reservation.eventTitle}
+                  {order.eventTitle}
                 </h3>
                 <p className="text-sm text-gray-500">
                   <span className="inline-block w-8 md:w-14 font-semibold">
                     예매
                   </span>
-                  {formatToKoreanDateAndTime(reservation.orderCreatedAt)}
+                  {formatToKoreanDateAndTime(order.orderCreatedAt)}
                 </p>
                 <p className="text-sm text-gray-500">
                   <span className="inline-block w-8 md:w-14 font-semibold">
                     일정
                   </span>
-                  {formatToKoreanDateAndTime(reservation.eventDate)}
+                  {formatToKoreanDateAndTime(order.eventDate)}
                 </p>
                 <p className="text-sm text-gray-500">
                   <span className="inline-block w-8 md:w-14 font-semibold">
                     장소
                   </span>
-                  {reservation.eventPlace}
+                  {order.eventPlace}
                 </p>
                 <p className="text-sm text-gray-500">
                   <span className="inline-block w-8 md:w-14 font-semibold">
                     출연
                   </span>
-                  {reservation.eventCast}
+                  {order.eventCast}
                 </p>
               </div>
               <Button
-                onClick={() =>
-                  navigate("/mypage/detail", {
-                    state: { order: reservation },
-                  })
-                }
+                onClick={() => navigate(`/mypage/detail/${order.orderId}`)}
                 className="hidden md:inline-block"
+                disabled={order.orderCanceledAt !== null}
               >
-                예매 정보 보기
+                {order.orderCanceledAt !== null
+                  ? "취소된 티켓"
+                  : "예매 정보 보기"}
               </Button>
               <Button
-                onClick={() =>
-                  navigate("/mypage/detail", {
-                    state: { order: reservation },
-                  })
-                }
+                onClick={() => navigate(`/mypage/detail/${order.orderId}`)}
                 size="sm"
                 className="mt-3 md:hidden"
+                disabled={order.orderCanceledAt !== null}
               >
-                예매 정보 보기
+                {order.orderCanceledAt !== null
+                  ? "취소된 티켓"
+                  : "예매 정보 보기"}
               </Button>
             </li>
           ))

src/components/pages/OrderPage.tsx

@@ -12,6 +12,7 @@ import { getUserPoints } from "../../api/users/usersApi";
 import { formatToKoreanDateAndTime } from "../../utils/dateUtils";
 import { useReservationContext } from "../../store/ReservationContext";
 import { UserContext } from "../../store/UserContext";
+import { useQueryClient } from "@tanstack/react-query";
 
 const OrderPage = () => {
   const navigate = useNavigate();
@@ -22,15 +23,15 @@ const OrderPage = () => {
   };
   const orderData = state.orderData;
   const eventData = state.eventData;
-
+  const queryClient = useQueryClient();
   const { userId } = useContext(UserContext);
   const { requestOrder, socket } = useReservationContext();
 
   const [isAgreed, setIsAgreed] = useState(false); // 구매 동의 체크박스 상태
   const [userPoints, setUserPoints] = useState<number>(-1);
   const [paymentMethod, setPaymentMethod] = useState<string | null>(null); // 선택된 결제 방법
 
-  const handlePayment = () => {
+  const handlePayment = async () => {
     if (!isAgreed) {
       toast.error("구매조건 확인 및 결제 진행에 동의해주세요!");
       return;
@@ -74,9 +75,9 @@ const OrderPage = () => {
       // if (response.code === 0) {
       //   toast.success("결제가 진행됩니다!");
 
-      // await queryClient.invalidateQueries({
-      //   queryKey: [`my-orders-${userId}`],
-      // }); // orders 쿼리 무효화
+      await queryClient.invalidateQueries({
+        queryKey: [`my-orders-${userId}`],
+      }); // orders 쿼리 무효화
       socket.on("orderApproved", (response: ApprovedOrderResponse) => {
         navigate(`/reservation-confirmation`, {
           state: { paymentData: response.data },
@@ -246,7 +247,10 @@ const OrderPage = () => {
                 </div>
                 <Button
                   onClick={() => {
-                    handlePayment();
+                    handlePayment().catch((error) => {
+                      console.error("결제 처리 중 오류 발생:", error);
+                      toast.error("결제 처리 중 문제가 발생했습니다.");
+                    });
                   }}
                   className="text-sm w-full"
                 >

src/components/templates/reservation-overview/ReservationConfirmationTemplate.tsx

@@ -38,11 +38,11 @@ const ReservationConfirmationTemplate = ({ data }: ReservationConfirmProps) => {
             {/* User Info */}
             <div className="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
               <div className="w-12 h-12 bg-rose-100 rounded-full flex items-center justify-center">
-                <span className="font-bold">{data.userEmail}</span>
+                <span className="font-bold">{data.userEmail.slice(0, 1)}</span>
               </div>
               <div>
                 <Font className="font-bold text-gray-800">
-                  {data.userEmail}
+                  {data.userEmail.slice(0, 3)}
                 </Font>
               </div>
             </div>

src/constants/errorMessages.ts

@@ -1,3 +1,5 @@
+const tokenErrorMessage = "로그인 세션이 만료되었습니다. 다시 로그인해주세요.";
+
 export const registerErrorMessages = {
   validation: {
     emailInvalid: "이메일 형식이 올바르지 않습니다.",
@@ -7,6 +9,15 @@ export const registerErrorMessages = {
   generic: "회원가입에 실패하였습니다.",
 };
 
+export const cancelOrderErrorMessages = {
+  success: "주문이 성공적으로 취소되었습니다.",
+  unauthorized: tokenErrorMessage,
+  notFound: "티켓을 찾을 수 없습니다.",
+  alreadyCanceled: "이 티켓은 이미 취소되었습니다.",
+  internalServerError:
+    "서버 내부 오류가 발생했습니다. 나중에 다시 시도해주세요.",
+};
+
 export const loginErrorMessages = {
   validation: {
     emailInvalid: "이메일을 입력해주세요.",
@@ -25,8 +36,6 @@ export const fetchErrorMessages = {
   noReservationData: "오류 발생: 예약 정보를 불러올 수 없습니다.",
 };
 
-const tokenErrorMessage = "로그인 세션이 만료되었습니다. 다시 로그인해주세요.";
-
 export const postEventErrorMessages = {
   invalidToken: tokenErrorMessage,
   general: "공연 등록에 실패하였습니다. 다시 시도해주세요.",

src/shared/Router.tsx

@@ -54,7 +54,7 @@ const Router = () => {
           path="manager/:eventId/:eventDateId"
           element={<WrappedManagerDetailPage />}
         />
-        <Route path="mypage/detail" element={<MyDetailPage />} />
+        <Route path="mypage/detail/:orderId" element={<MyDetailPage />} />
       </Routes>
     </BrowserRouter>
   );