(#72) 🚀 feat: 챗봇 가이드 API 데이터 link, linkName 추가 및 연동

src/api/ChatbotApiHandler.ts

@@ -23,7 +23,9 @@ export const handleGetGuideAnswer = async ({stadiumName, categoryName, orderNumb
         const data = response.payload;
         const parsedData = {
             answer: data.answer,
-            imageUrl: data.imgUrl ?? "", // imgUrl이 null일 경우 빈 문자열 반환
+            imageUrl: data.imgUrl ?? "",    // imgUrl이 null일 경우 빈 문자열 반환
+            linkName: data.linkName ?? "",  // linkName이 null일 경우 빈 문자열 반환
+            link: data.link ?? "",          // link가 null일 경우 빈 문자열 반환
         };
 
         //console.log(parsedData);

src/api/ChatbotApiType.ts

@@ -34,5 +34,7 @@ export interface GuideGetParamsType {
 // GET 응답
 export interface GuideGetResponseType {
     answer: string;
-    imgUrl: string | null;
+    imgUrl: string | null;      // 이미지
+    linkName: string | null;    // 이동 경로명
+    link: string | null;        // 이동 경로
 }

src/pages/Chatbot/Chatbot.tsx

@@ -55,13 +55,14 @@ const Chatbot = () => {
   const [responseGuideDataList, setResponseGuideDataList] = useState<GuideResponseData[]>([]); // 세부 카테고리 index와 매핑하여 API 응답 저장
 
   // API 응답을 category index에 매핑하여 저장
-  const handleGuideResponseUpdate = (answer: string, imgUrl: string, categoryKey: number, categoryName: string, subCategoryKey: number, subCategoryName: string) => {
+  const handleGuideResponseUpdate = (answer: string, imgUrl: string, link: string, categoryKey: number, categoryName: string, subCategoryKey: number, subCategoryName: string) => {
     setResponseGuideDataList((prev) => [
       ...prev,
 
       {
         answer: answer,
         imgUrl: imgUrl,
+        link; link,
         categoryNumber: categoryKey,
         categoryName: categoryName,
         subcategoryNumber: subCategoryKey,
@@ -75,13 +76,18 @@ const Chatbot = () => {
   const renderGuideAnswerData = (response: GuideGetResponseType) => {
     const answerImageUrl = response.imgUrl;
     const answerString = response.answer;
+    const answerLinkName = response.linkName;
+    const answerLink = response.link;
 
     const answerListWithImg = [
       { type: "imgUrl", content: answerImageUrl },
       { type: "preformattedText", content: answerString }
     ];
     const answerList = [
-      { type: "preformattedTextWithTail", content: answerString },
+      { type: "preformattedTextButtonWithTail", content: answerString },
+    ];
+    const answerListWithBtn = [
+      { type: "preformattedTextWithTail", content: answerString, buttonMsg: answerLinkName, buttonLinkUrl: answerLink },
     ];
 
     return (
@@ -91,6 +97,11 @@ const Chatbot = () => {
           <RookieChat 
             contentList={answerListWithImg}
           />
+        : answerLink  ?
+          // 이미지, 답변, 링크로 이동하는 버튼 출력
+          <RookieChat 
+            contentList={answerListWithBtn}
+          />
         : 
           // 답변 출력
           <RookieChat