(#79) 🐞 fix: 배포 오류 (문법 오류) 해결

KUSITMS-30th-TEAM-A · Nov 28, 2024 · 9792c45 · 9792c45
1 parent 04a2ced
commit 9792c45
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 30 deletions.
diff --git a/src/pages/Chatbot/Chatbot.tsx b/src/pages/Chatbot/Chatbot.tsx
@@ -9,7 +9,7 @@ import DateBanner from "./components/DateBanner";
 import { questionCategories } from "@/src/constants/ChatbotData";
 import { GuideGetResponseType, ClovaPostResponseType } from "@/src/api/ChatbotApiType";
 
-import RookieChat from "./components/chat/RookieChat";
+import RookieChat, { RookieChatContentType } from "./components/chat/RookieChat";
 import UserChat from "./components/chat/UserChat";
 import CategoryChat from "./components/chat/CategoryChat";
 
@@ -88,7 +88,7 @@ const Chatbot = () => {
     return (
       <>
         {/* 루키 사용 설명서 */}
-        <RookieImageMessage imgIcon={chatbotManualIcon} />
+        <RookieImageMessage imgIcon={chatbotManualIcon.src} />
 
         {/* 스타디움 선택창 */}
         <StadiumSelection stadiums={stadiumList} onSelect={handleStadiumSelect} />
@@ -115,7 +115,7 @@ const Chatbot = () => {
         contentList={[
           {
             type: "component",
-            content: <CategoryChat stadiumName={selectedStadium} categoryKey={0} categoryFrontName={selectedCategoryFrontName} onGuideResponseUpdate={renderSubCategoryChat} />
+            content: <CategoryChat stadiumName={selectedStadium} categoryFrontName={selectedCategoryFrontName} onGuideResponseUpdate={renderSubCategoryChat} />
           }
         ]}
       />
@@ -146,51 +146,50 @@ const Chatbot = () => {
     );
   }
 
-
   // 가이드 답변 렌더링
   const renderGuideAnswerData = (response: GuideGetResponseType) => {
-    const answerImageUrl = response.imgUrl;
-    const answerString = response.answer;
-    const answerLinkName = response.linkName;
-    const answerLink = response.link;
+    const answerImageUrl = response.imgUrl ?? "";
+    const answerString = response.answer ?? "";
+    const answerLinkName = response.linkName ?? "";
+    const answerLink = response.link ?? "";
 
-    const answerListWithImg = [
+    const answerListWithImg: RookieChatContentType[] = [
       { type: "imgUrl", content: answerImageUrl },
       { type: "preformattedText", content: answerString }
     ];
-    const answerList = [
+    const answerList: RookieChatContentType[] = [
       { type: "preformattedTextWithTail", content: answerString },
     ];
-    const answerListWithBtn = [
+    const answerListWithBtn: RookieChatContentType[] = [
       { type: "preformattedTextButtonWithTail", content: answerString, buttonContent: answerLinkName, url: answerLink },
     ];
 
     return (
       <>
-        {answerImageUrl  ?
+        {answerImageUrl  ? (
           // 이미지, 답변 출력
           <RookieChat 
             contentList={answerListWithImg}
           />
-        : answerLink  ?
+        ): answerLink  ? (
           // 이미지, 답변, 링크로 이동하는 버튼 출력
           <RookieChat 
             contentList={answerListWithBtn}
           />
-        : 
+        ): (
           // 답변 출력
           <RookieChat 
             contentList={answerList}
           />
-        }
+        )}
       </>
     );
   }
 
 
   // 쿨로바 답변 랜더링
-  const renderClovaAnswerData = (question: string, answer: ClovaPostResponseType) => {
-    const answerList = [
+  const renderClovaAnswerData = (question: string, answer: string) => {
+    const answerList: RookieChatContentType[] = [
       { type: "preformattedTextWithTail", content: answer },
     ];
 

diff --git a/src/pages/Chatbot/components/chat/CategoryChat.tsx b/src/pages/Chatbot/components/chat/CategoryChat.tsx
@@ -37,7 +37,7 @@ const CategoryChat = ({stadiumName, categoryFrontName, onGuideResponseUpdate}: P
             {"image" in categoryData && categoryData.image && (
                 <div className="mb-2">
                     {/* 이미지 내용 출력*/}
-                    <RookieImageMessage imgIcon={categoryData.image} />
+                    <RookieImageMessage imgIcon={categoryData.image.src} />
                 </div>
             )}
 

diff --git a/src/pages/Chatbot/components/chat/RookieChat.tsx b/src/pages/Chatbot/components/chat/RookieChat.tsx
@@ -7,6 +7,7 @@ import RookiePreformattedMessageWithTail from "@/src/pages/Chatbot/components/me
 import RookiePreformattedMessage from "@/src/pages/Chatbot/components/message/custom/RookiePreformattedMessage";
 import RookieImageMessage from "@/src/pages/Chatbot/components/message/custom/RookieImageMessage";
 import RookieImgUrlMessage from "@/src/pages/Chatbot/components/message/custom/RookieImgUrlMessage";
+import RookiePreformattedButtonMessage from "@/src/pages/Chatbot/components/message/custom/RookiePreformattedButtonMessage";
 import RookiePreformattedButtonMessageWithTail from "@/src/pages/Chatbot/components/message/custom/RookiePreformattedButtonMessageWithTail";
 
 import { questionCategories } from "@/src/constants/ChatbotData";
@@ -37,20 +38,22 @@ import { questionCategories } from "@/src/constants/ChatbotData";
 //      -> \n 을 줄바꿈으로 인식하는 버튼이 달린 꼬랑지 말풍선에 출력
 // 9. 버튼 + 문자열
 //      -> \n 을 줄바꿈으로 인식하는 버튼이 달린 일반 말풍선에 출력
+export type RookieChatContentType = |
+{ type: "image"; content: string } | 
+{ type: "imgUrl"; content: string } | 
+{ type: "component"; content: React.ReactNode} | 
+{ type: "textListWithTail"; content: string[] } | 
+{ type: "textList"; content: string[] } | 
+{ type: "preformattedTextWithTail"; content: string } |
+{ type: "preformattedText"; content: string } |
+{ type: "preformattedTextButtonWithTail"; content: string; buttonContent:string; url: string; } |
+{ type: "preformattedTextButton"; content: string; buttonContent:string; url: string; };
+
 interface RookieChatProps { /*
+
     initialMessage?: string[];
     initialPreformattedMessage?: string; */
-    contentList?: Array<
-        { type: "image"; content: string } | 
-        { type: "imgUrl"; content: string } | 
-        { type: "component"; content: React.ReactNode} | 
-        { type: "textListWithTail"; content: string[] } | 
-        { type: "textList"; content: string[] } | 
-        { type: "preformattedTextWithTail"; content: string } |
-        { type: "preformattedText"; content: string } |
-        { type: "preformattedTextButtonWithTail"; content: string; buttonContent:string; url: string; } |
-        { type: "preformattedTextButton"; content: string; buttonContent:string; url: string; }
-    >;
+    contentList?: Array<RookieChatContentType>;
 }
 
 // 루키 채팅 한 세트를 그룹화한 컴포넌트

diff --git a/src/pages/Chatbot/components/input/ChatbotInputField.tsx b/src/pages/Chatbot/components/input/ChatbotInputField.tsx
@@ -16,7 +16,7 @@ import { handleGetClovaAnswer } from "@/src/api/ChatbotApiHandler";
 interface Props {
   isStadiumSelected: boolean; // boolean 값을 props로 받음
   onSelect: (category: string) => void;
-  onClovaResponseUpdate: (answer: string) => void;
+  onClovaResponseUpdate: (question: string, answer: string) => void;
 }
 
 const ChatbotInputField = ({isStadiumSelected, onSelect, onClovaResponseUpdate}: Props) => {