From f629e87fac1bd7899fe3b4c54bb7c0cdd9dee22d Mon Sep 17 00:00:00 2001
From: ahk0413 <rladkgusgd@gmail.com>
Date: Thu, 2 Oct 2025 19:37:34 +0900
Subject: [PATCH 1/5] =?UTF-8?q?[feat]=20=EB=A1=9C=EB=94=A9=20,=20fetch=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=ED=95=A8=EC=88=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../recommend/components/ChatSection.tsx      | 47 ++++++++++++-------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/domains/recommend/components/ChatSection.tsx b/src/domains/recommend/components/ChatSection.tsx
index 2f29080..a8bb131 100644
--- a/src/domains/recommend/components/ChatSection.tsx
+++ b/src/domains/recommend/components/ChatSection.tsx
@@ -34,6 +34,33 @@ function ChatSection() {
     selectedCocktailType?: string;
   }>({});
 
+  const handleSendMessage = async (payload: stepPayload | { message: string; userId: string }) => {
+    const typingTimer = setTimeout(() => setIsBotTyping(true), 300);
+
+    try {
+      if (!('currentStep' in payload)) {
+        const botMessage = await fetchSendTextMessage(payload);
+        clearTimeout(typingTimer);
+        setIsBotTyping(false);
+
+        if (!botMessage) return;
+        setTimeout(() => setMessages((prev) => [...prev, botMessage]), 500);
+        return;
+      }
+
+      const botMessage = await fetchSendStepMessage(payload);
+      clearTimeout(typingTimer);
+      setIsBotTyping(false);
+
+      if (!botMessage) return;
+      setTimeout(() => setMessages((prev) => [...prev, botMessage]), 500);
+    } catch (err) {
+      clearTimeout(typingTimer);
+      setIsBotTyping(false);
+      console.error(err);
+    }
+  };
+
   // 일반 텍스트 보낼 시
   const handleSubmitText = async (message: string) => {
     const userId = useAuthStore.getState().user?.id;
@@ -48,8 +75,7 @@ function ChatSection() {
       { id: tempId, userId, message, sender: 'USER', type: 'text', createdAt: tempCreatedAt },
     ]);
 
-    const botMessage = await fetchSendTextMessage({ message, userId });
-    if (botMessage) setMessages((prev) => [...prev, botMessage]);
+    await handleSendMessage({ message, userId });
   };
 
   // 옵션 클릭 시
@@ -104,22 +130,7 @@ function ChatSection() {
       ...selectedOptions.current,
     };
 
-    const typingTimer = setTimeout(() => setIsBotTyping(true), 300);
-
-    try {
-      const botMessage = await fetchSendStepMessage(payload);
-
-      clearTimeout(typingTimer);
-      setIsBotTyping(false);
-
-      if (botMessage) {
-        setMessages((prev) => [...prev, botMessage]);
-      }
-    } catch (err) {
-      clearTimeout(typingTimer);
-      setIsBotTyping(false);
-      console.error(err);
-    }
+    await handleSendMessage(payload);
   };
 
   // 채팅 기록 불러오기 없으면 greeting 호출

From 45f9d6b34d8f85cfbcfdc3967e6ff11282cb225a Mon Sep 17 00:00:00 2001
From: ahk0413 <rladkgusgd@gmail.com>
Date: Thu, 2 Oct 2025 20:24:43 +0900
Subject: [PATCH 2/5] =?UTF-8?q?[style]=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/recommend/page.tsx                               | 2 +-
 src/domains/recommend/components/ChatList.tsx            | 2 +-
 src/domains/recommend/components/ChatSection.tsx         | 2 +-
 src/domains/recommend/components/bot/NewMessageAlert.tsx | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/recommend/page.tsx b/src/app/recommend/page.tsx
