diff --git a/public/me.png b/public/me.png
new file mode 100644
index 0000000..2be2cb7
Binary files /dev/null and b/public/me.png differ
diff --git a/src/@types/data.d.ts b/src/@types/data.d.ts
index e160a3f..80a041b 100644
--- a/src/@types/data.d.ts
+++ b/src/@types/data.d.ts
@@ -72,6 +72,14 @@ export interface ResultPackageType {
   image: string;
   desc: string;
   category: string;
+  backgroundImg: string;
+}
+
+export interface lastAnswersType {
+  golf: string;
+  trekking: string;
+  ocean: string;
+  culture: string;
 }
 
 export interface TestResultProductType {
diff --git a/src/commons/Chatbot/ChatList.tsx b/src/commons/Chatbot/ChatList.tsx
new file mode 100644
index 0000000..bef4c2d
--- /dev/null
+++ b/src/commons/Chatbot/ChatList.tsx
@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { TimeFormatEnum, currentTime } from "../../utils/CurrentTime";
+import { useRecoilState } from "recoil";
+import { chatListState } from "../../store/chatbotAtom";
+
+type ChatPropsType = {
+  startTime: string;
+};
+
+const ChatList = ({ startTime }: ChatPropsType) => {
+  const [chatList, setChatList] = useRecoilState(chatListState);
+
+  return (
+    <ChatListContainer>
+      <div className="start-time">{"오늘 " + startTime}</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+      <div>sdfdsfsd</div>
+    </ChatListContainer>
+  );
+};
+
+const ChatListContainer = styled.div`
+  height: 430px;
+  overflow: auto;
+  padding: 0 10px;
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    height: 30%;
+    background: var(--color-blue);
+    border-radius: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: rgba(126, 126, 126, 0.432);
+    border-radius: 8px;
+  }
+
+  .start-time {
+    text-align: center;
+    margin-bottom: 15px;
+    color: var(--color-blue);
+  }
+
+  @media (max-width: 850px) {
+    height: 300px;
+  }
+`;
+
+export default ChatList;
diff --git a/src/commons/Chatbot/FloatingInput.tsx b/src/commons/Chatbot/FloatingInput.tsx
index 16433b2..12fccb6 100644
--- a/src/commons/Chatbot/FloatingInput.tsx
+++ b/src/commons/Chatbot/FloatingInput.tsx
@@ -1,42 +1,53 @@
 import { useState } from "react";
 import styled from "styled-components";
 import { IoIosPaperPlane } from "react-icons/io";
-import { useMediaQuery } from "react-responsive";
 import { answers } from "./questionsAndAnswers";
+import { chatListState, chatbotStepState } from "../../store/chatbotAtom";
+import { useRecoilState } from "recoil";
 
-type PropsType = {
-  setMyMessage: any;
+type FloatingInputPropsType = {
   orderNumber: number;
+  setOrderNumber: any;
+  answer: string[];
+  setAnswer: any;
 };
 
-const FloatingInput = ({ setMyMessage, orderNumber }: PropsType) => {
-  const isMobile: boolean = useMediaQuery({
-    query: "(max-width:850px)",
-  });
-  // 질문 3번째부터는 text input 대신 button형식으로 변경하기
-
-  const [text, setText] = useState("");
-
-  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    console.log(text);
-    setMyMessage(text);
-    setText("");
+const FloatingInput = ({
+  orderNumber,
+  setOrderNumber,
+  answer,
+  setAnswer,
+}: FloatingInputPropsType) => {
+  const [chatbotStep, setChatbotStep] = useRecoilState(chatbotStepState);
+  const [chatList, setChatList] = useRecoilState(chatListState);
+  const [selectedButton, setSelectedButton] = useState([]);
+
+  const onSubmit = (aaa: string[]) => {
+    console.log(aaa);
+    setChatList({ chatList: [] });
+    // setAnswer("");
+
+    if (orderNumber === 7) {
+      // api연결코드 작성
+      setChatbotStep({ step: 3 });
+    }
   };
 
   return (
     <InputSection>
-      {orderNumber < 2 ? (
+      {orderNumber > 2 ? ( //<
         <TextForm
           onSubmit={(e) => {
             e.preventDefault();
-            onSubmit(e);
+            let aaa: string[] = [];
+            onSubmit(aaa);
           }}
         >
           <input
             type="text"
             placeholder="여기에 메시지 입력"
-            value={text}
-            onChange={(e) => setText(e.target.value)}
+            value={answer}
+            onChange={(e) => setAnswer(e.target.value)}
           />
           <button type="submit">
             <IoIosPaperPlane className="send" />
@@ -46,13 +57,17 @@ const FloatingInput = ({ setMyMessage, orderNumber }: PropsType) => {
         <ButtonsForm
           onSubmit={(e) => {
             e.preventDefault();
+            // console.log(e);
             const formData = new FormData(e.currentTarget);
             let entries = formData.entries();
+            let aaa: string[] = [];
             for (const pair of entries) {
               console.log(String(pair[0]));
-              setText(String(pair[0]));
+              aaa.push(String(pair[0]));
+              // setAnswer((prev: any) => [...prev, String(pair[0])]);
             }
-            onSubmit(e);
+
+            onSubmit(aaa);
           }}
         >
           <div className="formInner">
@@ -108,7 +123,7 @@ const ButtonsForm = styled.form`
 
   .formInner {
     .innerSection {
-      width: 380px;
+      width: 370px;
       align-items: center;
       gap: 10px;
       flex-wrap: wrap;
@@ -165,6 +180,38 @@ const ButtonsForm = styled.form`
   }
 
   @media (max-width: 850px) {
+    width: 350px;
+    height: 130px;
+    font-size: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .formInner {
+      .innerSection {
+        width: 300px;
+        gap: 8px;
+      }
+    }
+
+    label {
+      padding: 8px 10px;
+    }
+
+    button {
+      width: 40px;
+      height: 40px;
+      top: 0px;
+      right: 0px;
+
+      .send {
+        width: 18px;
+        height: 18px;
+      }
+    }
+  }
+
+  @media (max-width: 600px) {
     width: 250px;
     height: 130px;
     font-size: 12px;
diff --git a/src/commons/Chatbot/FloatingModal.tsx b/src/commons/Chatbot/FloatingModal.tsx
index fa91212..bb6f2df 100644
--- a/src/commons/Chatbot/FloatingModal.tsx
+++ b/src/commons/Chatbot/FloatingModal.tsx
@@ -3,11 +3,18 @@ import styled from "styled-components";
 import FloatingInput from "./FloatingInput";
 import { PersonalData } from "../Terms";
 import { TimeFormatEnum, currentTime } from "../../utils/CurrentTime";
-import { useMediaQuery } from "react-responsive";
-import { intro, questions } from "./questionsAndAnswers";
+import {
+  ChatbotIntro1,
+  ChatbotIntro2,
+  ChatbotIntro3,
+  ChatbotIntro4,
+  questions,
+} from "./questionsAndAnswers";
 import { useRecoilState } from "recoil";
-import { chatbotStepState } from "../../store/chatbotAtom";
+import { chatListState, chatbotStepState } from "../../store/chatbotAtom";
 import { BasicBtn } from "../Button";
+import { FcVoicePresentation, FcIdea, FcApproval } from "react-icons/fc";
+import ChatList from "./ChatList";
 
 export interface ChatListType {
   person: string;
@@ -17,42 +24,96 @@ export interface ChatListType {
 
 const FloatingModal = () => {
   const [chatbotStep, setChatbotStep] = useRecoilState(chatbotStepState);
-
+  const [chatList, setChatList] = useRecoilState(chatListState);
   const [orderNumber, setOrderNumber] = useState(0);
-  const [recievedMessage, setRecievedMessage] = useState<string>(
-    questions[orderNumber],
-  );
+
+  const [answer, setAnswer] = useState([]);
+
+  // const [recievedMessage, setRecievedMessage] = useState<string>(
+  //   questions[chatNumber.questionNumber],
+  // );
   const [myMessage, setMyMessage] = useState<string>("");
-  const [chatList, setChatList] = useState<Array<ChatListType>>([]);
+  // const [chatList, setChatList] = useState<Array<ChatListType>>([]);
+  const [startTime, setStartTime] = useState("");
   const time = currentTime(1000, TimeFormatEnum.HHmm);
 
   useEffect(() => {
-    myMessage.length >= 1 &&
-      setChatList((prev) => [
-        ...prev,
-        { person: "me", time: time, message: myMessage },
-      ]);
-  }, [myMessage]);
-
-  useEffect(() => {
-    recievedMessage.length >= 1 &&
-      setChatList((prev) => [
-        ...prev,
-        { person: "question", time: time, message: recievedMessage },
-      ]);
-  }, [recievedMessage]);
+    // myMessage.length >= 1 && setChatList({ chatList: chatList.chatList.concat()});
+    // setChatList((prev) => [
+    //   ...prev,
+    //   { person: "me", time: time, message: myMessage },
+    // ]);
+  }, [answer]);
 
   return (
     <Modal>
       <div className="inner">
-        <div className="check-terms">
-          <h2>개인정보 수집이용 동의</h2>
-          <PersonalData />
-          <CheckTermsBtn onClick={() => console.log("step2로 이동")}>
-            동의하고 시작하기
-          </CheckTermsBtn>
-        </div>
-        {/* <FloatingInput setMyMessage={setMyMessage} orderNumber={orderNumber} /> */}
+        {chatbotStep.step === 0 && (
+          <IntroContainer>
+            <div className="intro-text">
+              <div className="blue">
+                <FcVoicePresentation className="icon1" />
+                <span>{ChatbotIntro1}</span>
+              </div>
+              <div className="col">
+                <span>
+                  <FcIdea className="icon2" />
+                  {ChatbotIntro2}
+                </span>
+                <span>
+                  <FcIdea className="icon2" />
+                  {ChatbotIntro3}
+                </span>
+                <span>
+                  <FcIdea className="icon2" />
+                  {ChatbotIntro4}
+                </span>
+              </div>
+            </div>
+            <IntroBtn onClick={() => setChatbotStep({ step: 1 })}>
+              여행그룹 추천 설문 시작하기
+            </IntroBtn>
+          </IntroContainer>
+        )}
+
+        {chatbotStep.step === 1 && (
+          <IntroContainer>
+            <h2>개인정보 수집이용 동의</h2>
+            <PersonalData />
+            <IntroBtn
+              onClick={() => {
+                setChatbotStep({ step: 2 });
+                setStartTime(time);
+              }}
+            >
+              동의하고 시작하기
+            </IntroBtn>
+          </IntroContainer>
+        )}
+
+        {chatbotStep.step === 2 && (
+          <div>
+            <ChatList startTime={startTime} />
+            <FloatingInput
+              orderNumber={orderNumber}
+              setOrderNumber={setOrderNumber}
+              answer={answer}
+              setAnswer={setAnswer}
+            />
+          </div>
+        )}
+
+        {chatbotStep.step === 3 && (
+          <IntroContainer>
+            <div className="intro-text">
+              <FcApproval className="complete" />
+              <span className="complete-text">설문 제출이 완료되었습니다.</span>
+            </div>
+            <IntroBtn onClick={() => setChatbotStep({ step: 0 })}>
+              설문 다시 시작하기
+            </IntroBtn>
+          </IntroContainer>
+        )}
       </div>
     </Modal>
   );
@@ -60,7 +121,7 @@ const FloatingModal = () => {
 
 const Modal = styled.div`
   width: 450px;
-  height: 700px;
+  height: 600px;
   z-index: -99;
   position: absolute;
   right: 60px;
@@ -76,27 +137,6 @@ const Modal = styled.div`
     width: 420px;
     height: 530px;
     margin: 20px auto;
-
-    .check-terms {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      h2 {
-        text-align: center;
-        margin-bottom: 20px;
-        font-size: 20px;
-        font-weight: bold;
-      }
-
-      pre {
-        height: 500px;
-      }
-
-      button {
-        margin: 25px auto 0;
-      }
-    }
   }
 
   @media (max-width: 850px) {
@@ -109,19 +149,6 @@ const Modal = styled.div`
       width: 350px;
       height: 300px;
       margin: 15px auto;
-
-      .check-terms {
-        h2 {
-          text-align: center;
-          margin-bottom: 20px;
-          font-size: 20px;
-          font-weight: bold;
-        }
-
-        pre {
-          height: 300px;
-        }
-      }
     }
   }
 
@@ -134,12 +161,117 @@ const Modal = styled.div`
     .inner {
       width: 250px;
       height: 300px;
-      margin: 15px auto;
     }
   }
 `;
 
-const CheckTermsBtn = styled(BasicBtn)`
+const IntroContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  h2 {
+    text-align: center;
+    margin-bottom: 20px;
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  pre {
+    height: 400px;
+  }
+
+  button {
+    margin: 50px auto 0;
+  }
+
+  .intro-text {
+    width: 85%;
+    background-color: white;
+    margin: auto;
+    padding: 30px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    white-space: pre-line;
+    font-size: 18px;
+    line-height: 22px;
+    border-radius: 8px;
+
+    .blue {
+      color: var(--color-blue);
+      display: flex;
+      gap: 10px;
+
+      .icon1 {
+        width: 40px;
+        height: 40px;
+      }
+    }
+
+    .col {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      margin-top: 20px;
+
+      .icon2 {
+        width: 20px;
+        height: 20px;
+        margin-right: 10px;
+      }
+    }
+
+    .complete {
+      width: 50px;
+      height: 50px;
+      margin: auto;
+    }
+
+    .complete-text {
+      color: var(--color-blue);
+      margin: auto;
+      font-size: 20px;
+    }
+  }
+
+  @media (max-width: 850px) {
+    h2 {
+      text-align: center;
+      margin-bottom: 20px;
+      font-size: 20px;
+      font-weight: bold;
+    }
+
+    pre {
+      height: 300px;
+    }
+
+    .intro-text {
+      font-size: 15px;
+      line-height: 18px;
+      gap: 10px;
+    }
+
+    button {
+      margin-top: 30px;
+    }
+  }
+
+  @media (max-width: 600px) {
+    .intro-text {
+      font-size: 14px;
+      line-height: 18px;
+      gap: 5px;
+      .complete-text {
+        font-size: 18px;
+      }
+    }
+  }
+`;
+
+const IntroBtn = styled(BasicBtn)`
   margin-top: 30px;
   width: 85%;
 `;
diff --git a/src/commons/Chatbot/questionsAndAnswers.ts b/src/commons/Chatbot/questionsAndAnswers.ts
index f59bd07..8a98374 100644
--- a/src/commons/Chatbot/questionsAndAnswers.ts
+++ b/src/commons/Chatbot/questionsAndAnswers.ts
@@ -1,5 +1,12 @@
-export const intro: string =
-  "안녕하세요. 고투게더 여행 그룹 추천 상담봇입니다. \n 아직 여행지와 동행 그룹을 정하지 못하셨다면 설문을 통해 추천받아보세요! \n 총 10개의 문항이 있으며, 모든 항목은 중복 선택이 가능합니다. \n 응답 제출 시 SMS 또는 전화로 여행 그룹을 추천받으실 수 있습니다.";
+export const ChatbotIntro1: string =
+  "안녕하세요! \n 고투게더 여행 그룹 추천 상담봇 입니다.";
+
+export const ChatbotIntro2: string =
+  "아직 여행지와 동행 그룹을 정하지 못하셨다면 설문을 통해 추천받아보세요!";
+export const ChatbotIntro3: string =
+  "총 10개의 문항이 있으며, 모든 항목은 중복 선택이 가능합니다.";
+export const ChatbotIntro4: string =
+  "응답 제출 시 SMS 또는 전화로 여행 그룹을 추천받으실 수 있습니다.";
 
 export const questions: string[] = [
   "정확한 결과 발송을 위해 연락처를 남겨주세요. \n ex) 01012345678",
diff --git a/src/pages/recommend/ResultPack.ts b/src/pages/recommend/ResultPack.ts
new file mode 100644
index 0000000..851af42
--- /dev/null
+++ b/src/pages/recommend/ResultPack.ts
@@ -0,0 +1,39 @@
+import { lastAnswersType } from "../../@types/data";
+
+export const lastAnswers: lastAnswersType = {
+  golf: "이날을 위해 스크린에서 연습했지. 라운딩 가자!",
+  trekking: "멋진 풍경을 배경삼아 한번 걸어볼까?",
+  ocean: "따뜻한 햇볕 아래 해변을 산책하고 싶어!",
+  culture: "남들이 안 가본 새로운 곳을 찾아",
+};
+
+export const resultPack = {
+  [lastAnswers.golf]: {
+    title: "나이스샷 - 골프패키지",
+    image: "/result-golf.jpg",
+    desc: "스크린에서만 라운딩 돌던 나는 안녕~ 이제 골프여행 가서 리얼필드를 만나보자. 골프카트 타고 Go Go!",
+    category: "골프여행",
+    backgroundImg: "url('/background-golf.png')",
+  },
+  [lastAnswers.trekking]: {
+    title: "여유롭게 - 트레킹",
+    image: "/result-trekking.jpg",
+    desc: "푸른 숲 속 피톤치드를 느끼면서 같이 한 번 걸어볼래? 이게 바로 진짜 힐링이지!",
+    category: "트레킹",
+    backgroundImg: "url('/background-trekking.png')",
+  },
+  [lastAnswers.ocean]: {
+    title: "바다를 보는 여유 - 오션뷰",
+    image: "/result-ocean.jpg",
+    desc: "수영장 딸린 해안가 호텔에서 조식 뷔페 먹고, 탁 트인 해변가에서 바다내음 풀풀 나는 산책 즐기기!",
+    category: "휴양지",
+    backgroundImg: "url('/background-ocean.png')",
+  },
+  [lastAnswers.culture]: {
+    title: "힐링타임 - 유적지",
+    image: "/result-culture.jpg",
+    desc: "각 나라별 역사와 문화를 배우며 마음의 양식을 든든하게 쌓아보세요! 몸도 마음도 든든한 힐링과 지식 타임",
+    category: "문화탐방",
+    backgroundImg: "url('/background-culture.png')",
+  },
+};
diff --git a/src/pages/recommend/TestResult.tsx b/src/pages/recommend/TestResult.tsx
index 4542e28..760699d 100644
--- a/src/pages/recommend/TestResult.tsx
+++ b/src/pages/recommend/TestResult.tsx
@@ -2,46 +2,15 @@ import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router";
 import styled from "styled-components";
 import { getTestResult } from "../../apis/request";
-import { TestResultProductType, ResultPackageType } from "../../@types/data";
+import { TestResultProductType } from "../../@types/data";
 import { setLocalStorage } from "../../utils/localStorage";
-import { lastAnswers } from "./TripTestPage";
+import { resultPack } from "./ResultPack";
 import { useMutation } from "react-query";
 
 const TestResult = ({ result }: { result: string }) => {
   const [productsData, setProductsData] = useState<TestResultProductType[]>([]);
   const navigate = useNavigate();
 
-  const resultPack = {
-    [lastAnswers.golf]: {
-      title: "나이스샷 - 골프패키지",
-      image: "/result-golf.jpg",
-      desc: "스크린에서만 라운딩 돌던 나는 안녕~ 이제 골프여행 가서 리얼필드를 만나보자. 골프카트 타고 Go Go!",
-      category: "골프여행",
-      backgroundImg: "url('/background-golf.png')",
-    },
-    [lastAnswers.trekking]: {
-      title: "여유롭게 - 트레킹",
-      image: "/result-trekking.jpg",
-      desc: "푸른 숲 속 피톤치드를 느끼면서 같이 한 번 걸어볼래? 이게 바로 진짜 힐링이지!",
-      category: "트레킹",
-      backgroundImg: "url('/background-trekking.png')",
-    },
-    [lastAnswers.ocean]: {
-      title: "바다를 보는 여유 - 오션뷰",
-      image: "/result-ocean.jpg",
-      desc: "수영장 딸린 해안가 호텔에서 조식 뷔페 먹고, 탁 트인 해변가에서 바다내음 풀풀 나는 산책 즐기기!",
-      category: "휴양지",
-      backgroundImg: "url('/background-ocean.png')",
-    },
-    [lastAnswers.culture]: {
-      title: "힐링타임 - 유적지",
-      image: "/result-culture.jpg",
-      desc: "각 나라별 역사와 문화를 배우며 마음의 양식을 든든하게 쌓아보세요! 몸도 마음도 든든한 힐링과 지식 타임",
-      category: "문화탐방",
-      backgroundImg: "url('/background-culture.png')",
-    },
-  };
-
   const testResultMutation = useMutation(getTestResult, {
     onSuccess: (res: any) => {
       if (res) {
@@ -57,7 +26,7 @@ const TestResult = ({ result }: { result: string }) => {
   useEffect(() => {
     testResultMutation.mutate(resultPack[result].category); //페칭
     setLocalStorage("testResult", resultPack[result]); // 로컬스토리지 저장
-  }, []);
+  }, [result]);
 
   return (
     <Container background={resultPack[result].backgroundImg}>
diff --git a/src/pages/recommend/TripTestPage.tsx b/src/pages/recommend/TripTestPage.tsx
index ec086f4..42a789c 100644
--- a/src/pages/recommend/TripTestPage.tsx
+++ b/src/pages/recommend/TripTestPage.tsx
@@ -4,13 +4,7 @@ import { scrollToTop } from "../../utils/scroll";
 import { GoChevronLeft, GoChevronRight } from "react-icons/go";
 import { useNavigate } from "react-router";
 import TestResult from "./TestResult";
-
-export const lastAnswers = {
-  golf: "이날을 위해 스크린에서 연습했지. 라운딩 가자!",
-  trekking: "멋진 풍경을 배경삼아 한번 걸어볼까?",
-  ocean: "따뜻한 햇볕 아래 해변을 산책하고 싶어!",
-  culture: "남들이 안 가본 새로운 곳을 찾아",
-};
+import { lastAnswers } from "./ResultPack";
 
 const TripTest = () => {
   const navigate = useNavigate();
diff --git a/src/store/chatbotAtom.ts b/src/store/chatbotAtom.ts
index 23f4d8a..a899b4c 100644
--- a/src/store/chatbotAtom.ts
+++ b/src/store/chatbotAtom.ts
@@ -1,18 +1,9 @@
 import { atom } from "recoil";
 
+// 챗봇 실행 단계
 interface ChatbotStepType {
   step: number;
 }
-
-interface chatNumberType {
-  orderNumber: number;
-  answerNumber: number | null;
-}
-
-//step0: firstOpen, 시작하기 버튼 생성됨
-//step1: 시작하기 버튼 누른 후, 개인정보동의 텍스트박스 및 버튼 생성됨
-//step2: 개인정보 동의 버튼 누른 후, 설문 시작
-//step3: 설문완료 후, 설문이 완료되었습니다 안내 텍스트 띄우고 다시 설문하기 버튼 생성
 export const chatbotStepState = atom<ChatbotStepType>({
   key: "chatbotStepState",
   default: {
@@ -20,11 +11,40 @@ export const chatbotStepState = atom<ChatbotStepType>({
   },
 });
 
-//step3의 ordernumber, answernumber +(질문 / 응답)
-export const chatNumberState = atom<chatNumberType>({
-  key: "chatNumberState",
+//step2의 전체 채팅 리스트, 질문번호, 응답내용
+// 불러올때, api 전송할 때는 +1해서 홀수 질문, 짝수 답변으로
+// 내용 저장은 usestate에서 가져오기 (orderNumber, answer, 시간빼버린다)
+interface ChatListType {
+  chatList: ChatBubbleType[];
+}
+interface ChatBubbleType {
+  question: boolean;
+  time: string;
+  text: string;
+}
+export const chatListState = atom<ChatListType>({
+  key: "chatListState",
   default: {
-    orderNumber: 0,
-    answerNumber: null,
+    chatList: [],
   },
 });
+
+//api요청예시
+// {
+//   "name": "홍길동",
+//   "phone": "010111",
+//   "ageGroup": [
+//       "aaaaaa,bbbbbb,ccccc"
+//   ],
+//   "travelGroup": [
+//       "aaaaa,bbbbb"
+//   ],
+//   "companionGroup": [
+//       "aaa, bbb"
+//   ],
+//   "religion": "aaaaa",
+//   "politics": "aaaaaa",
+//   "travelTheme": "aaaaaa",
+//   "travelPeriod": "aaaaaa",
+//   "travelNumber": "aaaaaa"
+// },