diff --git a/src/app/mypage/my-bar/page.tsx b/src/app/mypage/my-bar/page.tsx
index 63d3e8e..4c12cc4 100644
--- a/src/app/mypage/my-bar/page.tsx
+++ b/src/app/mypage/my-bar/page.tsx
@@ -1,4 +1,3 @@
-
 import CocktailCard from '@/domains/shared/components/cocktail-card/CocktailCard';
 import { Metadata } from 'next';
 
diff --git a/src/app/recommend/page.tsx b/src/app/recommend/page.tsx
index 8ff49e0..c49c438 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"
+      className="relative bg-repeat bg-auto w-full flex flex-col overflow-hidden"
       style={{ backgroundImage: `url(${Bg.src})` }}
     >
       <h1 className="sr-only">취향추천하기</h1>
diff --git a/src/domains/recipe/details/DetailItem.tsx b/src/domains/recipe/details/DetailItem.tsx
index b803c8a..0eb6023 100644
--- a/src/domains/recipe/details/DetailItem.tsx
+++ b/src/domains/recipe/details/DetailItem.tsx
@@ -4,8 +4,6 @@ import Label from '@/domains/shared/components/label/Label';
 import AbvGraph from '@/domains/shared/components/abv-graph/AbvGraph';
 import { labelTitle } from '../utills/labelTitle';
 
