(#79) 🔄 refactor: 챗 컴포넌트는 하나의 디렉토리 안으로 정리

src/pages/Chatbot/Chatbot.tsx

@@ -9,9 +9,9 @@ import DateBanner from "./components/DateBanner";
 import { questionCategories, GuideResponseData } from "@/src/constants/ChatbotData";
 import { GuideGetResponseType } from "@/src/api/ChatbotApiType";
 
-import RookieChat from "./components/RookieChat";
-import UserChat from "./components/UserChat";
-import CategoryChat from "./components/CategoryChat";
+import RookieChat from "./components/chat/RookieChat";
+import UserChat from "./components/chat/UserChat";
+import CategoryChat from "./components/chat/CategoryChat";
 
 import RookieImageMessage from "./components/message/custom/RookieImageMessage";
 import chatbotManualIcon from "@/src/assets/webp/chatbot_manual.webp";
@@ -96,9 +96,6 @@ const Chatbot = () => {
     const answerLinkName = response.linkName;
     const answerLink = response.link;
 
-    console.log(answerLinkName);
-    console.log(answerLink);
-
     const answerListWithImg = [
       { type: "imgUrl", content: answerImageUrl },
       { type: "preformattedText", content: answerString }

src/pages/Chatbot/components/Chatting.tsx

@@ -0,0 +1,35 @@
+import React, { useState, useEffect, useRef } from "react";
+
+// 시간 순서대로 챗 컴포넌트를 출력하는 컴포넌트
+const ChatWithComponents = () => {
+    const [components, setComponents] = useState<any[]>([]); // 시간에 따라 띄울 컴포넌트들
+    const chatContainerRef = useRef<any>(null); // 채팅 컨테이너 참조
+
+    // 컴포넌트 추가하는 함수
+    const addComponent = (component: JSX.Element) => {
+      setComponents((prevComponents) => [...prevComponents, component]);
+    };
+
+    useEffect(() => {
+      // 컴포넌트 추가 후 자동 스크롤
+      if (chatContainerRef.current) {
+        chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
+      }
+    }, [components]); // 컴포넌트가 추가될 때마다 실행
+
+    return (
+      <div
+        ref={chatContainerRef}
+        style={{ height: "300px", overflowY: "auto", padding: "10px", border: "1px solid #ccc" }}
+      >
+        {/* 시간 순으로 추가된 컴포넌트 렌더링 */}
+        {components.map((component, index) => (
+          <div key={index} style={{ marginBottom: "10px" }}>
+            {component}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  export default ChatWithComponents;

src/pages/Chatbot/components/RookieChat.tsx → src/pages/Chatbot/components/chat/RookieChat.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from "react";
 
-import RookieProfile from "./rookie/RookieProfile";
-import RookieMessageWithTail from "./message/RookieMessageWithTail";
-import RookieMessage from "./message/RookieMessage";
+import RookieProfile from "@/src/pages/Chatbot/components/rookie/RookieProfile";
+import RookieMessageWithTail from "@/src/pages/Chatbot/components/message/RookieMessageWithTail";
+import RookieMessage from "@/src/pages/Chatbot/components/message/RookieMessage";
 import RookiePreformattedMessageWithTail from "@/src/pages/Chatbot/components/message/custom/RookiePreformattedMessageWithTail";
 import RookiePreformattedMessage from "@/src/pages/Chatbot/components/message/custom/RookiePreformattedMessage";
 import RookieImageMessage from "@/src/pages/Chatbot/components/message/custom/RookieImageMessage";

src/pages/Chatbot/components/UserChat.tsx → src/pages/Chatbot/components/chat/UserChat.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import UserMessageWithTail from "./message/UserMessageWithTail";
+import UserMessageWithTail from "@/src/pages/Chatbot/components/message/UserMessageWithTail";
 
 interface Props {
     messageList: string[];