fix: 결제 에러 처리

Author: pepperdad

apps/ticket/src/app/(pages)/order/[orderId]/process/page.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
+import { isAxiosError } from "axios";
 
 import { usePaymentConfirmMutation } from "@/data/payments/postPaymentConfirm/mutation";
 import { LoadingWithLayout } from "@/shared/components/LoadingWithLayout";
@@ -32,15 +33,21 @@ const PaymentProcessPage = () => {
           `${window.location.origin}/order/${searchParams.get("orderId")}/success?eventName=${encodeURIComponent(eventName)}&eventDate=${encodeURIComponent(eventDate)}`,
         );
       } catch (error) {
-        // TODO: 에러 처리 로직 추가
         // 에러 메시지 세분화 요청
-        // 결제 실패 페이지로 라우팅
-        alert("결제 실패");
+        if (isAxiosError(error)) {
+          alert(error.message);
+        }
 
+        // 결제 실패 페이지로 라우팅
         window.location.replace(
           `${window.location.origin}/order/${searchParams.get("orderId")}/fail`,
         );
+
+        return;
       }
+
+      alert("알 수 없는 이유로 결제에 실패했습니다. 다시 시도해주세요.");
+      window.location.replace(`${window.location.origin}`);
     };
 
     handlePaymentConfirm();

apps/ticket/src/lib/axios/index.ts

@@ -39,7 +39,10 @@ instance.interceptors.response.use(
       return Promise.reject(error);
     }
 
-    if (error.response?.status === ERROR_CODE.SERVER_ERROR) {
+    if (error.response?.status === 500) {
+      // 결제 에러는 공통 alert 미노출
+      if (error.response?.data.code === ERROR_CODE.PAYMENT) return;
+
       alert("서버에러가 발생하였습니다. 관리자에게 문의해주세요.");
 
       return;

apps/ticket/src/lib/axios/utils/errorCode.ts

@@ -3,5 +3,5 @@ export const ERROR_CODE = {
   ACCESS_TOKEN_EXPIRED: 40103,
   REFRESH_TOKEN_EXPIRED: 40104,
   NO_ACCESS_TOKEN: 40403,
-  SERVER_ERROR: 500,
+  PAYMENT: 50004,
 } as const;