(#72) 🎨 design: 채팅창 이미지 클릭시 모달창으로 띄우기

src/components/dialogs/ImageModal.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from "react";
+import Image from "next/image";
+
+const ImageModal = ({ imageSrc, onClose }: { imageSrc: string, onClose: () => void }) => {
+    return (
+      <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
+        <div className="relative bg-white p-4 rounded-lg">
+          <Image 
+            src={imageSrc} 
+            alt="Enlarged" 
+            className="max-w-full max-h-full" />
+          <button 
+            onClick={onClose} 
+            className="absolute top-0 right-0 w-5 h-5 text-xl mr-3 text-grayscale-50 p-2 rounded-full">
+            X
+          </button>
+        </div>
+      </div>
+    );
+  };
+
+  export default ImageModal;

src/pages/Chatbot/components/message/custom/RookieImageMessage.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import Image from "next/image";
 import { maxChatWidth } from "@/src/constants/ChatbotData";
+import ImageModal from "@/src/components/dialogs/ImageModal";
 
 interface Props {
   imgUrl: string;
@@ -9,14 +10,32 @@ interface Props {
 // 챗봇 커스텀 말풍선 컴포넌트
 // 이미지를 출력하는 말풍선
 const RookieImageMessage = ({imgUrl}: Props) => {
+  // 이미지 모달 
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedImage, setSelectedImage] = useState<string>("");
+
+  const openModal = (imageSrc: string) => {
+    setSelectedImage(imageSrc);
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+    setSelectedImage("");
+  };
+
   return (
     <div className="mb-2">
         {/* 이미지 내용 */}
         <Image
             src={imgUrl}
             alt="Category Icon"
-            className={`${maxChatWidth} h-auto rounded-md`}
+            className={`${maxChatWidth} h-auto rounded-md cursor-pointer`}
+            onClick={() => openModal(imgUrl)}
         />
+
+        {/* 이미지를 모달창으로 띄우기 */}
+        {isModalOpen && <ImageModal imageSrc={selectedImage} onClose={closeModal} />}
     </div>
   );
 };