[#133] Feat: 짤 신고 시 BE 커스텀 error code에 따라 구분된 신고 Toast 메시지 출력 (#137)

Feat: 짤 신고 시 BE 커스텀 error code에 따라 구분된 신고 Toast 메시지 출력

Fix: BE custom code가 REPORT_ALREADY_EXIST_ERROR일 경우만 이미 신고된 이미지 토스트 출력

Refactor: 디스트럭처링 할당으로 에러 응답 데이터의 중복 코드 제거 및 개선

src/components/ImageDetailModal/index.tsx

@@ -2,6 +2,7 @@ import { useState, Fragment, Suspense } from "react";
 import { toast } from "react-toastify";
 import { Heart, Copy, FolderDown, SendHorizontal, Siren, Trash2, Hash } from "lucide-react";
 import { useOverlay } from "@toss/use-overlay";
+import axios, { AxiosError } from "axios";
 import { cn } from "@/utils/tailwind";
 import { copyZzal, downloadZzal } from "@/utils/zzalUtils";
 import { debounce } from "@/utils/debounce";
@@ -18,6 +19,11 @@ interface Props {
   onClose: () => void;
 }
 
+interface CustomErrorResponse {
+  statusCode: number;
+  code: string;
+}
+
 const IMAGEID = 70;
 //TODO: [2024.03.06] 실제 IMAGEID 받기
 
@@ -34,13 +40,28 @@ const ImageDetailModalContent = () => {
   const isUploader = uploadUserId === 19;
   //TODO: [2024.03.01] 추후 실제 사용자 아이디와 비교하기
 
+  const errorMessage = {
+    REPORT_ALREADY_EXIST_ERROR: "이미 신고가 완료되었습니다.",
+    DEFAULT: "신고가 올바르게 되지 않았습니다.",
+  };
+
   const handleClickReportCompeleteButton = (imageId: number) => () => {
     reportZzal(imageId, {
       onSuccess: () => {
         toast.success("신고가 완료되었습니다.");
       },
-      onError: () => {
-        // TODO: [2024-03-06] http error code 별 메세지(ex. 이미 신고가 완료되었습니다) 추가
+      onError: (error: Error | AxiosError) => {
+        if (!axios.isAxiosError(error)) {
+          return;
+        }
+
+        const { statusCode, code } = error.response?.data as CustomErrorResponse;
+
+        if (statusCode === 400 && code === "REPORT_ALREADY_EXIST_ERROR") {
+          toast.error(errorMessage[code]);
+        } else {
+          toast.error(errorMessage["DEFAULT"]);
+        }
       },
     });
   };