[#87] Feat: 짤 이미지 신고 확인 모달 UI 구현 (#88)

Feat: 짤 이미지 신고 확인 모달 UI 구현

Modify: ModalHeader 컴포넌트의 children Props를 옵셔널로 변경

Refactor: hasCloseButton props에서 true 값 삭제

Refactor: AlertTrigangle에 aria-label 추가

src/components/ImageDetailModal/ImageMenuBar.tsx

@@ -1,17 +1,29 @@
 import { useState } from "react";
 import { toast } from "react-toastify";
+import { useOverlay } from "@toss/use-overlay";
 import { FolderDown, SendHorizontal, Siren, Heart, Trash2 } from "lucide-react";
+import ReportConfirmModal from "../ReportConfirmModal";
 import useDeleteMyZzal from "@/hooks/api/zzal/useDeleteMyZzal";
 
 const ImageMenuBar = () => {
   const { deleteMyZzal } = useDeleteMyZzal();
   const imageId = 166; // TODO: [2024-03-01] 이미지 상세보기 api 연결 후, 실제 imageId를 가져와야합니다.
   const [isLiked, setIsLiked] = useState(false);
+  const reportConfirmOverlay = useOverlay();
 
   const handleClickLike = () => {
     setIsLiked((prevLiked) => !prevLiked);
   };
 
+  const handleClickReportButton = () => {
+    reportConfirmOverlay.open(({ isOpen, close }) => (
+      <ReportConfirmModal
+        isOpen={isOpen}
+        onClose={close}
+        onReport={() => {}} // TODO: [2024-03-03] 짤 이미지 신고 api 연결 - onReport={handleClickReportConfirm(imageId)}
+      />
+    ));
+  };
   const handleClickDeleteButton = () => {
     deleteMyZzal(imageId, {
       onSuccess: () => {
@@ -27,7 +39,7 @@ const ImageMenuBar = () => {
     { Icon: FolderDown, name: "다운로드", onClick: () => {} },
     { Icon: Heart, name: "좋아요", onClick: handleClickLike },
     { Icon: SendHorizontal, name: "채팅 전송", onClick: () => {} },
-    { Icon: Siren, name: "신고하기", onClick: () => {} },
+    { Icon: Siren, name: "신고하기", onClick: handleClickReportButton },
     { Icon: Trash2, name: "삭제하기", onClick: handleClickDeleteButton },
   ];
 

src/components/ReportConfirmModal/index.tsx

@@ -0,0 +1,51 @@
+import { AlertTriangle, Siren } from "lucide-react";
+import Modal from "../common/modals/Modal";
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onReport: () => void;
+}
+
+const ReportConfirmModal = ({ isOpen, onClose, onReport }: Props) => {
+  const handleClickReportButton = () => {
+    onReport();
+    onClose();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} className="p-40pxr">
+      <Modal.Header hasCloseButton />
+      <Modal.Body>
+        <div className="flex flex-col items-center">
+          <AlertTriangle color="#ED0000" strokeWidth="1.2" size="84" aria-label="경고삼각형" />
+          <div className="mt-4 flex flex-col items-center gap-1">
+            <div className="text-xl font-extrabold sm:text-2xl">
+              정말로 이 사진을 신고하시겠습니까?
+            </div>
+            <div className="font-bold text-text-secondary">
+              신고된 사진은 기준에 맞게 조치됩니다.
+            </div>
+          </div>
+          <div className="mt-6 flex items-center gap-3 text-lg font-bold">
+            <button
+              className="h-12 w-32 rounded-[90px] text-text-secondary outline outline-offset-2 outline-transparent transition-[outline] hover:outline-primary"
+              onClick={onClose}
+            >
+              취소
+            </button>
+            <button
+              className="flex h-12 w-32 items-center justify-evenly rounded-90pxr bg-delete text-white outline outline-offset-2 outline-transparent transition-[outline_background-color] hover:outline-delete"
+              onClick={handleClickReportButton}
+            >
+              <Siren color="#FFFF" strokeWidth={2} aria-label="신고하기" />
+              신고하기
+            </button>
+          </div>
+        </div>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default ReportConfirmModal;

src/components/common/DeleteConfirmModal.tsx

@@ -18,7 +18,7 @@ const DeleteConfirmModal = ({ isOpen, onClose, onDelete }: Props) => {
     <Modal isOpen={isOpen} onClose={onClose} size="sm">
       <Modal.Body>
         <div className="flex flex-col items-center">
-          <AlertTriangle color="#ED0000" strokeWidth="1.2" size="84" />
+          <AlertTriangle color="#ED0000" strokeWidth="1.2" size="84" aria-label="경고삼각형" />
           <div className="mt-4 flex flex-col items-center gap-1">
             <div className="text-xl font-extrabold sm:text-2xl">
               정말로 이 사진을 제거하시겠습니까?

src/components/common/modals/ModalHeader.tsx

@@ -3,7 +3,7 @@ import useModalContext from "@/hooks/modals/useModalContext";
 
 interface Props {
   hasCloseButton?: boolean;
-  children: ReactNode;
+  children?: ReactNode;
 }
 
 const ModalHeader = ({ hasCloseButton = false, children }: Props) => {