-
-
 interface Props {
   name: string;
   nameKo: string;
diff --git a/src/domains/recommend/api/chat.ts b/src/domains/recommend/api/chat.ts
new file mode 100644
index 0000000..652b7e0
--- /dev/null
+++ b/src/domains/recommend/api/chat.ts
@@ -0,0 +1,125 @@
+import { getApi } from '@/app/api/config/appConfig';
+import { useAuthStore } from '@/domains/shared/store/auth';
+import { ChatHistoryItem, ChatMessage, stepPayload, TextPayload } from '../types/recommend';
+
+// 첫 시작 api
+export const fetchGreeting = async (message: string): Promise<ChatMessage | null> => {
+  try {
+    const userId = useAuthStore.getState().user?.id;
+    if (!userId) throw new Error('userId 없음.');
+
+    const res = await fetch(`${getApi}/chatbot/greeting/${userId}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ message }),
+      credentials: 'include',
+    });
+
+    if (!res.ok) {
+      console.error('API 요청 실패:', res.status, res.statusText);
+      return null;
+    }
+
+    const data = await res.json();
+
+    return {
+      id: String(data.data.id),
+      userId,
+      message: data.data.message,
+      sender: data.data.sender ?? 'CHATBOT',
+      type: data.data.type,
+      stepData: data.data.stepData ?? null,
+      createdAt: data.data.timestamp,
+    };
+  } catch (err) {
+    console.error('Greeting API 호출 에러:', err);
+    return null;
+  }
+};
+
+// 유저 메시지 전송 (일반 텍스트)
+export const fetchSendTextMessage = async (payload: TextPayload): Promise<ChatMessage | null> => {
+  try {
+    const res = await fetch(`${getApi}/chatbot/chat`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify(payload),
+    });
+
+    if (!res.ok) return null;
+    const data = await res.json();
+
+    return {
+      id: String(data.data.id),
+      userId: data.data.userId ?? payload.userId,
+      message: data.data.message,
+      sender: data.data.sender ?? 'CHATBOT',
+      type: data.data.type,
+      stepData: data.data.stepData ?? null,
+      createdAt: data.data.timestamp,
+    };
+  } catch (err) {
+    console.error('Text 메시지 전송 실패:', err);
+    return null;
+  }
+};
+
+// 단계별 옵션 메시지 전송
+export const fetchSendStepMessage = async (payload: stepPayload): Promise<ChatMessage | null> => {
+  try {
+    const res = await fetch(`${getApi}/chatbot/chat`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify(payload),
+    });
+
+    if (!res.ok) return null;
+    const data = await res.json();
+
+    return {
+      id: String(data.data.id),
+      userId: data.data.userId,
+      message: data.data.message,
+      sender: data.data.sender ?? 'CHATBOT',
+      type: data.data.type,
+      stepData: data.data.stepData ?? null,
+      createdAt: data.data.timestamp,
+    };
+  } catch (err) {
+    console.error('Step 메시지 전송 실패:', err);
+    return null;
+  }
+};
+
+export const fetchChatHistory = async (): Promise<ChatMessage[] | null> => {
+  try {
+    const userId = useAuthStore.getState().user?.id;
+    if (!userId) throw new Error('userId 없음');
+
+    const res = await fetch(`${getApi}/chatbot/history/user/${userId}`, {
+      method: 'GET',
+      credentials: 'include',
+    });
+
+    if (!res.ok) {
+      console.error('History API 요청 실패:', res.status, res.statusText);
+      return null;
+    }
+
+    const data = await res.json();
+
+    return data.data.map((item: ChatHistoryItem) => ({
+      id: String(item.id),
+      userId: item.userId,
+      message: item.message,
+      sender: item.sender,
+      stepData: item.stepData ?? null,
+      createdAt: item.timestamp,
+    }));
+  } catch (err) {
+    console.error('History API 호출 에러:', err);
+    return null;
+  }
+};
diff --git a/src/domains/recommend/components/ChatList.tsx b/src/domains/recommend/components/ChatList.tsx
new file mode 100644
index 0000000..56eb6f3
--- /dev/null
+++ b/src/domains/recommend/components/ChatList.tsx
@@ -0,0 +1,62 @@
+import { ChatListProps } from '../types/recommend';
+import BotMessage from './bot/BotMessage';
+import NewMessageAlert from './bot/NewMessageAlert';
+import TypingIndicator from './bot/TypingIndicator';
+import UserMessage from './user/UserMessage';
+
+function ChatList({
+  messages,
+  userCurrentStep,
+  onSelectedOption,
+  getRecommendations,
+  chatListRef,
+  chatEndRef,
+  showNewMessageAlert,
+  handleCheckBottom,
+  handleScrollToBottom,
+  isBotTyping,
+}: ChatListProps) {
+  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"
+    >
+      <div className="max-w-1024 w-full">
+        {messages.map((msg, idx) => {
+          const isLastMessage = idx === messages.length - 1;
+          const showTyping = isLastMessage && msg.sender === 'CHATBOT' && isBotTyping;
+
+          if (msg.sender === 'USER') {
+            return <UserMessage key={`${msg.id}-${msg.sender}`} message={msg.message} />;
+          }
+
+          return (
+            <BotMessage
+              key={`${msg.id}-${msg.sender}`}
+              messages={[
+                {
+                  id: msg.id,
+                  message: msg.message,
+                  type: msg.type ?? 'TEXT',
+                  options: msg.type === 'RADIO_OPTIONS' ? (msg.stepData?.options ?? []) : [],
+                  recommendations: getRecommendations(msg.type, msg.stepData),
+                },
+              ]}
+              stepData={msg.stepData}
+              currentStep={userCurrentStep}
+              onSelectedOption={onSelectedOption}
+            />
+          );
+        })}
+
+        {isBotTyping && <TypingIndicator />}
+
+        <div ref={chatEndRef}></div>
+        {showNewMessageAlert && <NewMessageAlert onClick={handleScrollToBottom} />}
+      </div>
+    </div>
+  );
+}
+
+export default ChatList;
diff --git a/src/domains/recommend/components/ChatSection.tsx b/src/domains/recommend/components/ChatSection.tsx
index ad39ccf..2f29080 100644
--- a/src/domains/recommend/components/ChatSection.tsx
+++ b/src/domains/recommend/components/ChatSection.tsx
@@ -5,85 +5,161 @@ 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';
-}
+import { useChatScroll } from '../hook/useChatScroll';
+import {
+  fetchChatHistory,
+  fetchGreeting,
+  fetchSendStepMessage,
+  fetchSendTextMessage,
+} from '../api/chat';
+import { useAuthStore } from '@/domains/shared/store/auth';
+import {
+  ChatMessage,
+  stepPayload,
+  StepRecommendation,
+  RecommendationItem,
+} from '../types/recommend';
+import ChatList from './ChatList';
 
 function ChatSection() {
   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, { id: prev.length + 1, message, sender: 'user' }]);
-  };
+  const { chatListRef, chatEndRef, showNewMessageAlert, handleCheckBottom, handleScrollToBottom } =
+    useChatScroll(messages.length);
+  const [userCurrentStep, setUserCurrentStep] = useState(0);
+  const [isBotTyping, setIsBotTyping] = useState(false);
 
-  // 쑤리 임시 메시지
-  // useEffect(() => {
-  //   const interval = setInterval(() => {
-  //     setMessages((prev) => [
-  //       ...prev,
-  //       { id: prev.length + 1, message: `새 메시지 ${prev.length + 1}`, sender: 'bot' },
-  //     ]);
-  //   }, 1000);
+  const selectedOptions = useRef<{
+    selectedAlcoholStrength?: string;
+    selectedAlcoholBaseType?: string;
+    selectedCocktailType?: string;
+  }>({});
 
-  //   return () => clearInterval(interval);
-  // }, []);
+  // 일반 텍스트 보낼 시
+  const handleSubmitText = async (message: string) => {
+    const userId = useAuthStore.getState().user?.id;
+    if (!userId) return;
 
-  // 스크롤 제일 아래인지 체크
-  const handleCheckBottom = (e: React.UIEvent<HTMLDivElement>) => {
-    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+    const tempId = Date.now().toString();
+    const tempCreatedAt = new Date().toISOString();
 
-    isScrollBottom.current = scrollTop + clientHeight >= scrollHeight - 10;
+    // 유저 메시지 낙관적 업데이트
+    setMessages((prev) => [
+      ...prev,
+      { id: tempId, userId, message, sender: 'USER', type: 'text', createdAt: tempCreatedAt },
+    ]);
 
-    if (isScrollBottom.current) setShowNewMessageAlert(false);
+    const botMessage = await fetchSendTextMessage({ message, userId });
+    if (botMessage) setMessages((prev) => [...prev, botMessage]);
   };
 
-  // 새 메시지가 들어오면 자동 스크롤
-  useEffect(() => {
-    if (isScrollBottom.current) {
-      chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-      setShowNewMessageAlert(false); // 새메세지 숨김
-    } else {
-      setShowNewMessageAlert(true); // 새메세지 보여줌
+  // 옵션 클릭 시
+  const handleSelectedOption = async (value: string) => {
+    const userId = useAuthStore.getState().user?.id;
+    if (!userId) return;
+
+    const tempId = Date.now().toString();
+    const tempCreatedAt = new Date().toISOString();
+
+    const lastMessage = messages[messages.length - 1];
+    const stepData = lastMessage?.stepData;
+
+    if (!stepData) {
+      await handleSubmitText(value);
+      return;
+    }
+
+    const selectedLabel = stepData.options?.find((opt) => opt.value === value)?.label ?? value;
+
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: tempId,
+        userId,
+        message: selectedLabel,
+        sender: 'USER',
+        type: 'text',
+        createdAt: tempCreatedAt,
+      },
+    ]);
+
+    const nextStep = value === 'QA' ? 0 : (stepData?.currentStep ?? 0) + 1;
+    setUserCurrentStep(nextStep);
+
+    switch (stepData.currentStep + 1) {
+      case 2:
+        selectedOptions.current.selectedAlcoholStrength = value;
+        break;
+      case 3:
+        selectedOptions.current.selectedAlcoholBaseType = value;
+        break;
+      case 4:
+        selectedOptions.current.selectedCocktailType = value;
+        break;
     }
-  }, [messages]);
 
-  // 스크롤 제일 아래로
-  const handleScrollToBottom = () => {
-    if (chatListRef.current) {
-      chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-      isScrollBottom.current = true;
+    const payload: stepPayload = {
+      message: selectedLabel,
+      userId,
+      currentStep: nextStep,
+      ...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);
     }
   };
 
+  // 채팅 기록 불러오기 없으면 greeting 호출
+  useEffect(() => {
+    const loadChatHistory = async () => {
+      const history = await fetchChatHistory();
+      if (history && history.length > 0) {
+        setMessages(history.sort((a, b) => Number(a.id) - Number(b.id)));
+      } else {
+        const greeting = await fetchGreeting('');
+        if (greeting) setMessages([greeting]);
+      }
+    };
+    loadChatHistory();
+  }, []);
+
+  const getRecommendations = (
+    type: string | undefined,
+    stepData?: StepRecommendation | null
+  ): RecommendationItem[] => {
+    if (type !== 'CARD_LIST' || !stepData?.recommendations) return [];
+    return stepData.recommendations;
+  };
+
   return (
-    <section className="mx-auto w-full flex-1">
+    <section className="relative flex-1 flex flex-col w-fulloverflow-hidden">
       <h2 className="sr-only">대화 목록 및 입력 창</h2>
-      <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 }]} />
-          )
-        )}
-
-        <div ref={chatEndRef}></div>
-        {showNewMessageAlert && <NewMessageAlert onClick={handleScrollToBottom} />}
-      </div>
-      <MessageInput onSubmit={handleSubmit} />
+      <ChatList
+        messages={messages}
+        userCurrentStep={userCurrentStep}
+        onSelectedOption={handleSelectedOption}
+        getRecommendations={getRecommendations}
+        chatListRef={chatListRef}
+        chatEndRef={chatEndRef}
+        showNewMessageAlert={showNewMessageAlert}
+        handleCheckBottom={handleCheckBottom}
+        handleScrollToBottom={handleScrollToBottom}
+        isBotTyping={isBotTyping}
+      />
+      <MessageInput onSubmit={handleSubmitText} />
     </section>
   );
 }
diff --git a/src/domains/recommend/components/bot/BotCocktailCard.tsx b/src/domains/recommend/components/bot/BotCocktailCard.tsx
index 6c861df..c5e6b8f 100644
--- a/src/domains/recommend/components/bot/BotCocktailCard.tsx
+++ b/src/domains/recommend/components/bot/BotCocktailCard.tsx
@@ -1,17 +1,31 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import Keep from '@/domains/shared/components/keep/Keep';
+import { RecommendationItem } from '../../types/recommend';
 
-function BotCocktailCard() {
+function BotCocktailCard({
+  cocktailId,
+  cocktailName,
+  cocktailNameKo,
+  cocktailImgUrl,
+  alcoholStrength,
+}: RecommendationItem) {
   return (
     <div className="relative flex flex-col w-full min-w-[200px] rounded-2xl overflow-hidden bg-white shadow-[0_0_12px_rgba(255,255,255,0.4)]">
       <Link href="/" className="block relative">
         <div className="relative w-full h-[200px]">
-          <Image src="" fill className="object-cover" alt="칵테일 이름" sizes="200px" />
+          <Image
+            src={cocktailImgUrl}
+            fill
+            className="object-cover"
+            alt={cocktailNameKo}
+            sizes="200px"
+            priority
+          />
         </div>
 
         <div className="p-3 flex flex-col gap-1 text-center">
-          <strong className="text-black text-lg">{'진피즈'}</strong>
+          <strong className="text-black text-lg">{cocktailNameKo}</strong>
           <span className="text-gray-500 text-sm">+ 상세보기</span>
         </div>
       </Link>
diff --git a/src/domains/recommend/components/bot/BotMessage.tsx b/src/domains/recommend/components/bot/BotMessage.tsx
index b3f7655..d74afde 100644
--- a/src/domains/recommend/components/bot/BotMessage.tsx
+++ b/src/domains/recommend/components/bot/BotMessage.tsx
@@ -5,28 +5,25 @@ import Image from 'next/image';
 import { useState } from 'react';
 import BotCocktailCard from './BotCocktailCard';
 import BotOptions from './BotOptions';
-import TypingIndicator from './TypingIndicator';
+import { StepOption, StepRecommendation, RecommendationItem } from '../../types/recommend';
 
-interface Message {
-  id: number;
-  message?: string;
-  type?: 'radio' | 'text' | 'recommend';
+interface BotMessage {
+  id: string;
+  message: string;
+  type: string;
+  options?: StepOption[];
+  recommendations?: RecommendationItem[];
 }
 
 interface BotMessages {
-  messages: Message[];
-  isTyping?: boolean;
+  messages: BotMessage[];
+  stepData?: StepRecommendation | null;
+  currentStep?: number;
+  onSelectedOption?: (value: string) => void;
 }
 
-function BotMessage({ messages, isTyping = false }: BotMessages) {
-  const [selected, setSelected] = useState('option1');
-
-  // 임시 radio 옵션
-  const options = [
-    { label: '옵션 1', value: 'option1' },
-    { label: '옵션 2', value: 'option2' },
-    { label: '옵션 3', value: 'option3' },
-  ];
+function BotMessage({ messages, stepData, currentStep, onSelectedOption }: BotMessages) {
+  const [selected, setSelected] = useState('');
 
   return (
     <article aria-label="취향추천 챗봇 메시지" className="">
@@ -47,31 +44,41 @@ function BotMessage({ messages, isTyping = false }: BotMessages) {
       <div className="flex flex-col gap-3 mt-3 pl-3">
         {messages.map((msg) => (
           <div key={msg.id}>
-            {msg.type === 'recommend' ? (
+            {msg.type === 'CARD_LIST' && msg.recommendations?.length ? (
               <ul className="inline-grid grid-cols-1 sm:grid-cols-3 gap-2 justify-start">
-                <li>
-                  <BotCocktailCard />
-                </li>
-                <li>
-                  <BotCocktailCard />
-                </li>
-                <li>
-                  <BotCocktailCard />
-                </li>
+                {msg.recommendations.map((rec) => (
+                  <li key={rec.cocktailId}>
+                    <BotCocktailCard
+                      cocktailId={rec.cocktailId}
+                      cocktailName={rec.cocktailName}
+                      cocktailNameKo={rec.cocktailNameKo}
+                      cocktailImgUrl={rec.cocktailImgUrl}
+                      alcoholStrength={rec.alcoholStrength}
+                    />
+                  </li>
+                ))}
               </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.message && <p className="whitespace-pre-line">{msg.message}</p>}
 
                 {/* radio */}
-                {msg.type === 'radio' && (
-                  <BotOptions options={options} value={selected} onChange={setSelected} />
+                {msg.type === 'RADIO_OPTIONS' && msg.options?.length && (
+                  <BotOptions
+                    options={msg.options}
+                    step={stepData?.currentStep ?? 0}
+                    currentStep={currentStep ?? 0}
+                    value={selected}
+                    onChange={(val) => {
+                      setSelected(val);
+                      onSelectedOption?.(val);
+                    }}
+                  />
                 )}
               </div>
             )}
           </div>
         ))}
-        {isTyping && <TypingIndicator />}
       </div>
     </article>
   );
diff --git a/src/domains/recommend/components/bot/BotOptions.tsx b/src/domains/recommend/components/bot/BotOptions.tsx
index 68fafee..7e6040c 100644
--- a/src/domains/recommend/components/bot/BotOptions.tsx
+++ b/src/domains/recommend/components/bot/BotOptions.tsx
@@ -3,34 +3,41 @@ interface Option {
   value: string;
 }
 
-interface RadioGroupProps {
+interface BotOptionsProps {
   options: Option[];
   value: string;
   onChange: (value: string) => void;
+  step: number;
+  currentStep: number;
 }
 
-function BotOptions({ options, value, onChange }: RadioGroupProps) {
+function BotOptions({ options, value, onChange, step, currentStep }: BotOptionsProps) {
   return (
     <div role="radiogroup" className="flex flex-col gap-3 mt-5">
       {options.map((opt) => (
         <label
-          htmlFor={`radio-${opt.value}`}
+          htmlFor={`radio_${opt.value}_${step}`}
           key={opt.value}
           className="flex items-center gap-2 cursor-pointer"
         >
           <input
-            id={`radio-${opt.value}`}
+            id={`radio_${opt.value}_${step}`}
             type="radio"
-            name="radio-group"
+            name={`radio_group_${step}`}
             value={opt.value}
             checked={value === opt.value}
             onChange={() => onChange(opt.value)}
+            disabled={currentStep > step && value !== opt.value}
             className="sr-only"
           />
           <span
             className={`w-full rounded-3xl px-2 py-1 text-center transition-colors duration-150
-      ${value === opt.value ? 'bg-secondary shadow-[inset_0_0_6px_rgba(255,196,1,1)]' : 'bg-gray-dark/30'} 
-      hover:bg-secondary/100 `}
+              ${
+                value === opt.value
+                  ? 'bg-secondary shadow-[inset_0_0_6px_rgba(255,196,1,1)]'
+                  : 'bg-gray-light'
+              } 
+              ${currentStep > step && value !== opt.value ? 'cursor-not-allowed bg-gray-light' : 'hover:bg-secondary'}`}
           >
             <span>{opt.label}</span>
           </span>
diff --git a/src/domains/recommend/components/bot/TypingIndicator.tsx b/src/domains/recommend/components/bot/TypingIndicator.tsx
index 6704dda..0463849 100644
--- a/src/domains/recommend/components/bot/TypingIndicator.tsx
+++ b/src/domains/recommend/components/bot/TypingIndicator.tsx
@@ -3,7 +3,7 @@ import shaker from '@/shared/assets/images/shaker.png';
 
 function TypingIndicator() {
   return (
-    <div className="relative flex items-center w-fit p-3 rounded-2xl rounded-tl-none bg-white text-black overflow-hidden">
+    <div className="relative flex items-center w-fit ml-3 p-3 rounded-2xl rounded-tl-none bg-white text-black overflow-hidden">
       <p className="inline-block animate-fade-in">준비 중…</p>
       <div className="relative w-10 h-10 animate-shake">
         <Image
diff --git a/src/domains/recommend/components/user/MessageInput.tsx b/src/domains/recommend/components/user/MessageInput.tsx
index c758c56..6e884ae 100644
--- a/src/domains/recommend/components/user/MessageInput.tsx
+++ b/src/domains/recommend/components/user/MessageInput.tsx
@@ -21,7 +21,7 @@ function MessageInput({ onSubmit }: Props) {
   };
 
   return (
-    <div className="fixed left-1/2 bottom-0 -translate-x-1/2 w-full max-w-[62.5rem] px-3 py-4 bg-primary">
+    <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">
           <label htmlFor="chatInput" className="sr-only">
diff --git a/src/domains/recommend/hook/useChatScroll.ts b/src/domains/recommend/hook/useChatScroll.ts
new file mode 100644
index 0000000..5c91aa9
--- /dev/null
+++ b/src/domains/recommend/hook/useChatScroll.ts
@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useChatScroll = (messagesLength: number) => {
+  const chatEndRef = useRef<HTMLDivElement>(null);
+  const chatListRef = useRef<HTMLDivElement>(null);
+  const isScrollBottom = useRef(true);
+  const [showNewMessageAlert, setShowNewMessageAlert] = useState(false);
+
+  // 스크롤 제일 아래인지 체크
+  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); // 새메세지 보여줌
+    }
+  }, [messagesLength]);
+
+  // 스크롤 제일 아래로
+  const handleScrollToBottom = () => {
+    if (chatListRef.current) {
+      chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+      isScrollBottom.current = true;
+    }
+  };
+
+  return {
+    chatListRef,
+    chatEndRef,
+    showNewMessageAlert,
+    handleCheckBottom,
+    handleScrollToBottom,
+  };
+};
diff --git a/src/domains/recommend/types/recommend.ts b/src/domains/recommend/types/recommend.ts
new file mode 100644
index 0000000..fb98747
--- /dev/null
+++ b/src/domains/recommend/types/recommend.ts
@@ -0,0 +1,70 @@
+export interface StepOption {
+  value: string;
+  label: string;
+  description: string | null;
+}
+
+export interface RecommendationItem {
+  cocktailId: number;
+  cocktailName: string;
+  cocktailNameKo: string;
+  cocktailImgUrl: string;
+  alcoholStrength: string;
+}
+
+export interface StepRecommendation {
+  currentStep: number;
+  stepTitle: string;
+  options: StepOption[];
+  recommendations?: RecommendationItem[];
+  completed: boolean;
+}
+
+export interface ChatMessage {
+  id: string;
+  userId?: string;
+  message: string;
+  sender: 'USER' | 'CHATBOT';
+  type?: string;
+  stepData?: StepRecommendation | null;
+  createdAt: string;
+}
+
+export interface ChatHistoryItem {
+  id: string;
+  timestamp: string;
+  userId: string;
+  message: string;
+  sender: 'USER' | 'CHATBOT';
+  stepData?: StepRecommendation | null;
+}
+
+export interface TextPayload {
+  message: string;
+  userId: string;
+}
+
+export interface stepPayload extends TextPayload {
+  currentStep: number;
+  selectedAlcoholStrength?: string;
+  selectedAlcoholBaseType?: string;
+  selectedCocktailType?: string;
+}
+
+export interface ChatListProps {
+  messages: ChatMessage[];
+  userCurrentStep: number;
+  onSelectedOption: (value: string) => void;
+  getRecommendations: (
+    type: string | undefined,
+    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;
+}