(#72) ✨ style: 주석 추가 및 코드 안정성을 위해 세미콜론 추가

src/pages/Chatbot/components/CategoryChat.tsx

@@ -11,9 +11,9 @@ import { GuideGetResponseType } from "@/src/api/ChatbotApiType";
 import { handleGetGuideAnswer } from "@/src/api/ChatbotApiHandler";
 
 interface Props {
-    stadiumName: string,
-    categoryKey: number,
-    categoryFrontName: string
+    stadiumName: string;
+    categoryKey: number;
+    categoryFrontName: string;
     onResponseUpdate: (answer: string, imgUrl: string, categoryKey: number, categoryName: string, subCategoryKey: number, subCategoryName: string) => void; // 부모로 데이터 전달 콜백
 }
 

src/pages/Chatbot/components/DateBanner.tsx

@@ -1,7 +1,7 @@
 import { getFormattedDate1 } from "@/src/hooks/useDate";
 
 interface Props {
-    date: Date
+    date: Date;
 }
 
 // 채팅창 상단에 뜨는 날짜 헤더 바

src/pages/Chatbot/components/message/RookieMessage.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 
 interface Props {
-    messageList: string[]
+    messageList: string[]; // 문자열을 배열로 받아서 다음 줄에 작성
 }
 
 // 챗봇 말풍선 컴포넌트 타입2
 const RookieMessage = ({messageList}: Props) => {
   return (
+    // 메시지를 string 배열로 받고 줄바꿈을 배열 원소로 구분해서 출력하기
     <div className="bg-main-0 p-3 rounded-lg text-xs font-regular text-grayscale-90 max-w-xs">
         {/** 메시지 1줄 이상 배열로 받아서 여러 p태그로 메시지 출력하기 */}
         {messageList.map((message, index) => (

src/pages/Chatbot/components/message/RookieMessageWithTail.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 import tailIcon from "@/src/assets/webp/chatbot_message_left_tail_white_big.webp";  // 꼬랑지
 
 interface Props {
-    messageList: string[]
+    messageList: string[];
 }
 
 // 챗봇 말풍선 컴포넌트 타입1 (꼬랑지가 붙은 버젼)

src/pages/Chatbot/components/message/UserMessageWithTail.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 import tailIcon from "@/src/assets/webp/chatbot_message_right_tail_pink_big.webp";  // 꼬랑지
 
 interface Props {
-    messageList: string[]
+    messageList: string[];
 }
 
 // 유저 말풍선 컴포넌트 타입1 (꼬랑지가 붙은 버젼)

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

@@ -1,18 +1,16 @@
 import React from "react";
 
 interface Props {
-    messageList: string[]
+    message: string;
 }
 
 // 챗봇 커스텀 말풍선 컴포넌트
 // /n(new line) 등이 반영되도록 whitespace-pre-wrap 스타일 적용한 말풍선
-const RookiePreformattedMessage = ({messageList}: Props) => {
+const RookiePreformattedMessage = ({message}: Props) => {
   return (
+    // 메시지를 string으로 받고 줄바꿈을 \n 값으로 구분해서 출력하기
     <div className="whitespace-pre-wrap bg-main-0 p-3 rounded-lg text-xs font-regular text-grayscale-90 max-w-xs">
-        {/** 메시지 1줄 이상 배열로 받아서 여러 p태그로 메시지 출력하기 */}
-        {messageList.map((message, index) => (
-          <p key={index}>{message}</p>
-        ))}
+      {[message]}
     </div>
   );
 };

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

@@ -3,21 +3,20 @@ import Image from "next/image";
 import tailIcon from "@/src/assets/webp/chatbot_message_left_tail_white_big.webp";  // 꼬랑지
 
 interface Props {
-    messageList: string[]
+    message: string;
 }
 
 // 챗봇 커스텀 말풍선 컴포넌트 (꼬랑지가 붙은 버젼)
 // /n(new line) 등이 반영되도록 whitespace-pre-wrap 스타일 적용한 말풍선
-const RookiePreformattedMessage = ({messageList}: Props) => {
+const RookiePreformattedMessage = ({message}: Props) => {
   return (
+    // 메시지를 string으로 받고 줄바꿈을 \n 값으로 구분해서 출력하기
     <div className="whitespace-pre-wrap bg-main-0 p-3 rounded-lg text-xs font-regular text-grayscale-90 max-w-xs">
         {/* 말풍선 꼬랑지 */}
         <Image src={tailIcon} alt="꼬랑지" className="absolute left-[-12px] top-2 w-5 h-5"/>
 
-        {/** 메시지 1줄 이상 배열로 받아서 여러 p태그로 메시지 출력하기 */}
-        {messageList.map((message, index) => (
-          <p key={index}>{message}</p>
-        ))}
+        {/* 메시지 출력 */}
+        {[message]}
     </div>
   );
 };

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

@@ -1,7 +1,7 @@
 import React from "react";
 
 interface Props {
-    messageList: string[]
+    messageList: string[];
 }
 
 // 챗봇 커스텀 말풍선 컴포넌트

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

@@ -3,7 +3,7 @@ import Image from "next/image";
 import tailIcon from "@/src/assets/webp/chatbot_message_left_tail_white_big.webp";  // 꼬랑지
 
 interface Props {
-    messageList: string[]
+    messageList: string[];
 }
 
 // 챗봇 커스텀 말풍선 컴포넌트 (꼬랑지가 붙은 버젼)