[#74] Feat: 짤 이미지 신고 api 연결 구현

src/apis/report.ts

@@ -0,0 +1,10 @@
+import { PostReportZzalRequeust } from "@/types/report.dto";
+import http from "./core";
+
+export const postReportZzal = async ({ imageId }: PostReportZzalRequeust) => {
+  const response = await http.post({
+    url: `/report/${imageId}`,
+  });
+
+  return response;
+};

src/components/ImageDetailModal/ImageMenuBar.tsx

@@ -1,18 +1,28 @@
 import { useState } from "react";
 import { FolderDown, SendHorizontal, Siren, Heart } from "lucide-react";
+import usePostReportZzal from "@/hooks/api/zzal/usePostReportZzal";
 
 const ImageMenuBar = () => {
+  const imageId = 152; // TODO: [2024-02-28] 이미지 상세보기 api 연결 후, 실제 imageId를 가져와야합니다.
   const [isLiked, setIsLiked] = useState(false);
 
   const handleClickLike = () => {
     setIsLiked((prevLiked) => !prevLiked);
   };
 
+  const reportZzal = usePostReportZzal();
+
+  const handleReportZzal = () => {
+    reportZzal({
+      imageId,
+    });
+  };
+
   const menuItems = [
     { Icon: FolderDown, name: "다운로드", onClick: () => {} },
     { Icon: Heart, name: "좋아요", onClick: handleClickLike },
     { Icon: SendHorizontal, name: "채팅 전송", onClick: () => {} },
-    { Icon: Siren, name: "신고하기", onClick: () => {} },
+    { Icon: Siren, name: "신고하기", onClick: handleReportZzal },
   ];
 
   return (

src/hooks/api/zzal/usePostReportZzal.ts

@@ -0,0 +1,12 @@
+import { useMutation } from "@tanstack/react-query";
+import { postReportZzal } from "@/apis/report";
+
+const usePostReportZzal = () => {
+  const { mutate: reportZzal } = useMutation({
+    mutationFn: postReportZzal,
+  });
+
+  return reportZzal;
+};
+
+export default usePostReportZzal;

src/types/report.dto.ts

@@ -1,4 +1,6 @@
-import { Report, ReportDetail } from "./report";
+import { Report, ReportDetail, ReportZzal } from "./report";
 
 export type GetReportResponse = Report[];
 export type GetReportDetailResponse = ReportDetail[];
+
+export type PostReportZzalRequeust = ReportZzal;

src/types/report.ts

@@ -10,3 +10,7 @@ export interface ReportDetail {
   reportUserEmail: string;
   tags?: { tagId: number; tagName: string }[];
 }
+
+export interface ReportZzal {
+  imageId: number;
+}