From 88a9c577dbc67bc84fd92a8d32c3e5fab309dd09 Mon Sep 17 00:00:00 2001
From: inaemon <github32377@gmail.com>
Date: Wed, 27 Nov 2024 20:01:52 +0900
Subject: [PATCH] =?UTF-8?q?(#72)=20=F0=9F=9A=80=20feat:=20=EC=B1=97?=
 =?UTF-8?q?=EB=B4=87=20=EC=B1=84=ED=8C=85=EC=B0=BD=20=EC=98=81=EC=97=AD=20?=
 =?UTF-8?q?=EB=BF=90=EB=A7=8C=20=EC=95=84=EB=8B=88=EB=9D=BC=20=EC=A0=84?=
 =?UTF-8?q?=EC=B2=B4=20=EC=9C=88=EB=8F=84=EC=9A=B0=20=EC=98=81=EC=97=AD?=
 =?UTF-8?q?=EB=8F=84=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=95=84=EB=9E=98?=
 =?UTF-8?q?=EB=A1=9C=20=EB=82=B4=EB=A0=A4=EA=B0=80=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EC=9E=90=EB=8F=99=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=9D=B4?=
 =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Chatbot/Chatbot.tsx | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/pages/Chatbot/Chatbot.tsx b/src/pages/Chatbot/Chatbot.tsx
index aa65c27..3c0910a 100644
--- a/src/pages/Chatbot/Chatbot.tsx
+++ b/src/pages/Chatbot/Chatbot.tsx
@@ -30,11 +30,7 @@ const Chatbot = () => {
   // 챗봇 첫 인사 렌더링 관련
   useEffect(() => {
     // 챗봇 페이지 들어온 후 초기 메시지 표시
-    const timer = setTimeout(() => {
-      setShowInitialMessages(true);
-    }, );
-
-    return () => clearTimeout(timer);
+    setShowInitialMessages(true);
   }, []);
 
 
@@ -104,10 +100,20 @@ const Chatbot = () => {
     );
   }
 
-  // 자동 스크롤 기능
+  
+  // 스크롤을 조작할 영역(채팅창 div) 지정
   const chatContainerRef = useRef<HTMLDivElement>(null);
+
+  // 자동 스크롤 기능
   // 채팅이 추가될 때 스크롤 맨 아래로 이동
   const scrollToBottom = () => {
+    // 채팅 영역을 넘어서 전체 페이지를 맨 아래로 스크롤
+    window.scrollTo({
+      top: document.documentElement.scrollHeight,
+      behavior: 'smooth',  // 부드러운 스크롤
+    });
+    
+    // 채팅 영역 맨 아래로 스크롤
     if (chatContainerRef.current) {
       chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
     }
@@ -139,12 +145,12 @@ const Chatbot = () => {
         <BackLogoBar />
       </div>
 
-      <div className="flex justify-center items-center min-h-screen bg-grayscale-50 mt-[55px] pb-[60px]">
+      <div className="flex justify-center items-center h-full min-h-screen bg-grayscale-10 mt-[55px] pb-14">
         <div className="flex flex-col h-full max-w-[500px] w-full bg-grayscale-10">
           {/* 채팅 영역 */}
           <div
             ref={chatContainerRef}
-            className="flex-1 p-4 overflow-y-auto mb-10"
+            className="flex-1 px-3 py-4 h-full overflow-y-auto mb-10"
           >
       
             {/* 2. 오늘 날짜 */}
@@ -228,11 +234,11 @@ const Chatbot = () => {
             </div>
           </div>
           
+        </div>
+      </div>
 
           {/* 4. 채팅 입력창 */}
           <ChatbotInputField isStadiumSelected={isStadiumSelected} onSelect={handleCategorySelect} />
-        </div>
-      </div>
     </>
   );
 };