(#80) 🐻 INAE: 챗봇 클로바 기능과 시간순 렌더링 구현 및 머지

(#79) 🚀 feat: 챗봇 클로바 기능 구현 및 챗봇 가이드 디테일 수정
Merge pull request #80 from KUSITMS-30th-TEAM-A/feat/#79-chatbotClova

src/api/ChatbotApiHandler.ts

@@ -1,9 +1,10 @@
 
-import { getGuide } from "./ChatbotApiService";
-import { GuideGetParamsType } from "./ChatbotApiType";
+import { postClova, getGuide } from "./ChatbotApiService";
+import { ClovaPostRequestType, GuideGetParamsType } from "./ChatbotApiType";
 
 import { getStadiumChatApiData } from "@/src/constants/ChatbotData";
 
+
 export const handleGetGuideAnswer = async ({stadiumName, categoryName, orderNumber}: GuideGetParamsType) => {
     try {
         const stadiumApiData = getStadiumChatApiData(stadiumName);
@@ -17,7 +18,7 @@ export const handleGetGuideAnswer = async ({stadiumName, categoryName, orderNumb
             }
         );
 
-        console.log("챗봇 가이드 데이터 받았당 >> ", response);
+        //console.log("챗봇 가이드 데이터 받았당 >> ", response);
 
         // 파싱
         const data = response.payload;
@@ -35,4 +36,32 @@ export const handleGetGuideAnswer = async ({stadiumName, categoryName, orderNumb
     } catch (error) {
         console.error('챗봇 가이드 데이터 가져오는 중 오류 발생:', error);
     }
+};
+
+
+export const handleGetClovaAnswer = async ({message}: ClovaPostRequestType) => {
+    try {
+
+        // API 요청
+        const response = await postClova(
+            {
+                message: message,
+            }
+        );
+
+        console.log("챗봇 클로바 데이터 받았당 >> ", response);
+
+        // 파싱
+        const data = response.payload;
+        const parsedData = {
+            answer: data.answer,    // 클로바 답변
+        };
+
+        //console.log(parsedData);
+
+        return parsedData;
+
+    } catch (error) {
+        console.error('챗봇 클로바 데이터 가져오는 중 오류 발생:', error);
+    }
 };

src/api/ChatbotApiService.ts

@@ -9,7 +9,7 @@ import { clovaURL, ClovaPostParamsType, ClovaPostRequestType,
 /** 백엔드와 API 연동 */
 // 추가: POST 요청 및 응답받기
 export const postClova = async (
-  {  }: ClovaPostParamsType,
+  //{  }: ClovaPostParamsType,
   {message}: ClovaPostRequestType) => {
 
   try {

src/components/dialogs/ImageModal.tsx

@@ -1,18 +1,19 @@
 import React, { useState } from "react";
 import Image from "next/image";
+import closeButtonIcon from "@/src/assets/svg/chatbot_imagemodal_close_button.svg";
 
 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" 
+            alt="확대 이미지" 
             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
+            className="absolute top-0 right-0 text-grayscale-50 p-2 rounded-full">
+            <Image src={closeButtonIcon} alt="닫기 버튼"  width={24} height={24}/>
           </button>
         </div>
       </div>

src/components/dialogs/ImgUrlModal.tsx

@@ -1,4 +1,6 @@
 import React, { useState } from "react";
+import Image from "next/image";
+import closeButtonIcon from "@/src/assets/svg/chatbot_imagemodal_close_button.svg";
 
 const ImgUrlModal = ({ imageUrl, onClose }: { imageUrl: string, onClose: () => void }) => {
     return (
@@ -7,12 +9,12 @@ const ImgUrlModal = ({ imageUrl, onClose }: { imageUrl: string, onClose: () => v
           {/* imageUrl이 외부 url(https://) 이면 Image 컴포넌트로 띄우면 오류가 발생해서 img tag로 출력 */}
           <img 
             src={imageUrl} 
-            alt="Enlarged" 
+            alt="확대 이미지" 
             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
+            className="absolute top-0 right-0 text-grayscale-50 p-2 rounded-full">
+            <Image src={closeButtonIcon} alt="닫기 버튼"  width={24} height={24}/>
           </button>
         </div>
       </div>

src/constants/ChatbotData.ts

@@ -132,13 +132,4 @@ export const getStadiumChatApiData = (frontendStadiumValue: string): string => {
 
   // backendParameters에서 매칭되는 값 반환
   return backendParameters[index];
-};
-
-export interface GuideResponseData {
-  answer: string;             // 백엔드로부터 받은 챗봇 가이드 답변 데이터
-  imgUrl: string;             // 백엔드로부터 받은 챗봇 가이드 이미지 데이터
-  categoryNumber: number;     // 사용자가 선택한 큰 카테고리
-  categoryName: string;       // 사용자가 선택한 큰 카테고리명
-  subcategoryNumber: number;  // 사용자가 선택한 세부 카테고리
-  subCategoryName: string;    // 사용자가 선택한 세부 카테고리명
-}
+};