From eb5f78cfe6776a44b63dcc2163981f4f8310ba27 Mon Sep 17 00:00:00 2001
From: ahk0413 <rladkgusgd@gmail.com>
Date: Tue, 30 Sep 2025 14:22:39 +0900
Subject: [PATCH 1/3] =?UTF-8?q?[fix]=20=ED=99=98=EC=98=81=ED=8C=9D?=
 =?UTF-8?q?=EC=97=85=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EA=B2=BD=EA=B3=A0=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/domains/login/components/WelcomeModal.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/domains/login/components/WelcomeModal.tsx b/src/domains/login/components/WelcomeModal.tsx
index ec8ed9b..4065746 100644
--- a/src/domains/login/components/WelcomeModal.tsx
+++ b/src/domains/login/components/WelcomeModal.tsx
@@ -20,8 +20,12 @@ function Welcome({ userNickname, open, onClose }: Props) {
     <ModalLayout
       open={open}
       onClose={onClose}
-      title={`환영합니다, ${userNickname}님!`}
-      description="바텐더 쑤리가 안내해드릴게요"
+      title={`환영합니다! `}
+      description={
+        <span className="block text-center">
+          {userNickname}님 <br /> 바텐더 쑤리가 안내해드릴게요
+        </span>
+      }
       buttons={
         <>
           <Button
@@ -48,7 +52,7 @@ function Welcome({ userNickname, open, onClose }: Props) {
     >
       <div className="flex-center">
         <div className="relative w-32 h-32" aria-hidden>
-          <Image src={Ssury} alt="" fill sizes="128px" className="object-contain" />
+          <Image src={Ssury} alt="" fill className="object-contain" sizes="8rem" priority />
         </div>
       </div>
     </ModalLayout>

From 1323e5d1f8183147e0eb37408e0cdc822c56c731 Mon Sep 17 00:00:00 2001
From: ahk0413 <rladkgusgd@gmail.com>
Date: Tue, 30 Sep 2025 17:22:17 +0900
Subject: [PATCH 2/3] =?UTF-8?q?[feat]=20=EC=9E=90=EB=8F=99=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../recommend/components/ChatSection.tsx      | 85 ++++++++++++++++---
 .../components/{ => bot}/BotCocktailCard.tsx  |  0
 .../components/{ => bot}/BotMessage.tsx       | 34 +++-----
 .../components/{ => bot}/BotOptions.tsx       |  0
 .../components/bot/NewMessageAlert.tsx        | 23 +++++
 .../components/{ => bot}/TypingIndicator.tsx  |  0
 .../components/{ => user}/MessageInput.tsx    |  0
 .../components/{ => user}/UserMessage.tsx     |  0
 8 files changed, 107 insertions(+), 35 deletions(-)
 rename src/domains/recommend/components/{ => bot}/BotCocktailCard.tsx (100%)
 rename src/domains/recommend/components/{ => bot}/BotMessage.tsx (78%)
 rename src/domains/recommend/components/{ => bot}/BotOptions.tsx (100%)
 create mode 100644 src/domains/recommend/components/bot/NewMessageAlert.tsx
 rename src/domains/recommend/components/{ => bot}/TypingIndicator.tsx (100%)
 rename src/domains/recommend/components/{ => user}/MessageInput.tsx (100%)
 rename src/domains/recommend/components/{ => user}/UserMessage.tsx (100%)

diff --git a/src/domains/recommend/components/ChatSection.tsx b/src/domains/recommend/components/ChatSection.tsx
index de25c7e..aaea299 100644
--- a/src/domains/recommend/components/ChatSection.tsx
+++ b/src/domains/recommend/components/ChatSection.tsx
@@ -1,26 +1,87 @@
 'use client';
 
-import { useState } from 'react';
-import BotMessage from './BotMessage';
-import UserMessage from './UserMessage';
-import MessageInput from './MessageInput';
+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';
+
+// TODOS : 아직 api 몰라서 임시 type
+interface ChatMessage {
+  id: number;
+  message: string;
+  sender: 'user' | 'bot';
+}
 
 function ChatSection() {
-  const [messages, setMessages] = useState<string[]>([]);
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const chatEndRef = useRef<HTMLDivElement>(null);
+  const chatListRef = useRef<HTMLDivElement>(null);
+  const isScrollBottom = useRef(true);
+  const [showNewMessageAlert, setShowNewMessageAlert] = useState(false);
 
   const handleSubmit = (message: string) => {
-    setMessages((prev) => [...prev, message]);
+    // 사용자 메시지
+    setMessages((prev) => [...prev, { id: prev.length + 1, message, sender: 'user' }]);
+  };
+
+  // 쑤리 임시 메시지
+  // useEffect(() => {
+  //   const interval = setInterval(() => {
+  //     setMessages((prev) => [
+  //       ...prev,
+  //       { id: prev.length + 1, message: `새 메시지 ${prev.length + 1}`, sender: 'bot' },
+  //     ]);
+  //   }, 3000);
+
+  //   return () => clearInterval(interval);
+  // }, []);
+
+  // 스크롤 제일 아래인지 체크
+  const handleCheckBottom = (e: React.UIEvent<HTMLDivElement>) => {
+    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+
+    isScrollBottom.current = scrollTop + clientHeight >= scrollHeight - 10;
+
+    if (isScrollBottom.current) setShowNewMessageAlert(false);
+  };
+
+  // 새 메시지가 들어오면 자동 스크롤
+  useEffect(() => {
+    if (isScrollBottom.current) {
+      chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+      setShowNewMessageAlert(false); // 새메세지 숨김
+    } else {
+      setShowNewMessageAlert(true); // 새메세지 보여줌
+    }
+  }, [messages]);
+
+  // 스크롤 제일 아래로
+  const handleScrollToBottom = () => {
+    if (chatListRef.current) {
+      chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+      isScrollBottom.current = true;
+    }
   };
 
   return (
-    <section className="page-layout max-w-1024 py-12 ">
+    <section className="mx-auto w-full flex-1">
       <h2 className="sr-only">대화 목록 및 입력 창</h2>
-      <div className="flex flex-col gap-10 pb-20">
-        <BotMessage />
+      <div
+        ref={chatListRef}
+        onScroll={handleCheckBottom}
+        className="flex flex-col gap-10 pt-12 px-3 overflow-y-auto max-h-[calc(100vh-116px)]  md:max-h-[calc(100vh-144px)]"
+      >
+        {messages.map(({ id, message, sender }) =>
+          sender === 'user' ? (
+            <UserMessage key={id} message={message} />
+          ) : (
+            <BotMessage key={id} messages={[{ id, type: 'text', message }]} />
+          )
+        )}
 
-        {messages.map((msg, i) => (
-          <UserMessage key={i} message={msg} />
-        ))}
+        <div ref={chatEndRef}></div>
+        {showNewMessageAlert && <NewMessageAlert onClick={handleScrollToBottom} />}
       </div>
       <MessageInput onSubmit={handleSubmit} />
     </section>
diff --git a/src/domains/recommend/components/BotCocktailCard.tsx b/src/domains/recommend/components/bot/BotCocktailCard.tsx
similarity index 100%
rename from src/domains/recommend/components/BotCocktailCard.tsx
rename to src/domains/recommend/components/bot/BotCocktailCard.tsx
diff --git a/src/domains/recommend/components/BotMessage.tsx b/src/domains/recommend/components/bot/BotMessage.tsx
similarity index 78%
rename from src/domains/recommend/components/BotMessage.tsx
rename to src/domains/recommend/components/bot/BotMessage.tsx
index d9bb2b8..b3f7655 100644
--- a/src/domains/recommend/components/BotMessage.tsx
+++ b/src/domains/recommend/components/bot/BotMessage.tsx
@@ -8,38 +8,26 @@ import BotOptions from './BotOptions';
 import TypingIndicator from './TypingIndicator';
 
 interface Message {
-  id: string;
-  text?: string;
+  id: number;
+  message?: string;
   type?: 'radio' | 'text' | 'recommend';
 }
 
-function BotMessage() {
+interface BotMessages {
+  messages: Message[];
+  isTyping?: boolean;
+}
+
+function BotMessage({ messages, isTyping = false }: BotMessages) {
   const [selected, setSelected] = useState('option1');
 
-  // radio 옵션
+  // 임시 radio 옵션
   const options = [
     { label: '옵션 1', value: 'option1' },
     { label: '옵션 2', value: 'option2' },
     { label: '옵션 3', value: 'option3' },
   ];
 
-  // 메시지 (연속 메시지)
-  const messages: Message[] = [
-    {
-      id: '1',
-      text: '안녕하세요, 바텐더 쑤리에요. \n 취향에 맞는 칵테일을 추천해드릴게요!',
-    },
-    {
-      id: '2',
-      text: '어떤 유형으로 찾아드릴까요?',
-      type: 'radio',
-    },
-    {
-      id: '3',
-      type: 'recommend',
-    },
-  ];
-
   return (
     <article aria-label="취향추천 챗봇 메시지" className="">
       <header className="flex items-end">
@@ -73,7 +61,7 @@ function BotMessage() {
               </ul>
             ) : (
               <div className="flex flex-col w-fit max-w-[80%] min-w-[120px] p-3 rounded-2xl rounded-tl-none bg-white text-black">
-                {msg.text && <p className="whitespace-pre-line">{msg.text}</p>}
+                {msg.message && <p className="whitespace-pre-line">{msg.message}</p>}
 
                 {/* radio */}
                 {msg.type === 'radio' && (
@@ -83,7 +71,7 @@ function BotMessage() {
             )}
           </div>
         ))}
-        <TypingIndicator />
+        {isTyping && <TypingIndicator />}
       </div>
     </article>
   );
diff --git a/src/domains/recommend/components/BotOptions.tsx b/src/domains/recommend/components/bot/BotOptions.tsx
similarity index 100%
rename from src/domains/recommend/components/BotOptions.tsx
rename to src/domains/recommend/components/bot/BotOptions.tsx
diff --git a/src/domains/recommend/components/bot/NewMessageAlert.tsx b/src/domains/recommend/components/bot/NewMessageAlert.tsx
new file mode 100644
index 0000000..dec6302
--- /dev/null
+++ b/src/domains/recommend/components/bot/NewMessageAlert.tsx
@@ -0,0 +1,23 @@
+'use client';
+import Down from '@/shared/assets/icons/selectDown_24.svg';
+
+interface Props {
+  onClick: () => void;
+}
+
+function NewMessageAlert({ onClick }: Props) {
+  return (
+    <button
+      className="absolute left-1/2 bottom-[90px] -translate-x-1/2 flex-center gap-1 
+           bg-white text-primary rounded-full px-2 py-1 shadow-[0_2px_4px_rgba(255,255,255,0.3)] 
+           hover:bg-tertiary hover:text-white active:bg-tertiary active:text-white
+           transition-colors duration-200 ease-in-out"
+      onClick={onClick}
+      aria-label="새 메시지로 이동"
+    >
+      <span className="text-sm">새 메시지</span>
+      <Down className="w-6 h-6 text-inherit" />
+    </button>
+  );
+}
+export default NewMessageAlert;
diff --git a/src/domains/recommend/components/TypingIndicator.tsx b/src/domains/recommend/components/bot/TypingIndicator.tsx
similarity index 100%
rename from src/domains/recommend/components/TypingIndicator.tsx
rename to src/domains/recommend/components/bot/TypingIndicator.tsx
diff --git a/src/domains/recommend/components/MessageInput.tsx b/src/domains/recommend/components/user/MessageInput.tsx
similarity index 100%
rename from src/domains/recommend/components/MessageInput.tsx
rename to src/domains/recommend/components/user/MessageInput.tsx
diff --git a/src/domains/recommend/components/UserMessage.tsx b/src/domains/recommend/components/user/UserMessage.tsx
similarity index 100%
rename from src/domains/recommend/components/UserMessage.tsx
rename to src/domains/recommend/components/user/UserMessage.tsx

From 129c6183eb4b2b665611393626945a90f4cdd1c3 Mon Sep 17 00:00:00 2001
From: ahk0413 <rladkgusgd@gmail.com>
Date: Tue, 30 Sep 2025 17:37:43 +0900
Subject: [PATCH 3/3] =?UTF-8?q?[style]=20=EC=83=88=EB=A9=94=EC=84=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8C=EB=A6=BC=EB=B2=84=ED=8A=BC=20style=20?=
 =?UTF-8?q?=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/ChatSection.tsx         | 2 +-
 src/domains/recommend/components/bot/NewMessageAlert.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/domains/recommend/components/ChatSection.tsx b/src/domains/recommend/components/ChatSection.tsx
index aaea299..ad39ccf 100644
--- a/src/domains/recommend/components/ChatSection.tsx
+++ b/src/domains/recommend/components/ChatSection.tsx
@@ -32,7 +32,7 @@ function ChatSection() {
   //       ...prev,
   //       { id: prev.length + 1, message: `새 메시지 ${prev.length + 1}`, sender: 'bot' },
   //     ]);
-  //   }, 3000);
+  //   }, 1000);
 
   //   return () => clearInterval(interval);
   // }, []);
diff --git a/src/domains/recommend/components/bot/NewMessageAlert.tsx b/src/domains/recommend/components/bot/NewMessageAlert.tsx
index dec6302..7b49008 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-[90px] -translate-x-1/2 flex-center gap-1 
-           bg-white text-primary rounded-full px-2 py-1 shadow-[0_2px_4px_rgba(255,255,255,0.3)] 
+      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)] 
            hover:bg-tertiary hover:text-white active:bg-tertiary active:text-white
            transition-colors duration-200 ease-in-out"
       onClick={onClick}