index c49c438..a324aac 100644
--- a/src/app/recommend/page.tsx
+++ b/src/app/recommend/page.tsx
@@ -4,7 +4,7 @@ import Bg from '@/shared/assets/images/recommend_bg.webp';
 function Page() {
   return (
     <div
-      className="relative bg-repeat bg-auto w-full flex flex-col overflow-hidden"
+      className="relative bg-repeat bg-auto w-full flex flex-col"
       style={{ backgroundImage: `url(${Bg.src})` }}
     >
       <h1 className="sr-only">취향추천하기</h1>
diff --git a/src/domains/recommend/components/ChatList.tsx b/src/domains/recommend/components/ChatList.tsx
index 56eb6f3..bd0ffcb 100644
--- a/src/domains/recommend/components/ChatList.tsx
+++ b/src/domains/recommend/components/ChatList.tsx
@@ -53,8 +53,8 @@ function ChatList({
         {isBotTyping && <TypingIndicator />}
 
         <div ref={chatEndRef}></div>
-        {showNewMessageAlert && <NewMessageAlert onClick={handleScrollToBottom} />}
       </div>
+      {showNewMessageAlert && <NewMessageAlert onClick={handleScrollToBottom} />}
     </div>
   );
 }
diff --git a/src/domains/recommend/components/ChatSection.tsx b/src/domains/recommend/components/ChatSection.tsx
index a8bb131..335556e 100644
--- a/src/domains/recommend/components/ChatSection.tsx
+++ b/src/domains/recommend/components/ChatSection.tsx
@@ -156,7 +156,7 @@ function ChatSection() {
   };
 
   return (
-    <section className="relative flex-1 flex flex-col w-fulloverflow-hidden">
+    <section className="relative flex-1 flex flex-col w-full">
       <h2 className="sr-only">대화 목록 및 입력 창</h2>
       <ChatList
         messages={messages}
diff --git a/src/domains/recommend/components/bot/NewMessageAlert.tsx b/src/domains/recommend/components/bot/NewMessageAlert.tsx
index 7b49008..61dd4fe 100644
--- a/src/domains/recommend/components/bot/NewMessageAlert.tsx
+++ b/src/domains/recommend/components/bot/NewMessageAlert.tsx
@@ -8,8 +8,8 @@ interface Props {
 function NewMessageAlert({ onClick }: Props) {
   return (
     <button
-      className="absolute left-1/2 bottom-[80px] md:bottom-[6.25rem] -translate-x-1/2 flex-center gap-1 
-           w-[calc(100%-24px)] sm:w-fit bg-secondary text-primary rounded-full px-5 py-1 shadow-[0_2px_4px_rgba(255,255,255,0.3)] 
+      className="fixed left-1/2 bottom-25 -translate-x-1/2 flex-center gap-1 
+           w-[calc(100%-24px)] sm:w-fit bg-secondary text-primary rounded-full px-5 py-1 shadow-[0_2px_4px_rgba(0,0,0,0.4)] 
            hover:bg-tertiary hover:text-white active:bg-tertiary active:text-white
            transition-colors duration-200 ease-in-out"
       onClick={onClick}

From 42d1c7f7e3260e588ebeed20a524b386d1a2b95f Mon Sep 17 00:00:00 2001
From: ahk0413 <rladkgusgd@gmail.com>
Date: Thu, 2 Oct 2025 20:35:18 +0900
Subject: [PATCH 3/5] =?UTF-8?q?[refactor]=20scroll=20=EA=B4=80=EB=A0=A8=20?=
 =?UTF-8?q?chatlist=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/domains/recommend/components/ChatList.tsx    | 16 ++++++----------
 src/domains/recommend/components/ChatSection.tsx | 12 +-----------
 src/domains/recommend/types/recommend.ts         |  6 ------
 3 files changed, 7 insertions(+), 27 deletions(-)

diff --git a/src/domains/recommend/components/ChatList.tsx b/src/domains/recommend/components/ChatList.tsx
index bd0ffcb..a5dd219 100644
--- a/src/domains/recommend/components/ChatList.tsx
+++ b/src/domains/recommend/components/ChatList.tsx
@@ -1,3 +1,4 @@
+import { useChatScroll } from '../hook/useChatScroll';
 import { ChatListProps } from '../types/recommend';
 import BotMessage from './bot/BotMessage';
 import NewMessageAlert from './bot/NewMessageAlert';
@@ -9,13 +10,11 @@ function ChatList({
   userCurrentStep,
   onSelectedOption,
   getRecommendations,
-  chatListRef,
-  chatEndRef,
-  showNewMessageAlert,
-  handleCheckBottom,
-  handleScrollToBottom,
   isBotTyping,
 }: ChatListProps) {
+  const { chatListRef, chatEndRef, showNewMessageAlert, handleCheckBottom, handleScrollToBottom } =
+    useChatScroll(messages.length);
+
   return (
     <div
       ref={chatListRef}
@@ -23,10 +22,7 @@ function ChatList({
       className="absolute top-0 left-0 right-0 bottom-20 w-full gap-5 px-3 pt-12 pb-5 flex flex-col items-center overflow-y-auto pr-2"
     >
       <div className="max-w-1024 w-full">
-        {messages.map((msg, idx) => {
-          const isLastMessage = idx === messages.length - 1;
-          const showTyping = isLastMessage && msg.sender === 'CHATBOT' && isBotTyping;
-
+        {messages.map((msg) => {
           if (msg.sender === 'USER') {
             return <UserMessage key={`${msg.id}-${msg.sender}`} message={msg.message} />;
           }
@@ -53,8 +49,8 @@ function ChatList({
         {isBotTyping && <TypingIndicator />}
 
         <div ref={chatEndRef}></div>
+        {showNewMessageAlert && <NewMessageAlert onClick={handleScrollToBottom} />}
       </div>
-      {showNewMessageAlert && <NewMessageAlert onClick={handleScrollToBottom} />}
     </div>
   );
 }
diff --git a/src/domains/recommend/components/ChatSection.tsx b/src/domains/recommend/components/ChatSection.tsx
index 335556e..0519821 100644
--- a/src/domains/recommend/components/ChatSection.tsx
+++ b/src/domains/recommend/components/ChatSection.tsx
@@ -1,11 +1,7 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
-import BotMessage from './bot/BotMessage';
-import UserMessage from './user/UserMessage';
-import NewMessageAlert from './bot/NewMessageAlert';
 import MessageInput from './user/MessageInput';
-import { useChatScroll } from '../hook/useChatScroll';
 import {
   fetchChatHistory,
   fetchGreeting,
@@ -23,8 +19,7 @@ import ChatList from './ChatList';
 
 function ChatSection() {
   const [messages, setMessages] = useState<ChatMessage[]>([]);
-  const { chatListRef, chatEndRef, showNewMessageAlert, handleCheckBottom, handleScrollToBottom } =
-    useChatScroll(messages.length);
+
   const [userCurrentStep, setUserCurrentStep] = useState(0);
   const [isBotTyping, setIsBotTyping] = useState(false);
 
@@ -163,11 +158,6 @@ function ChatSection() {
         userCurrentStep={userCurrentStep}
         onSelectedOption={handleSelectedOption}
         getRecommendations={getRecommendations}
-        chatListRef={chatListRef}
-        chatEndRef={chatEndRef}
-        showNewMessageAlert={showNewMessageAlert}
-        handleCheckBottom={handleCheckBottom}
-        handleScrollToBottom={handleScrollToBottom}
         isBotTyping={isBotTyping}
       />
       <MessageInput onSubmit={handleSubmitText} />
diff --git a/src/domains/recommend/types/recommend.ts b/src/domains/recommend/types/recommend.ts
index fb98747..2ee1dde 100644
--- a/src/domains/recommend/types/recommend.ts
+++ b/src/domains/recommend/types/recommend.ts
@@ -60,11 +60,5 @@ export interface ChatListProps {
     stepData?: StepRecommendation | null
   ) => RecommendationItem[];
 
-  chatListRef: React.RefObject<HTMLDivElement | null>;
-  chatEndRef: React.RefObject<HTMLDivElement | null>;
-  showNewMessageAlert: boolean;
-  handleCheckBottom: (e: React.UIEvent<HTMLDivElement>) => void;
-  handleScrollToBottom: () => void;
-
   isBotTyping: boolean;
 }

From f109e422627a5d52867d8fa8a934204c3cd21e46 Mon Sep 17 00:00:00 2001
From: ahk0413 <rladkgusgd@gmail.com>
Date: Thu, 2 Oct 2025 21:33:22 +0900
Subject: [PATCH 4/5] =?UTF-8?q?[feat]=20input=20=EB=B0=B1=EA=B7=B8?=
 =?UTF-8?q?=EB=9D=BC=EC=9A=B4=EB=93=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/domains/recommend/components/ChatList.tsx   |  4 ++--
 .../recommend/components/ChatSection.tsx        |  5 +----
 .../recommend/components/user/MessageInput.tsx  |  6 +++---
 src/domains/recommend/hook/useChatScroll.ts     | 17 ++++++++++-------
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/domains/recommend/components/ChatList.tsx b/src/domains/recommend/components/ChatList.tsx
index a5dd219..ae2286a 100644
--- a/src/domains/recommend/components/ChatList.tsx
+++ b/src/domains/recommend/components/ChatList.tsx
@@ -13,13 +13,13 @@ function ChatList({
   isBotTyping,
 }: ChatListProps) {
   const { chatListRef, chatEndRef, showNewMessageAlert, handleCheckBottom, handleScrollToBottom } =
-    useChatScroll(messages.length);
+    useChatScroll(messages[messages.length - 1]?.id);
 
   return (
     <div
       ref={chatListRef}
       onScroll={handleCheckBottom}
-      className="absolute top-0 left-0 right-0 bottom-20 w-full gap-5 px-3 pt-12 pb-5 flex flex-col items-center overflow-y-auto pr-2"
+      className="absolute top-0 left-0 bottom-18 sm:bottom-21 w-full gap-5 px-3 pt-12 pb-4 flex flex-col items-center overflow-y-auto pr-2"
     >
       <div className="max-w-1024 w-full">
         {messages.map((msg) => {
diff --git a/src/domains/recommend/components/ChatSection.tsx b/src/domains/recommend/components/ChatSection.tsx
index 0519821..6aff917 100644
--- a/src/domains/recommend/components/ChatSection.tsx
+++ b/src/domains/recommend/components/ChatSection.tsx
@@ -113,9 +113,6 @@ function ChatSection() {
       case 3:
         selectedOptions.current.selectedAlcoholBaseType = value;
         break;
-      case 4:
-        selectedOptions.current.selectedCocktailType = value;
-        break;
     }
 
     const payload: stepPayload = {
@@ -151,7 +148,7 @@ function ChatSection() {
   };
 
   return (
-    <section className="relative flex-1 flex flex-col w-full">
+    <section className="relative flex-1 flex flex-col items-center w-full">
       <h2 className="sr-only">대화 목록 및 입력 창</h2>
       <ChatList
         messages={messages}
diff --git a/src/domains/recommend/components/user/MessageInput.tsx b/src/domains/recommend/components/user/MessageInput.tsx
index 6e884ae..4b8c228 100644
--- a/src/domains/recommend/components/user/MessageInput.tsx
+++ b/src/domains/recommend/components/user/MessageInput.tsx
@@ -21,9 +21,9 @@ function MessageInput({ onSubmit }: Props) {
   };
 
   return (
-    <div className="fixed left-1/2 bottom-0 -translate-x-1/2 w-full max-w-[64rem] px-3 py-4 bg-primary">
-      <form onSubmit={(e) => e.preventDefault()}>
-        <div className="flex items-end w-full gap-2">
+    <div className="fixed left-0 bottom-0 w-full px-3 py-4 flex-center bg-primary">
+      <form onSubmit={(e) => e.preventDefault()} className="w-full max-w-[64rem]">
+        <div className="flex items-end gap-2">
           <label htmlFor="chatInput" className="sr-only">
             질문 입력창
           </label>
diff --git a/src/domains/recommend/hook/useChatScroll.ts b/src/domains/recommend/hook/useChatScroll.ts
index 5c91aa9..abf5502 100644
--- a/src/domains/recommend/hook/useChatScroll.ts
+++ b/src/domains/recommend/hook/useChatScroll.ts
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
-export const useChatScroll = (messagesLength: number) => {
+export const useChatScroll = (lastMessageId: string) => {
   const chatEndRef = useRef<HTMLDivElement>(null);
   const chatListRef = useRef<HTMLDivElement>(null);
   const isScrollBottom = useRef(true);
@@ -17,13 +17,16 @@ export const useChatScroll = (messagesLength: number) => {
 
   // 새 메시지가 들어오면 자동 스크롤
   useEffect(() => {
-    if (isScrollBottom.current) {
-      chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-      setShowNewMessageAlert(false); // 새메세지 숨김
-    } else {
-      setShowNewMessageAlert(true); // 새메세지 보여줌
+    if (!isScrollBottom.current) {
+      setShowNewMessageAlert(true);
+      return;
     }
-  }, [messagesLength]);
+
+    requestAnimationFrame(() => {
+      chatEndRef.current?.scrollIntoView({ behavior: 'auto' });
+      setShowNewMessageAlert(false);
+    });
+  }, [lastMessageId]);
 
   // 스크롤 제일 아래로
   const handleScrollToBottom = () => {

From e5423c6f2b3cbf83cb0845fc6582a4213170d15f Mon Sep 17 00:00:00 2001
From: ahk0413 <rladkgusgd@gmail.com>
Date: Sat, 4 Oct 2025 15:13:09 +0900
Subject: [PATCH 5/5] =?UTF-8?q?[fix]=20cancelanimation=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/domains/recommend/hook/useChatScroll.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/domains/recommend/hook/useChatScroll.ts b/src/domains/recommend/hook/useChatScroll.ts
index abf5502..96a093e 100644
--- a/src/domains/recommend/hook/useChatScroll.ts
+++ b/src/domains/recommend/hook/useChatScroll.ts
@@ -22,10 +22,12 @@ export const useChatScroll = (lastMessageId: string) => {
       return;
     }
 
-    requestAnimationFrame(() => {
+    const frameId = requestAnimationFrame(() => {
       chatEndRef.current?.scrollIntoView({ behavior: 'auto' });
       setShowNewMessageAlert(false);
     });
+
+    return () => cancelAnimationFrame(frameId);
   }, [lastMessageId]);
 
   // 스크롤 제일 아래로