From d59c23d3079a748ff99438833c9621dda80f08a4 Mon Sep 17 00:00:00 2001
From: choisohyun <sohyun4283@naver.com>
Date: Sat, 25 Jun 2022 22:34:39 +0900
Subject: [PATCH 01/82] =?UTF-8?q?fix:=20SearchSelector=20=EC=84=B8?=
 =?UTF-8?q?=EC=85=98=EC=8A=A4=ED=86=A0=EB=A6=AC=EC=A7=80=20=EC=9E=88?=
 =?UTF-8?q?=EC=9D=84=20=EA=B2=BD=EC=9A=B0=20=EA=B0=92=20=EC=9C=A0=EC=A7=80?=
 =?UTF-8?q?=EB=90=98=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/domain/survey/SearchSelector.tsx | 8 +++++++-
 src/pages/OurUniversitiesSurvey.tsx             | 4 +---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/domain/survey/SearchSelector.tsx b/src/components/domain/survey/SearchSelector.tsx
index 65f2e18..d1d497d 100644
--- a/src/components/domain/survey/SearchSelector.tsx
+++ b/src/components/domain/survey/SearchSelector.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useCallback, useRef, useState } from 'react';
+import React, { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { DeleteIcon, SearchIcon } from '@/assets/img';
 
@@ -23,6 +23,12 @@ const SearchSelector = ({ placeholder, searchData, selectedResults, setSelectedR
 
   const findId = useCallback((value: string) => Number(searchData.find((data) => data.name === value)?.id), [searchData]);
 
+  useEffect(() => {
+    selectedResults.map((id) => {
+      setSelectedSchools(() => searchData.filter((name) => name.id === id).map(({ name }) => name));
+    });
+  }, []);
+
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;
     const id = findId(value);
diff --git a/src/pages/OurUniversitiesSurvey.tsx b/src/pages/OurUniversitiesSurvey.tsx
index b2c54d0..7ce9ef6 100644
--- a/src/pages/OurUniversitiesSurvey.tsx
+++ b/src/pages/OurUniversitiesSurvey.tsx
@@ -9,11 +9,9 @@ import { useMeetingSessionState } from '@/hooks/common';
 
 const OurUniversitiesSurvey = () => {
   const meetingNavigate = useMeetingNavigate();
-  const [ourUniversities, setOurUniversities] = useState<number[]>([]);
   const { initMeetingState, setMeetingData } = useMeetingSessionState();
+  const [ourUniversities, setOurUniversities] = useState<number[]>(initMeetingState.ourUniversities);
 
-  // @TODO: SearchSelector에서 id, name으로 구분하지 않고 상위에서 구분해야 함.
-  // selectedResults를 상위에서 받아서 초기화해야 하는데 문자열로 받아지게 되어 있음.
   const handleNextClick = () => {
     if (initMeetingState) {
       setMeetingData({ ...initMeetingState, ourUniversities });

From 2a9efc30d9ad92b470424c78f057e4794b64e09a Mon Sep 17 00:00:00 2001
From: choisohyun <sohyun4283@naver.com>
Date: Sun, 26 Jun 2022 23:10:41 +0900
Subject: [PATCH 02/82] =?UTF-8?q?fix:=20=EC=A4=91=EB=B3=B5=EA=B0=92=20?=
 =?UTF-8?q?=EB=93=A4=EC=96=B4=EA=B0=80=EB=8A=94=20=EC=98=A4=EB=A5=98=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/components/domain/survey/SearchSelector.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/domain/survey/SearchSelector.tsx b/src/components/domain/survey/SearchSelector.tsx
index d1d497d..3fc44ef 100644
--- a/src/components/domain/survey/SearchSelector.tsx
+++ b/src/components/domain/survey/SearchSelector.tsx
@@ -34,12 +34,12 @@ const SearchSelector = ({ placeholder, searchData, selectedResults, setSelectedR
     const id = findId(value);
 
     const noMatchData = !searchData.map(({ id }) => id).includes(id);
+    const existSelected = selectedResults.includes(id);
     const overMaxLimit = selectedResults.length >= MAX;
-    if (noMatchData || overMaxLimit) return;
+    if (noMatchData || existSelected || overMaxLimit) return;
 
     setSelectedResults((prev) => [...prev, id]);
     setSelectedSchools((prev) => [...prev, value]);
-    console.log(selectedResults);
   };
 
   const handleDeleteClick = (value: string) => {

From 91222e35f83a3ead657f9c285d919f623e7ee5f9 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Mon, 27 Jun 2022 20:32:43 +0900
Subject: [PATCH 03/82] =?UTF-8?q?feat:=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20?=
 =?UTF-8?q?input=20reset=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/domain/survey/SearchSelector.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/domain/survey/SearchSelector.tsx b/src/components/domain/survey/SearchSelector.tsx
index 3fc44ef..8793db1 100644
--- a/src/components/domain/survey/SearchSelector.tsx
+++ b/src/components/domain/survey/SearchSelector.tsx
@@ -47,10 +47,16 @@ const SearchSelector = ({ placeholder, searchData, selectedResults, setSelectedR
     setSelectedResults((prev) => prev.filter((id) => id !== findId(value)));
   };
 
+  const resetClick = () => {
+    if (inputRef.current) {
+      inputRef.current.value = '';
+    }
+  };
+
   return (
     <>
       <SearchWrapper>
-        <SearchInput ref={inputRef} list="schools" placeholder={placeholder} onChange={handleInputChange} />
+        <SearchInput ref={inputRef} list="schools" placeholder={placeholder} onChange={handleInputChange} onClick={resetClick} />
         <datalist id="schools">
           {searchData.map(({ name, id }) => (
             <option key={id} value={name} />

From f7bdbf3c7fdeb18064a667d34438d8163af39c94 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Mon, 27 Jun 2022 22:01:02 +0900
Subject: [PATCH 04/82] =?UTF-8?q?fix:=20=EC=84=B8=EC=85=98=20=EC=A0=80?=
 =?UTF-8?q?=EC=9E=A5=20=ED=9B=84=20=EB=8B=A4=EC=8B=9C=20=EB=8F=8C=EC=95=84?=
 =?UTF-8?q?=EC=99=94=EC=9D=84=20=EB=95=8C=20=EC=95=84=EC=9D=B4=ED=85=9C=20?=
 =?UTF-8?q?1=EA=B0=9C=EB=A7=8C=20=EB=82=98=EC=98=A4=EB=8A=94=20=EA=B1=B0?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/domain/survey/SearchSelector.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/domain/survey/SearchSelector.tsx b/src/components/domain/survey/SearchSelector.tsx
index 8793db1..fc967ae 100644
--- a/src/components/domain/survey/SearchSelector.tsx
+++ b/src/components/domain/survey/SearchSelector.tsx
@@ -24,9 +24,8 @@ const SearchSelector = ({ placeholder, searchData, selectedResults, setSelectedR
   const findId = useCallback((value: string) => Number(searchData.find((data) => data.name === value)?.id), [searchData]);
 
   useEffect(() => {
-    selectedResults.map((id) => {
-      setSelectedSchools(() => searchData.filter((name) => name.id === id).map(({ name }) => name));
-    });
+    const result = selectedResults.flatMap((id) => searchData.filter((item) => item.id === id)).map(({ name }) => name);
+    setSelectedSchools(result);
   }, []);
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {

From b8a63485db907d94eeae4eafd0f2d061ac00d8b6 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Mon, 27 Jun 2022 22:09:46 +0900
Subject: [PATCH 05/82] =?UTF-8?q?feat:=20=EC=84=A0=ED=98=B8,=20=EA=B8=B0?=
 =?UTF-8?q?=ED=94=BC=ED=95=99=EA=B5=90=20session=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/AvoidUniversitiesSurvey.tsx  | 16 +++++++++++++---
 src/pages/PreferUniversitiesSurvey.tsx | 16 +++++++++++++---
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/pages/AvoidUniversitiesSurvey.tsx b/src/pages/AvoidUniversitiesSurvey.tsx
index b1df454..b458a08 100644
--- a/src/pages/AvoidUniversitiesSurvey.tsx
+++ b/src/pages/AvoidUniversitiesSurvey.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useMatch } from 'react-router-dom';
 import { SurveyTemplate } from '@/components/domain/survey';
 import { Title } from '@/lib/styles/styledComponents';
 import SearchSelector from '@/components/domain/survey/SearchSelector';
@@ -6,12 +7,21 @@ import { schools } from '@/mock/schools';
 import styled from 'styled-components';
 import Path from '@/router/Path';
 import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
-import { useMatch } from 'react-router-dom';
+import { useMeetingSessionState } from '@/hooks/common';
 
 const AvoidUniversitiesSurvey = () => {
   const matchMeeting = useMatch('/meeting/*');
   const meetingNavigate = matchMeeting ? useMeetingNavigate() : useDatingNavigate();
-  const [avoidUniversities, setAvoidUniversities] = useState<number[]>([]);
+  const { initMeetingState, setMeetingData } = useMeetingSessionState();
+  const [avoidUniversities, setAvoidUniversities] = useState<number[]>(initMeetingState.avoidUniversities);
+
+  const handleNextClick = () => {
+    if (initMeetingState) {
+      setMeetingData({ ...initMeetingState, avoidUniversities });
+    }
+
+    meetingNavigate(Path.PreferUniversitiesSurvey);
+  };
 
   return (
     <SurveyTemplate
@@ -20,7 +30,7 @@ const AvoidUniversitiesSurvey = () => {
       totalStep={matchMeeting ? 14 : 12}
       currStep={matchMeeting ? 5 : 7}
       handlePrevClick={() => meetingNavigate(Path.OurDepartmentsAverageHeightSurvey)}
-      handleNextClick={() => meetingNavigate(Path.PreferUniversitiesSurvey)}
+      handleNextClick={handleNextClick}
     >
       <Title>
         <strong>기피하는 학교</strong>를<br />
diff --git a/src/pages/PreferUniversitiesSurvey.tsx b/src/pages/PreferUniversitiesSurvey.tsx
index 0d46eac..c9d2654 100644
--- a/src/pages/PreferUniversitiesSurvey.tsx
+++ b/src/pages/PreferUniversitiesSurvey.tsx
@@ -1,16 +1,26 @@
 import React, { useState } from 'react';
+import { useMatch } from 'react-router-dom';
 import { SurveyTemplate } from '@/components/domain/survey';
 import { Title } from '@/lib/styles/styledComponents';
 import SearchSelector from '@/components/domain/survey/SearchSelector';
 import { schools } from '@/mock/schools';
 import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
 import Path from '@/router/Path';
-import { useMatch } from 'react-router-dom';
+import { useMeetingSessionState } from '@/hooks/common';
 
 const PreferUniversitiesSurvey = () => {
   const matchMeeting = useMatch('/meeting/*');
   const meetingNavigate = matchMeeting ? useMeetingNavigate() : useDatingNavigate();
-  const [preferUniversities, setPreferUniversities] = useState<number[]>([]);
+  const { initMeetingState, setMeetingData } = useMeetingSessionState();
+  const [preferUniversities, setPreferUniversities] = useState<number[]>(initMeetingState.preferUniversities);
+
+  const handleNextClick = () => {
+    if (initMeetingState) {
+      setMeetingData({ ...initMeetingState, preferUniversities });
+    }
+
+    meetingNavigate(Path.PreferAgeHeightSurvey);
+  };
 
   return (
     <SurveyTemplate
@@ -19,7 +29,7 @@ const PreferUniversitiesSurvey = () => {
       totalStep={matchMeeting ? 14 : 12}
       currStep={matchMeeting ? 6 : 8}
       handlePrevClick={() => meetingNavigate(Path.AvoidUniversitiesSurvey)}
-      handleNextClick={() => meetingNavigate(Path.PreferAgeHeightSurvey)}
+      handleNextClick={handleNextClick}
     >
       <Title>
         <strong>선호하는 학교</strong>를<br />

From c563f6e071700cdcc221475c98de6f1914e2e527 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Mon, 27 Jun 2022 22:12:08 +0900
Subject: [PATCH 06/82] =?UTF-8?q?fix:=20=EC=86=8C=EA=B0=9C=ED=8C=85?=
 =?UTF-8?q?=EC=9D=B4=EB=93=A0=20=EB=AF=B8=ED=8C=85=EC=9D=B4=EB=93=A0=20?=
 =?UTF-8?q?=EB=92=A4=EB=A1=9C=EA=B0=80=EA=B8=B0=ED=95=98=EB=A9=B4=20?=
 =?UTF-8?q?=EC=84=A0=ED=98=B8=ED=95=99=EA=B5=90=EB=A1=9C=20=EA=B0=80?=
 =?UTF-8?q?=EC=95=BC=20=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PreferAverageAgeHeightSurvey.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/PreferAverageAgeHeightSurvey.tsx b/src/pages/PreferAverageAgeHeightSurvey.tsx
index 6f06d66..7e6f87b 100644
--- a/src/pages/PreferAverageAgeHeightSurvey.tsx
+++ b/src/pages/PreferAverageAgeHeightSurvey.tsx
@@ -29,7 +29,7 @@ const PreferAverageAgeHeightSurvey = () => {
       disableNext={!multiAgeOption || !multiHeightOption}
       totalStep={matchMeeting ? 14 : 12}
       currStep={matchMeeting ? 8 : 9}
-      handlePrevClick={() => meetingNavigate(matchMeeting ? Path.PreferDepartmentsSurvey : Path.PreferUniversitiesSurvey)}
+      handlePrevClick={() => meetingNavigate(Path.PreferUniversitiesSurvey)}
       handleNextClick={handleNextClick}
     >
       <StyledTitle>

From c266dbebde602401473bc325fe3fb3c994fea04c Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Mon, 27 Jun 2022 23:47:06 +0900
Subject: [PATCH 07/82] =?UTF-8?q?feat:=20Channel=20=EC=84=A4=EB=AC=B8=20?=
 =?UTF-8?q?=ED=95=9C=EA=B0=9C=EB=A7=8C=20check=20=EB=90=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/CheckBox.tsx         | 11 +++++--
 src/hooks/agreement/useChannelCheck.ts   | 37 ++++++++++++++++++++++++
 src/hooks/agreement/useFoundPathCheck.ts | 23 ---------------
 src/pages/ChannelSurvey.tsx              | 33 +++++++++++++++++----
 src/types/constants/channel.ts           |  8 +++++
 5 files changed, 80 insertions(+), 32 deletions(-)
 create mode 100644 src/hooks/agreement/useChannelCheck.ts
 delete mode 100644 src/hooks/agreement/useFoundPathCheck.ts
 create mode 100644 src/types/constants/channel.ts

diff --git a/src/components/base/CheckBox.tsx b/src/components/base/CheckBox.tsx
index ab46e37..b517f00 100644
--- a/src/components/base/CheckBox.tsx
+++ b/src/components/base/CheckBox.tsx
@@ -4,19 +4,24 @@ import styled from 'styled-components';
 
 interface CheckBoxProps extends React.InputHTMLAttributes<HTMLInputElement> {
   text: string;
-
+  isMulti?: boolean;
   /**
    * important: 전체동의에서 쓸것, true일시 글씨크기,fontweight커짐
    */
   impotrant?: boolean;
 }
 
-function CheckBox({ text, impotrant = false, ...rest }: CheckBoxProps) {
-  return (
+function CheckBox({ isMulti = true, text, impotrant = false, ...rest }: CheckBoxProps) {
+  return isMulti ? (
     <StyledLabel htmlFor={text}>
       <StyledInput type="checkbox" id={text} name={text} {...rest} />
       <StyleText impotrant={impotrant}>{text}</StyleText>
     </StyledLabel>
+  ) : (
+    <StyledLabel htmlFor={text}>
+      <StyledInput type="radio" id={text} name={text} {...rest} />
+      <StyleText impotrant={impotrant}>{text}</StyleText>
+    </StyledLabel>
   );
 }
 
diff --git a/src/hooks/agreement/useChannelCheck.ts b/src/hooks/agreement/useChannelCheck.ts
new file mode 100644
index 0000000..3ccddcc
--- /dev/null
+++ b/src/hooks/agreement/useChannelCheck.ts
@@ -0,0 +1,37 @@
+import { useState, useMemo } from 'react';
+import { type Channel } from '@/types/meeting';
+
+const useChannelCheck = (isMulti: boolean) => {
+  const [channelMultiCheckList, setChannelMultiCheckList] = useState<{ text: string; name: Channel; checked: boolean }[]>([
+    { text: '페이스북', name: 'FACEBOOK', checked: false },
+    { text: '인스타그램', name: 'INSTAGRAM', checked: false },
+    { text: '카카오단톡방', name: 'KAKAOROOM', checked: false },
+    { text: '카톡플친', name: 'KAKAOPLUS', checked: false },
+    { text: '지인추천', name: 'FRIEND', checked: false },
+    { text: '기타 커뮤니티', name: 'COMMUNITY', checked: false },
+  ]);
+
+  const [channelCheck, setChannelCheck] = useState<Channel>('FACEBOOK');
+
+  if (isMulti) {
+    const onChangeMultiCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const { name } = e.target;
+      setChannelMultiCheckList(channelMultiCheckList.map((item) => (item.name === name ? { ...item, checked: !item.checked } : item)));
+    };
+
+    const isMultiChecked = useMemo(() => channelMultiCheckList.some((item) => item.checked), [channelMultiCheckList]);
+
+    return { channelMultiCheckList, onChangeMultiCheck, isMultiChecked };
+  }
+
+  const onChangeCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name } = e.target;
+    setChannelCheck(name as Channel);
+  };
+
+  const isChecked = useMemo(() => Boolean(channelCheck), [channelCheck]);
+
+  return { channelCheck, onChangeCheck, isChecked };
+};
+
+export default useChannelCheck;
diff --git a/src/hooks/agreement/useFoundPathCheck.ts b/src/hooks/agreement/useFoundPathCheck.ts
deleted file mode 100644
index 2e3c3ab..0000000
--- a/src/hooks/agreement/useFoundPathCheck.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useState, useMemo } from 'react';
-
-const useFoundPathCheck = () => {
-  const [pathCheckList, setPathCheckList] = useState<{ text: string; name: string; checked: boolean }[]>([
-    { text: '페이스북', name: 'facebook', checked: false },
-    { text: '인스타그램', name: 'instagram', checked: false },
-    { text: '카카오단톡방', name: 'kakao', checked: false },
-    { text: '카톡플친', name: 'kakaoPlus', checked: false },
-    { text: '지인추천', name: 'friend', checked: false },
-    { text: '기타 커뮤니티', name: 'etc', checked: false },
-  ]);
-
-  const onChangeCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name } = e.target;
-    setPathCheckList(pathCheckList.map((item) => (item.name === name ? { ...item, checked: !item.checked } : item)));
-  };
-
-  const isChecked = useMemo(() => pathCheckList.some((item) => item.checked), [pathCheckList]);
-
-  return { pathCheckList, onChangeCheck, isChecked };
-};
-
-export default useFoundPathCheck;
diff --git a/src/pages/ChannelSurvey.tsx b/src/pages/ChannelSurvey.tsx
index 277a4f7..0b38066 100644
--- a/src/pages/ChannelSurvey.tsx
+++ b/src/pages/ChannelSurvey.tsx
@@ -1,14 +1,27 @@
 import { Title } from '@/lib/styles/styledComponents';
-import CheckBox from '@/components/base/CheckBox';
+import { CheckBox } from '@/components/base';
 import { FormWrapper } from './AuthMail';
-import useFoundPathCheck from '@/hooks/agreement/useFoundPathCheck';
+import useChannelCheck from '@/hooks/agreement/useChannelCheck';
 import { SurveyTemplate } from '@/components/domain/survey';
 import { useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
 import Path from '@/router/Path';
+import { useMeetingSessionState } from '@/hooks/common';
+import { CHANNEL_ITEMS } from '@/types/constants/channel';
 
 const ChannelSurvey = () => {
   const meetingNavigate = useMeetingNavigate();
-  const { pathCheckList, onChangeCheck, isChecked } = useFoundPathCheck();
+  const { initMeetingState, setMeetingData } = useMeetingSessionState();
+  const { channelCheck: channel, onChangeCheck, isChecked } = useChannelCheck(false);
+
+  const handleNextClick = () => {
+    if (!channel) return;
+
+    if (initMeetingState) {
+      setMeetingData({ ...initMeetingState, channel });
+    }
+
+    meetingNavigate(Path.AgreementSurvey);
+  };
 
   return (
     <SurveyTemplate
@@ -17,15 +30,23 @@ const ChannelSurvey = () => {
       currStep={13}
       totalStep={14}
       handlePrevClick={() => meetingNavigate(Path.IsAbroadSurvey)}
-      handleNextClick={() => meetingNavigate(Path.AgreementSurvey)}
+      handleNextClick={handleNextClick}
     >
       <Title>
         외딴썸을 처음 알게 된 <br />
         경로를 알려주세요.
       </Title>
       <FormWrapper>
-        {pathCheckList.map(({ text, checked, name }) => (
-          <CheckBox key={text} text={text} checked={checked} onChange={onChangeCheck} name={name} impotrant={checked ? true : false} />
+        {CHANNEL_ITEMS.map(({ text, name }) => (
+          <CheckBox
+            isMulti={false}
+            key={text}
+            text={text}
+            checked={name === channel}
+            onChange={onChangeCheck}
+            name={name}
+            impotrant={name === channel ? true : false}
+          />
         ))}
       </FormWrapper>
     </SurveyTemplate>
diff --git a/src/types/constants/channel.ts b/src/types/constants/channel.ts
new file mode 100644
index 0000000..6c14627
--- /dev/null
+++ b/src/types/constants/channel.ts
@@ -0,0 +1,8 @@
+export const CHANNEL_ITEMS = [
+  { text: '페이스북', name: 'FACEBOOK' },
+  { text: '인스타그램', name: 'INSTAGRAM' },
+  { text: '카카오단톡방', name: 'KAKAOROOM' },
+  { text: '카톡플친', name: 'KAKAOPLUS' },
+  { text: '지인추천', name: 'FRIEND' },
+  { text: '기타 커뮤니티', name: 'COMMUNITY' },
+];

From 9493d6a19241e1d37409fce0e3b8ef1f918db268 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Mon, 27 Jun 2022 23:47:34 +0900
Subject: [PATCH 08/82] =?UTF-8?q?feat:=20domesticArea=20=EC=84=A4=EB=AC=B8?=
 =?UTF-8?q?=20session=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/DomesticAreasSurvey.tsx | 31 +++++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/pages/DomesticAreasSurvey.tsx b/src/pages/DomesticAreasSurvey.tsx
index cc1a1a2..0f6d9dd 100644
--- a/src/pages/DomesticAreasSurvey.tsx
+++ b/src/pages/DomesticAreasSurvey.tsx
@@ -1,24 +1,47 @@
+import React, { useState, useMemo } from 'react';
 import { ChooseFourBox, SurveyTemplate } from '@/components/domain/survey';
 import { ChooseFourBoxItemProps } from '@/components/domain/survey/ChooseFourBox';
 import { Title } from '@/lib/styles/styledComponents';
 import { DOMESTICAREAS_ITEMS } from '@/types/constants/area';
-import React, { useState } from 'react';
 import styled from 'styled-components';
 import { FormWrapper } from './AuthMail';
 import Path from '@/router/Path';
 import { useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useMeetingSessionState } from '@/hooks/common';
+import { type DomesticAreas } from '@/types/meeting';
 
 const DomesticAreasSurvey = () => {
   const meetingNavigate = useMeetingNavigate();
-  const [checkedMultiOption, setMultiCheckedOption] = useState<ChooseFourBoxItemProps[]>(DOMESTICAREAS_ITEMS);
+  const { initMeetingState, setMeetingData } = useMeetingSessionState();
+  const getInitDomesticAreas = DOMESTICAREAS_ITEMS.map((item) => {
+    return { ...item, checked: initMeetingState.domesticAreas.some((initState) => initState === item.id) };
+  });
+  const initDomesticAreas = useMemo(() => getInitDomesticAreas, [DOMESTICAREAS_ITEMS, initMeetingState]);
+  const [checkedMultiOption, setMultiCheckedOption] = useState<ChooseFourBoxItemProps[]>(initDomesticAreas);
+  const isChecked = useMemo(() => checkedMultiOption.some(({ checked }) => checked), [checkedMultiOption]);
+  const getDomesticAreas = checkedMultiOption.reduce<DomesticAreas[]>((prev, cur) => {
+    if (cur.checked) {
+      prev.push(cur.id as DomesticAreas);
+    }
+    return prev;
+  }, []);
+  const domesticAreas = useMemo(() => getDomesticAreas, [checkedMultiOption]);
+
+  const handleNextClick = () => {
+    if (initMeetingState) {
+      setMeetingData({ ...initMeetingState, domesticAreas: domesticAreas ?? [] });
+    }
+
+    meetingNavigate(Path.ChannelSurvey);
+  };
 
   return (
     <SurveyTemplate
-      disableNext={!checkedMultiOption.length}
+      disableNext={!isChecked}
       currStep={12}
       totalStep={14}
       handlePrevClick={() => meetingNavigate(Path.IsAbroadSurvey)}
-      handleNextClick={() => meetingNavigate(Path.ChannelSurvey)}
+      handleNextClick={handleNextClick}
     >
       <Title>
         <strong>미팅이 가능한 지역</strong>을

From 18d865b78a9477e0680eeda2bfac7631ec4d65e0 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Mon, 27 Jun 2022 23:47:50 +0900
Subject: [PATCH 09/82] =?UTF-8?q?fix:=20AgeBox=20props=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/domain/survey/AgeBox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/domain/survey/AgeBox.tsx b/src/components/domain/survey/AgeBox.tsx
index b195f42..80ce2b4 100644
--- a/src/components/domain/survey/AgeBox.tsx
+++ b/src/components/domain/survey/AgeBox.tsx
@@ -7,7 +7,7 @@ import { OnChangeProps } from '@/components/base/SimpleRangeSlider';
 interface AgeBoxProps {
   ageOption?: number;
   setAgeOption?: React.Dispatch<React.SetStateAction<number>>;
-  multiAgeOption: number[];
+  multiAgeOption?: number[];
   setMultiAgeOption?: React.Dispatch<React.SetStateAction<number[]>>;
   children: React.ReactNode;
   isMulti?: boolean;

From e2e906e82f73d91e414970034fbfa41fd48548bb Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Mon, 27 Jun 2022 23:56:55 +0900
Subject: [PATCH 10/82] =?UTF-8?q?feat:=20kakaoId=20=EC=84=B8=EC=85=98=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/KakaoIdSurvey.tsx | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/pages/KakaoIdSurvey.tsx b/src/pages/KakaoIdSurvey.tsx
index d1c2c8d..6eaeeaf 100644
--- a/src/pages/KakaoIdSurvey.tsx
+++ b/src/pages/KakaoIdSurvey.tsx
@@ -8,21 +8,30 @@ import styled from 'styled-components';
 import { FormWrapper } from './AuthMail';
 import Path from '@/router/Path';
 import { useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useMeetingSessionState } from '@/hooks/common';
 
 const KakaoIdSurvey = () => {
   const meetingNavigate = useMeetingNavigate();
   const [isModal, onToggleModal] = useToggle();
-  const [kakaoID, setkakaoID] = useState('');
+  const [kakaoId, setkakaoId] = useState('');
+  const { initMeetingState, setMeetingData } = useMeetingSessionState();
+
+  const handleNextClick = () => {
+    alert('설문이 완료되었습니다. 정식 출시가 되면 매칭을 시작할 수 있습니다. 조금만 기다려 주세요.');
+    if (initMeetingState) {
+      setMeetingData({ ...initMeetingState, kakaoId });
+    }
+  };
 
   return (
     <>
       <SurveyTemplate
-        disableNext={false}
+        disableNext={!kakaoId}
         hasProgressBar={true}
         currStep={14}
         totalStep={14}
         handlePrevClick={() => meetingNavigate(Path.AgreementSurvey)}
-        handleNextClick={() => alert('설문이 완료되었습니다. 정식 출시가 되면 매칭을 시작할 수 있습니다. 조금만 기다려 주세요.')}
+        handleNextClick={handleNextClick}
       >
         <Title>
           카톡 아이디를 <br />
@@ -37,10 +46,10 @@ const KakaoIdSurvey = () => {
             isFocus
             variant="filled"
             placeholder="카톡 아이디"
-            value={kakaoID}
+            value={kakaoId}
             height="48px"
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              setkakaoID(e.target.value);
+              setkakaoId(e.target.value);
             }}
           />
           <Explane>※'카톡 ID 검색 허용'으로 되어있어야 합니다.</Explane>
@@ -54,7 +63,7 @@ const KakaoIdSurvey = () => {
           width={200}
           height={140}
           bottonName="확인"
-          title={kakaoID}
+          title={kakaoId}
           text="　카톡아이디를 확인해 주세요.　상대에게 보여질 아아디입니다!"
           onToggleModal={onToggleModal}
           onClick={() => {

From 26afaf91a0d7984843e128e59b002e3273a92510 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Tue, 28 Jun 2022 00:06:46 +0900
Subject: [PATCH 11/82] =?UTF-8?q?feat:=20AbroadArea=20=EC=84=B8=EC=85=98?=
 =?UTF-8?q?=20=EC=A0=81=EC=9A=A9,=20step=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/AbroadAreasSurvey.tsx | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/pages/AbroadAreasSurvey.tsx b/src/pages/AbroadAreasSurvey.tsx
index f0b86c3..b3ad12e 100644
--- a/src/pages/AbroadAreasSurvey.tsx
+++ b/src/pages/AbroadAreasSurvey.tsx
@@ -6,31 +6,36 @@ import Path from '@/router/Path';
 import { Title } from '@/lib/styles/styledComponents';
 import SearchSelector from '@/components/domain/survey/SearchSelector';
 import { schools } from '@/mock/schools';
+import { useMeetingSessionState } from '@/hooks/common';
 
 const AbroadAreasSurvey = () => {
   const matchMeeting = useMatch('/meeting/*');
   const meetingNavigate = matchMeeting ? useMeetingNavigate() : useDatingNavigate();
-  const [avoidUniversities, setAvoidUniversities] = useState<number[]>([]);
+  const { initMeetingState, setMeetingData } = useMeetingSessionState();
+  const [abroadAreas, setAbroadAreas] = useState<number[]>(initMeetingState.abroadAreas);
+
+  const handleNextClick = () => {
+    if (initMeetingState) {
+      setMeetingData({ ...initMeetingState, abroadAreas });
+    }
+
+    meetingNavigate(Path.ChannelSurvey);
+  };
 
   return (
     <SurveyTemplate
       disableNext={false}
       hasProgressBar={true}
       totalStep={matchMeeting ? 14 : 12}
-      currStep={matchMeeting ? 14 : 7}
+      currStep={matchMeeting ? 12 : 7}
       handlePrevClick={() => meetingNavigate(Path.IsAbroadSurvey)}
-      handleNextClick={() => meetingNavigate(Path.ChannelSurvey)}
+      handleNextClick={handleNextClick}
     >
       <Title>
         <strong>미팅이 가능한 지역(도시)</strong>을<br />
         모두 알려주세요.
       </Title>
-      <SearchSelector
-        placeholder="지역을 검색하세요."
-        searchData={schools}
-        selectedResults={avoidUniversities}
-        setSelectedResults={setAvoidUniversities}
-      />
+      <SearchSelector placeholder="지역을 검색하세요." searchData={schools} selectedResults={abroadAreas} setSelectedResults={setAbroadAreas} />
     </SurveyTemplate>
   );
 };

From b388562e8d25a2f3d50cf7976a08a6cbb8503262 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Tue, 28 Jun 2022 00:13:46 +0900
Subject: [PATCH 12/82] =?UTF-8?q?comment:=20console=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/Input.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/base/Input.tsx b/src/components/base/Input.tsx
index d7dc3ea..2791ec8 100644
--- a/src/components/base/Input.tsx
+++ b/src/components/base/Input.tsx
@@ -31,7 +31,6 @@ const Input = ({ width = '100%', height = '38px', focusColor = palette.primary,
 
   useEffect(() => {
     if (inputRef.current && isFocus) {
-      console.log(isFocus, 'isFocus');
       inputRef.current.focus();
     }
   }, [isFocus]);

From 00b5905c8bf7afd38a1876471bacbd051ed26d8c Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Tue, 28 Jun 2022 00:14:07 +0900
Subject: [PATCH 13/82] =?UTF-8?q?feat:=20KakaoId=20=ED=99=95=EC=9D=B8=20?=
 =?UTF-8?q?=ED=9B=84=EC=97=90=EB=A7=8C=20next=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=ED=99=9C=EC=84=B1=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/KakaoIdSurvey.tsx | 11 +++++------
 src/utils/buttons.ts        |  8 ++++----
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/pages/KakaoIdSurvey.tsx b/src/pages/KakaoIdSurvey.tsx
index 6eaeeaf..c931303 100644
--- a/src/pages/KakaoIdSurvey.tsx
+++ b/src/pages/KakaoIdSurvey.tsx
@@ -15,6 +15,7 @@ const KakaoIdSurvey = () => {
   const [isModal, onToggleModal] = useToggle();
   const [kakaoId, setkakaoId] = useState('');
   const { initMeetingState, setMeetingData } = useMeetingSessionState();
+  const [isConfirm, setConfirm] = useState(false);
 
   const handleNextClick = () => {
     alert('설문이 완료되었습니다. 정식 출시가 되면 매칭을 시작할 수 있습니다. 조금만 기다려 주세요.');
@@ -26,7 +27,7 @@ const KakaoIdSurvey = () => {
   return (
     <>
       <SurveyTemplate
-        disableNext={!kakaoId}
+        disableNext={!isConfirm}
         hasProgressBar={true}
         currStep={14}
         totalStep={14}
@@ -53,8 +54,8 @@ const KakaoIdSurvey = () => {
             }}
           />
           <Explane>※'카톡 ID 검색 허용'으로 되어있어야 합니다.</Explane>
-          <Button width={100} onClick={onToggleModal}>
-            (임시 버튼)
+          <Button width={100} onClick={onToggleModal} disabled={!kakaoId}>
+            카톡 ID 확인
           </Button>
         </InputWrapper>
       </SurveyTemplate>
@@ -66,9 +67,7 @@ const KakaoIdSurvey = () => {
           title={kakaoId}
           text="　카톡아이디를 확인해 주세요.　상대에게 보여질 아아디입니다!"
           onToggleModal={onToggleModal}
-          onClick={() => {
-            console.log('안녕하세용');
-          }}
+          onClick={() => setConfirm(true)}
         />
       )}
     </>
diff --git a/src/utils/buttons.ts b/src/utils/buttons.ts
index 68559c2..65d31b7 100644
--- a/src/utils/buttons.ts
+++ b/src/utils/buttons.ts
@@ -56,10 +56,10 @@ export const getVariant = (variant: ButtonVariants, isDisabled?: boolean) => css
     }
     ${isDisabled &&
     css`
-      font-weight: 300;
-      background-color: ${palette.grayLight};
-      color: rgba(0, 0, 0, 0.6);
-      cursor: not-allowed;
+      font-weight: 300 !important;
+      background-color: ${palette.grayLight} !important;
+      color: rgba(0, 0, 0, 0.6) !important;
+      cursor: not-allowed !important;
     `}
   `}
 

From d5afb770e5e9c7a4795895cc486e1ee915827fad Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Wed, 29 Jun 2022 22:05:26 +0900
Subject: [PATCH 14/82] =?UTF-8?q?useMeetingNavigate=20->=20useNavigate=20?=
 =?UTF-8?q?=ED=9B=85=EC=9C=BC=EB=A1=9C=20=EB=B0=94=EA=BE=B8=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/common/{useMeetingNavigate.ts => useNavigate.ts} | 0
 src/pages/AbroadAreasSurvey.tsx                            | 2 +-
 src/pages/AgreementSurvey.tsx                              | 2 +-
 src/pages/AvoidUniversitiesSurvey.tsx                      | 2 +-
 src/pages/ChannelSurvey.tsx                                | 2 +-
 src/pages/DomesticAreasSurvey.tsx                          | 2 +-
 src/pages/GenderAverageAgeSurvey.tsx                       | 2 +-
 src/pages/IsAbroadSurvey.tsx                               | 2 +-
 src/pages/KakaoIdSurvey.tsx                                | 2 +-
 src/pages/MindsetSurvey.tsx                                | 2 +-
 src/pages/MyBodySmoke.tsx                                  | 2 +-
 src/pages/MyDateCount.tsx                                  | 2 +-
 src/pages/MyDepartmentCharacter.tsx                        | 2 +-
 src/pages/MyGenderAge.tsx                                  | 2 +-
 src/pages/MyMbtiHeight.tsx                                 | 2 +-
 src/pages/OurDepartmentsAverageHeightSurvey.tsx            | 2 +-
 src/pages/OurUniversitiesSurvey.tsx                        | 2 +-
 src/pages/PlaySurvey.tsx                                   | 2 +-
 src/pages/PreferAverageAgeHeightSurvey.tsx                 | 2 +-
 src/pages/PreferBodyDateCountSurvey.tsx                    | 2 +-
 src/pages/PreferDepartmentCharacterSurvey.tsx              | 2 +-
 src/pages/PreferDepartmentsSurvey.tsx                      | 2 +-
 src/pages/PreferUniversitiesSurvey.tsx                     | 2 +-
 src/pages/TypeOfMeetingSurvey.tsx                          | 2 +-
 24 files changed, 23 insertions(+), 23 deletions(-)
 rename src/hooks/common/{useMeetingNavigate.ts => useNavigate.ts} (100%)

diff --git a/src/hooks/common/useMeetingNavigate.ts b/src/hooks/common/useNavigate.ts
similarity index 100%
rename from src/hooks/common/useMeetingNavigate.ts
rename to src/hooks/common/useNavigate.ts
diff --git a/src/pages/AbroadAreasSurvey.tsx b/src/pages/AbroadAreasSurvey.tsx
index b3ad12e..47428ee 100644
--- a/src/pages/AbroadAreasSurvey.tsx
+++ b/src/pages/AbroadAreasSurvey.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useMatch } from 'react-router-dom';
-import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useNavigate';
 import { SurveyTemplate } from '@/components/domain/survey';
 import Path from '@/router/Path';
 import { Title } from '@/lib/styles/styledComponents';
diff --git a/src/pages/AgreementSurvey.tsx b/src/pages/AgreementSurvey.tsx
index fec3730..bac14a8 100644
--- a/src/pages/AgreementSurvey.tsx
+++ b/src/pages/AgreementSurvey.tsx
@@ -6,7 +6,7 @@ import { Title } from '@/lib/styles/styledComponents';
 import React from 'react';
 import styled from 'styled-components';
 import { FormWrapper } from './AuthMail';
-import { useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useMeetingNavigate } from '@/hooks/common/useNavigate';
 import Path from '@/router/Path';
 
 const AgreementSurvey = () => {
diff --git a/src/pages/AvoidUniversitiesSurvey.tsx b/src/pages/AvoidUniversitiesSurvey.tsx
index b458a08..88c4a05 100644
--- a/src/pages/AvoidUniversitiesSurvey.tsx
+++ b/src/pages/AvoidUniversitiesSurvey.tsx
@@ -6,7 +6,7 @@ import SearchSelector from '@/components/domain/survey/SearchSelector';
 import { schools } from '@/mock/schools';
 import styled from 'styled-components';
 import Path from '@/router/Path';
-import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useNavigate';
 import { useMeetingSessionState } from '@/hooks/common';
 
 const AvoidUniversitiesSurvey = () => {
diff --git a/src/pages/ChannelSurvey.tsx b/src/pages/ChannelSurvey.tsx
index 0b38066..8365211 100644
--- a/src/pages/ChannelSurvey.tsx
+++ b/src/pages/ChannelSurvey.tsx
@@ -3,7 +3,7 @@ import { CheckBox } from '@/components/base';
 import { FormWrapper } from './AuthMail';
 import useChannelCheck from '@/hooks/agreement/useChannelCheck';
 import { SurveyTemplate } from '@/components/domain/survey';
-import { useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useMeetingNavigate } from '@/hooks/common/useNavigate';
 import Path from '@/router/Path';
 import { useMeetingSessionState } from '@/hooks/common';
 import { CHANNEL_ITEMS } from '@/types/constants/channel';
diff --git a/src/pages/DomesticAreasSurvey.tsx b/src/pages/DomesticAreasSurvey.tsx
index 0f6d9dd..1c6f6d1 100644
--- a/src/pages/DomesticAreasSurvey.tsx
+++ b/src/pages/DomesticAreasSurvey.tsx
@@ -6,7 +6,7 @@ import { DOMESTICAREAS_ITEMS } from '@/types/constants/area';
 import styled from 'styled-components';
 import { FormWrapper } from './AuthMail';
 import Path from '@/router/Path';
-import { useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useMeetingNavigate } from '@/hooks/common/useNavigate';
 import { useMeetingSessionState } from '@/hooks/common';
 import { type DomesticAreas } from '@/types/meeting';
 
diff --git a/src/pages/GenderAverageAgeSurvey.tsx b/src/pages/GenderAverageAgeSurvey.tsx
index 2b7c7ac..d1f23f7 100644
--- a/src/pages/GenderAverageAgeSurvey.tsx
+++ b/src/pages/GenderAverageAgeSurvey.tsx
@@ -3,7 +3,7 @@ import { SurveyTemplate, AgeBox } from '@/components/domain/survey';
 import { Title } from '@/lib/styles/styledComponents';
 import styled from 'styled-components';
 import ChooseTwoBox from '@/components/domain/survey/ChooseTwoBox';
-import { useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useMeetingNavigate } from '@/hooks/common/useNavigate';
 import Path from '@/router/Path';
 import { useNavigate } from 'react-router-dom';
 import { GENDER_ITEMS } from '@/types/constants/constant';
diff --git a/src/pages/IsAbroadSurvey.tsx b/src/pages/IsAbroadSurvey.tsx
index 94c86eb..0f9cde4 100644
--- a/src/pages/IsAbroadSurvey.tsx
+++ b/src/pages/IsAbroadSurvey.tsx
@@ -4,7 +4,7 @@ import { Title } from '@/lib/styles/styledComponents';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { FormWrapper } from './AuthMail';
-import { useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useMeetingNavigate } from '@/hooks/common/useNavigate';
 import Path from '@/router/Path';
 import { COUNTRY_ITEMS } from '@/types/constants/area';
 import { useMeetingSessionState } from '@/hooks/common';
diff --git a/src/pages/KakaoIdSurvey.tsx b/src/pages/KakaoIdSurvey.tsx
index c931303..e8e6936 100644
--- a/src/pages/KakaoIdSurvey.tsx
+++ b/src/pages/KakaoIdSurvey.tsx
@@ -7,7 +7,7 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import { FormWrapper } from './AuthMail';
 import Path from '@/router/Path';
-import { useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useMeetingNavigate } from '@/hooks/common/useNavigate';
 import { useMeetingSessionState } from '@/hooks/common';
 
 const KakaoIdSurvey = () => {
diff --git a/src/pages/MindsetSurvey.tsx b/src/pages/MindsetSurvey.tsx
index 8c6533a..3ad5880 100644
--- a/src/pages/MindsetSurvey.tsx
+++ b/src/pages/MindsetSurvey.tsx
@@ -5,7 +5,7 @@ import { ChoiceButton } from '@/components/base';
 import styled from 'styled-components';
 import { MINDSET_ITEMS } from '@/types/constants/constant';
 import Path from '@/router/Path';
-import { useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useMeetingNavigate } from '@/hooks/common/useNavigate';
 import { useMeetingSessionState } from '@/hooks/common';
 import { type MindSet } from '@/types/meeting';
 
diff --git a/src/pages/MyBodySmoke.tsx b/src/pages/MyBodySmoke.tsx
index fd4e5d1..9fb2bea 100644
--- a/src/pages/MyBodySmoke.tsx
+++ b/src/pages/MyBodySmoke.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { ChooseFourBox, ChooseTwoBox, SurveyTemplate } from '@/components/domain/survey';
 import Path from '@/router/Path';
-import { useDatingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useDatingNavigate } from '@/hooks/common/useNavigate';
 import { ChooseFourBoxItemProps } from '@/components/domain/survey/ChooseFourBox';
 import { SMOKE_ITEMS } from '@/types/constants/smoke';
 import { MYBODY_ITEMS } from '@/types/constants/body';
diff --git a/src/pages/MyDateCount.tsx b/src/pages/MyDateCount.tsx
index a1df7a4..da7e089 100644
--- a/src/pages/MyDateCount.tsx
+++ b/src/pages/MyDateCount.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useDatingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useDatingNavigate } from '@/hooks/common/useNavigate';
 import { ChooseFourBox, ChooseTwoBox, SurveyTemplate } from '@/components/domain/survey';
 import Path from '@/router/Path';
 import { ChooseFourBoxItemProps } from '@/components/domain/survey/ChooseFourBox';
diff --git a/src/pages/MyDepartmentCharacter.tsx b/src/pages/MyDepartmentCharacter.tsx
index abc6841..fd21bd9 100644
--- a/src/pages/MyDepartmentCharacter.tsx
+++ b/src/pages/MyDepartmentCharacter.tsx
@@ -5,7 +5,7 @@ import { ChooseFourBox } from '@/components/domain/survey';
 import { MY_DEPARTMENT_ITEMS } from '@/types/constants/department';
 import { CHARACTER_ITEMS } from '@/types/constants/charater';
 import Path from '@/router/Path';
-import { useDatingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useDatingNavigate } from '@/hooks/common/useNavigate';
 
 const MyDepartmentCharacter = () => {
   const datingNavigate = useDatingNavigate();
diff --git a/src/pages/MyGenderAge.tsx b/src/pages/MyGenderAge.tsx
index 596d94f..129b92e 100644
--- a/src/pages/MyGenderAge.tsx
+++ b/src/pages/MyGenderAge.tsx
@@ -4,7 +4,7 @@ import { Title } from '@/lib/styles/styledComponents';
 import styled from 'styled-components';
 import { MIN_AGE, MAX_AGE } from '@/components/domain/survey/AgeBox';
 import ChooseTwoBox from '@/components/domain/survey/ChooseTwoBox';
-import { useDatingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useDatingNavigate } from '@/hooks/common/useNavigate';
 import Path from '@/router/Path';
 import { useNavigate } from 'react-router-dom';
 import { GENDER_ITEMS } from '@/types/constants/constant';
diff --git a/src/pages/MyMbtiHeight.tsx b/src/pages/MyMbtiHeight.tsx
index 09db21c..6f0628d 100644
--- a/src/pages/MyMbtiHeight.tsx
+++ b/src/pages/MyMbtiHeight.tsx
@@ -5,7 +5,7 @@ import { Input } from '@/components/base';
 import styled from 'styled-components';
 import { palette } from '@/lib/styles/palette';
 import Path from '@/router/Path';
-import { useDatingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useDatingNavigate } from '@/hooks/common/useNavigate';
 
 const MyMbtiHeight = () => {
   const datingNavigate = useDatingNavigate();
diff --git a/src/pages/OurDepartmentsAverageHeightSurvey.tsx b/src/pages/OurDepartmentsAverageHeightSurvey.tsx
index e0647a6..71e6ad5 100644
--- a/src/pages/OurDepartmentsAverageHeightSurvey.tsx
+++ b/src/pages/OurDepartmentsAverageHeightSurvey.tsx
@@ -5,7 +5,7 @@ import { ChooseFourBox, HeightBox } from '@/components/domain/survey';
 import { ChooseFourBoxItemProps } from '@/components/domain/survey/ChooseFourBox';
 import { OUR_DEPARTMENT_ITEMS } from '@/types/constants/department';
 import Path from '@/router/Path';
-import { useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useMeetingNavigate } from '@/hooks/common/useNavigate';
 import { useMeetingSessionState } from '@/hooks/common';
 import { type Departments } from '@/types/meeting';
 
diff --git a/src/pages/OurUniversitiesSurvey.tsx b/src/pages/OurUniversitiesSurvey.tsx
index 7ce9ef6..0ed21d5 100644
--- a/src/pages/OurUniversitiesSurvey.tsx
+++ b/src/pages/OurUniversitiesSurvey.tsx
@@ -4,7 +4,7 @@ import { SurveyTemplate } from '@/components/domain/survey';
 import SearchSelector from '@/components/domain/survey/SearchSelector';
 import { schools } from '@/mock/schools';
 import Path from '@/router/Path';
-import { useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useMeetingNavigate } from '@/hooks/common/useNavigate';
 import { useMeetingSessionState } from '@/hooks/common';
 
 const OurUniversitiesSurvey = () => {
diff --git a/src/pages/PlaySurvey.tsx b/src/pages/PlaySurvey.tsx
index a1ef9f2..e1f49fc 100644
--- a/src/pages/PlaySurvey.tsx
+++ b/src/pages/PlaySurvey.tsx
@@ -5,7 +5,7 @@ import { ChoiceButton } from '@/components/base';
 import styled from 'styled-components';
 import { PLAY_ITEMS } from '@/types/constants/play';
 import Path from '@/router/Path';
-import { useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useMeetingNavigate } from '@/hooks/common/useNavigate';
 import { useMeetingSessionState } from '@/hooks/common';
 import { type Play } from '@/types/meeting';
 
diff --git a/src/pages/PreferAverageAgeHeightSurvey.tsx b/src/pages/PreferAverageAgeHeightSurvey.tsx
index 7e6f87b..7497d0f 100644
--- a/src/pages/PreferAverageAgeHeightSurvey.tsx
+++ b/src/pages/PreferAverageAgeHeightSurvey.tsx
@@ -4,7 +4,7 @@ import { AgeBox, HeightBox } from '@/components/domain/survey';
 import { Title } from '@/lib/styles/styledComponents';
 import styled from 'styled-components';
 import { useMatch } from 'react-router-dom';
-import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useNavigate';
 import { useMeetingSessionState } from '@/hooks/common';
 import Path from '@/router/Path';
 
diff --git a/src/pages/PreferBodyDateCountSurvey.tsx b/src/pages/PreferBodyDateCountSurvey.tsx
index b534025..71ecb09 100644
--- a/src/pages/PreferBodyDateCountSurvey.tsx
+++ b/src/pages/PreferBodyDateCountSurvey.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { ChooseFourBox, SurveyTemplate } from '@/components/domain/survey';
 import { ChooseFourBoxItemProps } from '@/components/domain/survey/ChooseFourBox';
-import { useDatingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useDatingNavigate } from '@/hooks/common/useNavigate';
 import Path from '@/router/Path';
 import { PREFER_DCOUNT_ITEMS } from '@/types/constants/dcount';
 import { PREFER_BODY_ITEMS } from '@/types/constants/body';
diff --git a/src/pages/PreferDepartmentCharacterSurvey.tsx b/src/pages/PreferDepartmentCharacterSurvey.tsx
index 9b321b1..0362702 100644
--- a/src/pages/PreferDepartmentCharacterSurvey.tsx
+++ b/src/pages/PreferDepartmentCharacterSurvey.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { ChooseFourBox, SurveyTemplate } from '@/components/domain/survey';
 import { ChooseFourBoxItemProps } from '@/components/domain/survey/ChooseFourBox';
-import { useDatingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useDatingNavigate } from '@/hooks/common/useNavigate';
 import Path from '@/router/Path';
 import { PREFER_DEPARTMENT_ITEMS } from '@/types/constants/department';
 import { PREFER_CHARACTER_ITEMS } from '@/types/constants/charater';
diff --git a/src/pages/PreferDepartmentsSurvey.tsx b/src/pages/PreferDepartmentsSurvey.tsx
index 5b5f69e..1c871b9 100644
--- a/src/pages/PreferDepartmentsSurvey.tsx
+++ b/src/pages/PreferDepartmentsSurvey.tsx
@@ -4,7 +4,7 @@ import { Title } from '@/lib/styles/styledComponents';
 import { ChooseFourBox } from '@/components/domain/survey';
 import { ChooseFourBoxItemProps } from '@/components/domain/survey/ChooseFourBox';
 import { PREFER_DEPARTMENT_ITEMS } from '@/types/constants/department';
-import { useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useMeetingNavigate } from '@/hooks/common/useNavigate';
 import Path from '@/router/Path';
 
 const PreferDepartmentsSurvey = () => {
diff --git a/src/pages/PreferUniversitiesSurvey.tsx b/src/pages/PreferUniversitiesSurvey.tsx
index c9d2654..d7b051e 100644
--- a/src/pages/PreferUniversitiesSurvey.tsx
+++ b/src/pages/PreferUniversitiesSurvey.tsx
@@ -4,7 +4,7 @@ import { SurveyTemplate } from '@/components/domain/survey';
 import { Title } from '@/lib/styles/styledComponents';
 import SearchSelector from '@/components/domain/survey/SearchSelector';
 import { schools } from '@/mock/schools';
-import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useNavigate';
 import Path from '@/router/Path';
 import { useMeetingSessionState } from '@/hooks/common';
 
diff --git a/src/pages/TypeOfMeetingSurvey.tsx b/src/pages/TypeOfMeetingSurvey.tsx
index 84cdf24..e65c59d 100644
--- a/src/pages/TypeOfMeetingSurvey.tsx
+++ b/src/pages/TypeOfMeetingSurvey.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { SurveyTemplate } from '@/components/domain/survey';
 import { Title } from '@/lib/styles/styledComponents';
 import { ChooseFourBox } from '@/components/domain/survey';
-import { useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useMeetingNavigate } from '@/hooks/common/useNavigate';
 import Path from '@/router/Path';
 import { useNavigate } from 'react-router-dom';
 import { type Meeting } from '@/types/meeting';

From e9d96721d35b20164c17277906f614be51114c0a Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Wed, 29 Jun 2022 22:22:12 +0900
Subject: [PATCH 15/82] =?UTF-8?q?feat:=20=EB=AF=B8=ED=8C=85=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=EC=97=90=20datingNavigate=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/atoms/datingState.ts                  |  2 +-
 src/hooks/common/index.ts                 |  1 +
 src/hooks/common/useDatingSessionState.ts | 24 +++++++++++++++++++++++
 src/pages/TypeOfMeetingSurvey.tsx         | 17 ++++++++++++++--
 4 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 src/hooks/common/useDatingSessionState.ts

diff --git a/src/atoms/datingState.ts b/src/atoms/datingState.ts
index 00d8dfb..35dd1db 100644
--- a/src/atoms/datingState.ts
+++ b/src/atoms/datingState.ts
@@ -35,7 +35,7 @@ const INITIAL_DATING_STATE: Dating = {
 };
 
 const datingState = atom<Dating>({
-  key: 'dating/datingState',
+  key: 'datingState',
   default: INITIAL_DATING_STATE,
   effects_UNSTABLE: [persistAtom],
 });
diff --git a/src/hooks/common/index.ts b/src/hooks/common/index.ts
index 3d451ca..3652b60 100644
--- a/src/hooks/common/index.ts
+++ b/src/hooks/common/index.ts
@@ -3,3 +3,4 @@ export { default as useCountdown } from './useCountdown';
 export { default as useToggle } from './useToggle';
 export { default as useSesstionStorage } from './useSesstionStorage';
 export { default as useMeetingSessionState } from './useMeetingSessionState';
+export { default as useDatingSessionState } from './useDatingSessionState';
diff --git a/src/hooks/common/useDatingSessionState.ts b/src/hooks/common/useDatingSessionState.ts
new file mode 100644
index 0000000..0d31244
--- /dev/null
+++ b/src/hooks/common/useDatingSessionState.ts
@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+import { useDatingState } from '@/atoms/datingState';
+import { type Dating } from '@/types/dating';
+import { useSesstionStorage } from './';
+
+function useMeetingSessionState() {
+  const { datingData: datingAtomData, setDatingData } = useDatingState();
+  const [initDatingState, setInitState] = useState<Dating>(datingAtomData);
+  const { getValueFromSessionStorage } = useSesstionStorage();
+
+  useEffect(() => {
+    const sessionData = getValueFromSessionStorage('dating');
+    if (sessionData) {
+      const { datingState } = JSON.parse(sessionData);
+      setInitState(datingState);
+      return;
+    }
+    setInitState(datingAtomData);
+  }, [datingAtomData]);
+
+  return { initDatingState, setDatingData };
+}
+
+export default useMeetingSessionState;
diff --git a/src/pages/TypeOfMeetingSurvey.tsx b/src/pages/TypeOfMeetingSurvey.tsx
index e65c59d..c281e7a 100644
--- a/src/pages/TypeOfMeetingSurvey.tsx
+++ b/src/pages/TypeOfMeetingSurvey.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { SurveyTemplate } from '@/components/domain/survey';
 import { Title } from '@/lib/styles/styledComponents';
 import { ChooseFourBox } from '@/components/domain/survey';
-import { useMeetingNavigate } from '@/hooks/common/useNavigate';
+import { useMeetingNavigate, useDatingNavigate } from '@/hooks/common/useNavigate';
 import Path from '@/router/Path';
 import { useNavigate } from 'react-router-dom';
 import { type Meeting } from '@/types/meeting';
@@ -12,6 +12,7 @@ import { useMeetingSessionState } from '@/hooks/common';
 const TypeOfMeetingSurvey = () => {
   const navigate = useNavigate();
   const meetingNavigate = useMeetingNavigate();
+  const datingNavigate = useDatingNavigate();
   const { initMeetingState, setMeetingData } = useMeetingSessionState();
   const [checkedOption, setCheckedOption] = useState<Meeting['typeOfMeeting'] | string>(initMeetingState?.typeOfMeeting);
 
@@ -20,7 +21,19 @@ const TypeOfMeetingSurvey = () => {
       setMeetingData({ ...initMeetingState, typeOfMeeting: checkedOption as Meeting['typeOfMeeting'] });
     }
 
-    meetingNavigate(Path.GenderAverageAgeSurvey);
+    switch (checkedOption) {
+      case 'ONE':
+        datingNavigate(Path.MyGenderAge);
+        break;
+      case 'TWO':
+        meetingNavigate(Path.GenderAverageAgeSurvey);
+        break;
+      case 'THREE':
+        meetingNavigate(Path.GenderAverageAgeSurvey);
+        break;
+      case 'FOUR':
+        meetingNavigate(Path.GenderAverageAgeSurvey);
+    }
   };
 
   return (

From db881997222db86f48ace398eef8fe338ab2ae77 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Wed, 29 Jun 2022 22:31:04 +0900
Subject: [PATCH 16/82] =?UTF-8?q?feat:=20MyGenderAge=20=EC=84=A4=EB=AC=B8?=
 =?UTF-8?q?=20=EC=84=B8=EC=85=98=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MyGenderAge.tsx | 37 ++++++++++++++++++++++++-------------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/pages/MyGenderAge.tsx b/src/pages/MyGenderAge.tsx
index 129b92e..4abe11c 100644
--- a/src/pages/MyGenderAge.tsx
+++ b/src/pages/MyGenderAge.tsx
@@ -1,32 +1,41 @@
 import React, { useState } from 'react';
+import Path from '@/router/Path';
+import { useNavigate } from 'react-router-dom';
 import { SurveyTemplate, AgeBox } from '@/components/domain/survey';
 import { Title } from '@/lib/styles/styledComponents';
 import styled from 'styled-components';
-import { MIN_AGE, MAX_AGE } from '@/components/domain/survey/AgeBox';
 import ChooseTwoBox from '@/components/domain/survey/ChooseTwoBox';
 import { useDatingNavigate } from '@/hooks/common/useNavigate';
-import Path from '@/router/Path';
-import { useNavigate } from 'react-router-dom';
+import { useDatingSessionState } from '@/hooks/common';
 import { GENDER_ITEMS } from '@/types/constants/constant';
-
-export type GenderOptions = 'FEMAIL' | 'MALE';
+import { type Gender } from '@/types/meeting';
 
 const MyGenderAge = () => {
   const navigate = useNavigate();
   const datingNavigate = useDatingNavigate();
-  const [genderOption, setGenderOption] = useState<GenderOptions>('FEMAIL');
-  const [ageOption, setAgeOption] = useState(Math.floor((MIN_AGE + MAX_AGE) / 2));
-  const onChangeOption = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const { initDatingState, setDatingData } = useDatingSessionState();
+  const [gender, setGender] = useState(initDatingState.gender);
+  const [age, setAge] = useState(initDatingState.age);
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { id } = e.target;
-    setGenderOption(id as GenderOptions);
+    setGender(id as Gender);
+  };
+  const handleNextClick = () => {
+    if (initDatingState) {
+      setDatingData({ ...initDatingState, gender, age });
+    }
+
+    datingNavigate(Path.MyDepartmentCharacter);
   };
+
   return (
     <SurveyTemplate
-      disableNext={!ageOption && !genderOption}
+      disableNext={!age && !gender}
       currStep={2}
       totalStep={12}
       handlePrevClick={() => navigate(Path.TypeOfMeetingSurvey)}
-      handleNextClick={() => datingNavigate(Path.MyDepartmentCharacter)}
+      handleNextClick={handleNextClick}
     >
       <StyledTitle>
         <strong>1:1 소개팅</strong>을 선택하셨어요.
@@ -35,10 +44,12 @@ const MyGenderAge = () => {
         <br />
         바로 매칭해드릴게요!
       </StyledTitle>
-      <ChooseTwoBox items={GENDER_ITEMS} selectedOption={genderOption} onChangeOption={onChangeOption}>
+      <ChooseTwoBox items={GENDER_ITEMS} selectedOption={gender} onChangeOption={onChange}>
         성별을 선택해주세요.
       </ChooseTwoBox>
-      <AgeBox setAgeOption={setAgeOption}>본인의 나이를 알려주세요</AgeBox>
+      <AgeBox ageOption={age} setAgeOption={setAge}>
+        본인의 나이를 알려주세요
+      </AgeBox>
     </SurveyTemplate>
   );
 };

From fb5af71985c525590eb6ed2e6616701a61fa7757 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Wed, 29 Jun 2022 22:33:51 +0900
Subject: [PATCH 17/82] =?UTF-8?q?feat:=20MyDepartmentCharacter=20=EC=84=B8?=
 =?UTF-8?q?=EC=85=98=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MyDepartmentCharacter.tsx | 29 +++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/pages/MyDepartmentCharacter.tsx b/src/pages/MyDepartmentCharacter.tsx
index fd21bd9..2428d02 100644
--- a/src/pages/MyDepartmentCharacter.tsx
+++ b/src/pages/MyDepartmentCharacter.tsx
@@ -6,36 +6,45 @@ import { MY_DEPARTMENT_ITEMS } from '@/types/constants/department';
 import { CHARACTER_ITEMS } from '@/types/constants/charater';
 import Path from '@/router/Path';
 import { useDatingNavigate } from '@/hooks/common/useNavigate';
+import { useDatingSessionState } from '@/hooks/common';
+import { type Departments } from '@/types/meeting';
+import { type Characteristic } from '@/types/dating';
 
 const MyDepartmentCharacter = () => {
   const datingNavigate = useDatingNavigate();
-  const [checkedDepartmentOption, setDepartmentCheckedOption] = useState<DepartmentOptions | string>('LIBERAL');
-  const [checkedCharacterOption, setCharacterCheckedOption] = useState<CharacterOptions | string>('VERY_QUIET');
+  const { initDatingState, setDatingData } = useDatingSessionState();
+  const [myDepartment, setMyDepartment] = useState<Departments | string>(initDatingState.myDepartment);
+  const [characteristic, setCharacteristic] = useState<Characteristic | string>(initDatingState.characteristic);
+
+  const handleNextClick = () => {
+    if (initDatingState) {
+      setDatingData({ ...initDatingState, myDepartment: myDepartment as Departments, characteristic: characteristic as Characteristic });
+    }
+
+    datingNavigate(Path.MyMbtiHeight);
+  };
 
   return (
     <SurveyTemplate
-      disableNext={!checkedDepartmentOption && !checkedCharacterOption}
+      disableNext={!myDepartment && !characteristic}
       currStep={3}
       totalStep={12}
       handlePrevClick={() => datingNavigate(Path.MyGenderAge)}
-      handleNextClick={() => datingNavigate(Path.MyMbtiHeight)}
+      handleNextClick={handleNextClick}
     >
       <Title>
-        <strong>본인에 대한 것을</strong>
+        <strong>본인에 대한 것</strong>을
         <br />
         선택해주세요.
       </Title>
-      <ChooseFourBox top={34} items={MY_DEPARTMENT_ITEMS} checkedOption={checkedDepartmentOption} setCheckedOption={setDepartmentCheckedOption}>
+      <ChooseFourBox top={34} items={MY_DEPARTMENT_ITEMS} checkedOption={myDepartment} setCheckedOption={setMyDepartment}>
         학과를 선택해주세요
       </ChooseFourBox>
-      <ChooseFourBox top={31} items={CHARACTER_ITEMS} checkedOption={checkedCharacterOption} setCheckedOption={setCharacterCheckedOption}>
+      <ChooseFourBox top={31} items={CHARACTER_ITEMS} checkedOption={characteristic} setCheckedOption={setCharacteristic}>
         본인의 성격을 선택해주세요
       </ChooseFourBox>
     </SurveyTemplate>
   );
 };
 
-type DepartmentOptions = 'LIBERAL' | 'SCIENCE' | 'ATHLETIC' | 'ART';
-type CharacterOptions = 'VERY_QUIET' | 'A_LITTLE_QUIET' | 'VERY_ACTIVE' | 'A_LITTLE_ACTIVE';
-
 export default MyDepartmentCharacter;

From 256330102aef4b924825888878437ac1eacfd0bc Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Wed, 29 Jun 2022 22:42:16 +0900
Subject: [PATCH 18/82] =?UTF-8?q?feat:=20MyMbtiHeight=20=EC=84=B8=EC=85=98?=
 =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MyMbtiHeight.tsx | 35 +++++++++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/pages/MyMbtiHeight.tsx b/src/pages/MyMbtiHeight.tsx
index 6f0628d..15d3d87 100644
--- a/src/pages/MyMbtiHeight.tsx
+++ b/src/pages/MyMbtiHeight.tsx
@@ -1,45 +1,64 @@
 import React, { useState } from 'react';
+import styled from 'styled-components';
 import { SubTitle } from '@/lib/styles/styledComponents';
 import { SurveyTemplate } from '@/components/domain/survey';
 import { Input } from '@/components/base';
-import styled from 'styled-components';
 import { palette } from '@/lib/styles/palette';
 import Path from '@/router/Path';
 import { useDatingNavigate } from '@/hooks/common/useNavigate';
+import { useDatingSessionState } from '@/hooks/common';
 
 const MyMbtiHeight = () => {
   const datingNavigate = useDatingNavigate();
-  const [mbtiOption, setMbtiOption] = useState<string>('');
-  const [myHeight, setMyHeight] = useState<number>(0);
+  const { initDatingState, setDatingData } = useDatingSessionState();
+  const [mbti, setMbti] = useState(initDatingState.mbti);
+  const [myHeight, setMyHeight] = useState(initDatingState.myHeight);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     switch (name) {
       case 'mbti':
-        setMbtiOption(value);
+        setMbti(value);
         break;
       case 'myHeight':
         setMyHeight(Number(value));
     }
   };
 
+  const handleNextClick = () => {
+    if (initDatingState) {
+      setDatingData({ ...initDatingState, mbti, myHeight });
+    }
+
+    datingNavigate(Path.MyBodySmoke);
+  };
+
   return (
     <SurveyTemplate
-      disableNext={!mbtiOption || myHeight <= 0}
+      disableNext={!mbti || myHeight <= 0}
       currStep={4}
       totalStep={12}
       handlePrevClick={() => datingNavigate(Path.MyDepartmentCharacter)}
-      handleNextClick={() => datingNavigate(Path.MyBodySmoke)}
+      handleNextClick={handleNextClick}
     >
       <StyledTitle>본인의 MBTI를 알려주세요.</StyledTitle>
       <Anchor target="_blank" href="https://types.my/quiz/create?step=5">
         나의 MBTI 알아보기
       </Anchor>
-      <Input required variant="filled" isFocus height="48px" name="mbti" placeholder="나의 MBTI" maxLength={4} onChange={handleChange} />
+      <Input required variant="filled" isFocus height="48px" name="mbti" placeholder="나의 MBTI" maxLength={4} onChange={handleChange} value={mbti} />
       <InputWrapper>
         <StyledTitle>본인의 키를 알려주세요.</StyledTitle>
         <Description>키는 220cm 이하여야 합니다.</Description>
-        <Input required variant="filled" height="48px" name="myHeight" placeholder="키(cm)" maxLength={3} onChange={handleChange} />
+        <Input
+          required
+          variant="filled"
+          height="48px"
+          name="myHeight"
+          placeholder="키(cm)"
+          maxLength={3}
+          onChange={handleChange}
+          value={String(myHeight)}
+        />
       </InputWrapper>
     </SurveyTemplate>
   );

From 2663d00e00410e7768f5aa4b094ceb13e426d6ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Wed, 29 Jun 2022 22:50:27 +0900
Subject: [PATCH 19/82] Feat: CompleteButton

---
 .../matching/buttons/CompleteButton.tsx       | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/components/domain/matching/buttons/CompleteButton.tsx

diff --git a/src/components/domain/matching/buttons/CompleteButton.tsx b/src/components/domain/matching/buttons/CompleteButton.tsx
new file mode 100644
index 0000000..b7a0194
--- /dev/null
+++ b/src/components/domain/matching/buttons/CompleteButton.tsx
@@ -0,0 +1,20 @@
+import { Button } from '@/components/base';
+import { palette } from '@/lib/styles/palette';
+import React from 'react';
+import styled from 'styled-components';
+
+function CompleteButton() {
+  return (
+    <ButtonStyled size="medium" variant="grayBlack">
+      이미 결제를 완료하였습니다.
+    </ButtonStyled>
+  );
+}
+
+const ButtonStyled = styled(Button)`
+  color: white;
+  font-weight: 700;
+  background-color: ${palette.disableColor};
+`;
+
+export default CompleteButton;

From 49f878df55422159f465ab7a57748dc1b3dc8041 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Wed, 29 Jun 2022 22:50:35 +0900
Subject: [PATCH 20/82] Feat: EndButton

---
 .../domain/matching/buttons/EndButton.tsx         | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 src/components/domain/matching/buttons/EndButton.tsx

diff --git a/src/components/domain/matching/buttons/EndButton.tsx b/src/components/domain/matching/buttons/EndButton.tsx
new file mode 100644
index 0000000..45aa2fb
--- /dev/null
+++ b/src/components/domain/matching/buttons/EndButton.tsx
@@ -0,0 +1,15 @@
+import { Button } from '@/components/base';
+import React from 'react';
+
+function EndButton() {
+  const handleClick = () => {
+    console.log('asd');
+  };
+  return (
+    <Button onClick={handleClick} size="medium" variant={'kakao'}>
+      <strong>카카오페이</strong>로 간편하고 안전하게 결제
+    </Button>
+  );
+}
+
+export default EndButton;

From ea57e62e76df0b92aa02f195d61934fd5c64658d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Wed, 29 Jun 2022 22:50:45 +0900
Subject: [PATCH 21/82] Feat: NoneButton

---
 .../domain/matching/buttons/NoneButton.tsx        | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 src/components/domain/matching/buttons/NoneButton.tsx

diff --git a/src/components/domain/matching/buttons/NoneButton.tsx b/src/components/domain/matching/buttons/NoneButton.tsx
new file mode 100644
index 0000000..e45d7f6
--- /dev/null
+++ b/src/components/domain/matching/buttons/NoneButton.tsx
@@ -0,0 +1,15 @@
+import { Button } from '@/components/base';
+import React from 'react';
+
+function NoneButton() {
+  const handleClick = () => {
+    console.log('asd');
+  };
+  return (
+    <Button onClick={handleClick} size="medium" variant={'default'}>
+      설문하러 가기
+    </Button>
+  );
+}
+
+export default NoneButton;

From a20054b4c0467dbaa56a149a77b8d5fa4b596b56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Wed, 29 Jun 2022 22:50:58 +0900
Subject: [PATCH 22/82] Feat: SuccessButton

---
 .../domain/matching/buttons/SuccessButton.tsx     | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 src/components/domain/matching/buttons/SuccessButton.tsx

diff --git a/src/components/domain/matching/buttons/SuccessButton.tsx b/src/components/domain/matching/buttons/SuccessButton.tsx
new file mode 100644
index 0000000..6e5081e
--- /dev/null
+++ b/src/components/domain/matching/buttons/SuccessButton.tsx
@@ -0,0 +1,15 @@
+import { Button } from '@/components/base';
+import React from 'react';
+
+function SuccessButton() {
+  const handleClick = () => {
+    console.log('asd');
+  };
+  return (
+    <Button onClick={handleClick} size="medium" variant={'kakao'}>
+      <strong>카카오페이</strong>로 간편하고 안전하게 결제
+    </Button>
+  );
+}
+
+export default SuccessButton;

From 94270c0e4285a0a48a1b3a984c700e9340ab84bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Wed, 29 Jun 2022 22:51:07 +0900
Subject: [PATCH 23/82] Feat: WaitingButton

---
 .../domain/matching/buttons/WaitingButton.tsx     | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 src/components/domain/matching/buttons/WaitingButton.tsx

diff --git a/src/components/domain/matching/buttons/WaitingButton.tsx b/src/components/domain/matching/buttons/WaitingButton.tsx
new file mode 100644
index 0000000..fa8eefe
--- /dev/null
+++ b/src/components/domain/matching/buttons/WaitingButton.tsx
@@ -0,0 +1,15 @@
+import { Button } from '@/components/base';
+import React from 'react';
+
+function WaitingButton() {
+  const handleClick = () => {
+    console.log('asd');
+  };
+  return (
+    <Button onClick={handleClick} size="medium" variant={'default'}>
+      랜덤매칭
+    </Button>
+  );
+}
+
+export default WaitingButton;

From 33933cca55c7506422144b6961b61d35e643c143 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Wed, 29 Jun 2022 22:51:30 +0900
Subject: [PATCH 24/82] =?UTF-8?q?Chore:=20=EB=A7=8C=EB=93=A4=EC=96=B4?=
 =?UTF-8?q?=EB=86=93=EC=9D=80=20=EB=B2=84=ED=8A=BC=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../domain/matching/MatchingTemplete.tsx      | 26 +++++++++++--------
 src/lib/styles/palette.ts                     |  1 +
 src/pages/MatchingPage.tsx                    |  4 +--
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/components/domain/matching/MatchingTemplete.tsx b/src/components/domain/matching/MatchingTemplete.tsx
index 7a59aae..e30b146 100644
--- a/src/components/domain/matching/MatchingTemplete.tsx
+++ b/src/components/domain/matching/MatchingTemplete.tsx
@@ -4,15 +4,19 @@ import { Button } from '@/components/base';
 import UserHeader from './UserHeader';
 import { useLocation } from 'react-router-dom';
 import { Title } from '@/lib/styles/styledComponents';
+import CompleteButton from './buttons/CompleteButton';
+import EndButton from './buttons/EndButton';
+import NoneButton from './buttons/NoneButton';
+import WaitingButton from './buttons/WaitingButton';
+import SuccessButton from './buttons/SuccessButton';
 
 interface MatchingTemplateProps {
   children: ReactNode;
   handleClick?: MouseEventHandler<HTMLButtonElement>;
-  IsDisable: boolean;
   title: ReactNode;
   btnName: string;
 }
-const MatchingTemplete = ({ children, handleClick, IsDisable, btnName, title }: MatchingTemplateProps) => {
+const MatchingTemplete = ({ children, handleClick, btnName, title }: MatchingTemplateProps) => {
   const location = useLocation();
   const [type, setType] = useState('meeting');
   useEffect(() => {
@@ -34,15 +38,15 @@ const MatchingTemplete = ({ children, handleClick, IsDisable, btnName, title }:
       <div>{children}</div>
       <NavigationWrapper>
         <ButtonWrapper>
-          <Button
-            onClick={handleClick}
-            size="medium"
-            disabled={IsDisable}
-            variant={IsDisable ? 'gray' : 'default'}
-            fontWeight={IsDisable ? 400 : 700}
-          >
-            {btnName}
-          </Button>
+          {
+            {
+              none: <NoneButton />,
+              waiting: <WaitingButton />,
+              success: <SuccessButton />,
+              pay: <CompleteButton />,
+              end: <EndButton />,
+            }[btnName]
+          }
         </ButtonWrapper>
       </NavigationWrapper>
     </TemplateBlock>
diff --git a/src/lib/styles/palette.ts b/src/lib/styles/palette.ts
index fa7ce29..8cef59a 100644
--- a/src/lib/styles/palette.ts
+++ b/src/lib/styles/palette.ts
@@ -6,6 +6,7 @@ export const palette = {
   gray: '#e4e5ed',
   grayDarker: '#6F6F6F',
   explanationColor: 'rgba(0, 0, 0, 0.6)',
+  disableColor: 'rgba(0, 0, 0, 0.2)',
   white: '#fff',
   black: '#000',
   warning: '#ff402b', // FIXME: 임시로 넣어둠
diff --git a/src/pages/MatchingPage.tsx b/src/pages/MatchingPage.tsx
index 547a10c..32486ed 100644
--- a/src/pages/MatchingPage.tsx
+++ b/src/pages/MatchingPage.tsx
@@ -9,10 +9,10 @@ import React from 'react';
 import styled from 'styled-components';
 
 const MatchingPage = () => {
-  const TempData = { state: 'end' };
+  const TempData = { state: 'pay' };
   return (
     <>
-      <MatchingTemplete IsDisable={false} btnName={'설문하러 가기'} title={MatchingStateTitle(TempData.state)}>
+      <MatchingTemplete btnName={TempData.state} title={MatchingStateTitle(TempData.state)}>
         <MatchingContents>
           {
             {

From 102a6392839cac855623dbf68ba98b0484753701 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Wed, 29 Jun 2022 22:57:41 +0900
Subject: [PATCH 25/82] =?UTF-8?q?Feat:=20=ED=97=A4=EB=8D=94=EC=97=90=20?=
 =?UTF-8?q?=EB=A9=94=EB=89=B4=20=EC=95=84=EC=9D=B4=EC=BD=98=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/assets/img/TripleLineMenu.png             | Bin 0 -> 152 bytes
 src/assets/img/index.ts                       |   1 +
 src/components/domain/matching/UserHeader.tsx |   4 ++++
 3 files changed, 5 insertions(+)
 create mode 100644 src/assets/img/TripleLineMenu.png

diff --git a/src/assets/img/TripleLineMenu.png b/src/assets/img/TripleLineMenu.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb37eed73f027f13e6218b12fa37259f078b45ec
GIT binary patch
literal 152
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL
zyA#8@b22Z19F}xPUq=Rpjs4tz5?O(KT~8OskP61PmlpCeFmNy*Z2McDBI5AKQ01?8
s*6O&XxpS@-?&Npg;Ox3%v69Ud$z)SO$*nh?fEpP*UHx3vIVCg!030SMiU0rr

literal 0
HcmV?d00001

diff --git a/src/assets/img/index.ts b/src/assets/img/index.ts
index 6cd7627..9a597c2 100644
--- a/src/assets/img/index.ts
+++ b/src/assets/img/index.ts
@@ -10,3 +10,4 @@ export { default as MatchingSuccess } from './MatchingSuccess.png';
 export { default as Waiting } from './Waiting.png';
 export { default as Complete } from './Complete.png';
 export { default as CopyIcon } from './CopyIcon.png';
+export { default as TripleLineMenu } from './TripleLineMenu.png';
diff --git a/src/components/domain/matching/UserHeader.tsx b/src/components/domain/matching/UserHeader.tsx
index 79397e5..e297eae 100644
--- a/src/components/domain/matching/UserHeader.tsx
+++ b/src/components/domain/matching/UserHeader.tsx
@@ -1,3 +1,4 @@
+import { TripleLineMenu } from '@/assets/img';
 import React from 'react';
 import styled from 'styled-components';
 import { HeaderWrapper, Logo } from '../survey/SurveyTemplate';
@@ -7,11 +8,14 @@ const UserHeader = () => {
     <HeaderLayout>
       <Logo to="/">외딴썸</Logo>
       {/* 유저 정보 불러오고 햄버거 매뉴 만들어야함! */}
+      <img src={TripleLineMenu} alt="메뉴 이미지" />
     </HeaderLayout>
   );
 };
 
 const HeaderLayout = styled(HeaderWrapper)`
+  display: flex;
+  justify-content: space-between;
   margin-bottom: 10px;
 `;
 

From 7604c2c1424b7d5f1f14874c38dad43810fb7253 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Wed, 29 Jun 2022 23:30:11 +0900
Subject: [PATCH 26/82] =?UTF-8?q?feat:=20MyBodySmoke=20=EC=84=B8=EC=85=98?=
 =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MyBodySmoke.tsx   | 37 ++++++++++++++++++-------------------
 src/types/constants/body.ts | 16 ++++++++++------
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/src/pages/MyBodySmoke.tsx b/src/pages/MyBodySmoke.tsx
index 9fb2bea..28d91bf 100644
--- a/src/pages/MyBodySmoke.tsx
+++ b/src/pages/MyBodySmoke.tsx
@@ -1,45 +1,44 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { ChooseFourBox, ChooseTwoBox, SurveyTemplate } from '@/components/domain/survey';
 import Path from '@/router/Path';
 import { useDatingNavigate } from '@/hooks/common/useNavigate';
-import { ChooseFourBoxItemProps } from '@/components/domain/survey/ChooseFourBox';
 import { SMOKE_ITEMS } from '@/types/constants/smoke';
 import { MYBODY_ITEMS } from '@/types/constants/body';
-
-const ids = MYBODY_ITEMS.map(({ id }) => id);
-type BodyOption = typeof ids[number];
-type SmokeOption = 'true' | 'false' | '';
+import { useDatingSessionState } from '@/hooks/common';
+import { type Body } from '@/types/dating';
 
 const MyBodySmoke = () => {
   const datingNavigate = useDatingNavigate();
-  const [disableNext, setDisableNext] = useState(true);
-
-  const [checkedOption, setCheckedOption] = useState<BodyOption | ''>('');
-  const [isSmoke, setIsSmoke] = useState<SmokeOption>('');
+  const { initDatingState, setDatingData } = useDatingSessionState();
+  const [myBody, setMyBody] = useState<Body | string>(initDatingState.myBody);
+  const [mySmoke, setMySmoke] = useState(initDatingState.mySmoke);
 
   const onChangeOption = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { id } = e.target;
-    setIsSmoke(id as SmokeOption);
+    setMySmoke(id === 'true' ? true : false);
   };
 
-  useEffect(() => {
-    if (checkedOption === '' || isSmoke === '') return;
-    setDisableNext(false);
-  }, [checkedOption, isSmoke]);
+  const handleNextClick = () => {
+    if (initDatingState) {
+      setDatingData({ ...initDatingState, myBody: myBody as Body, mySmoke });
+    }
+
+    datingNavigate(Path.MyDateCount);
+  };
 
   return (
     <SurveyTemplate
-      disableNext={disableNext}
+      disableNext={!myBody}
       hasProgressBar={true}
       totalStep={12}
       currStep={5}
       handlePrevClick={() => datingNavigate(Path.MyMbtiHeight)}
-      handleNextClick={() => datingNavigate(Path.MyDateCount)}
+      handleNextClick={handleNextClick}
     >
-      <ChooseFourBox items={MYBODY_ITEMS as unknown as ChooseFourBoxItemProps[]} checkedOption={checkedOption} setCheckedOption={setCheckedOption}>
+      <ChooseFourBox items={MYBODY_ITEMS} checkedOption={myBody} setCheckedOption={setMyBody}>
         본인의 체형을 선택해주세요
       </ChooseFourBox>
-      <ChooseTwoBox selectedOption={isSmoke} onChangeOption={onChangeOption} items={SMOKE_ITEMS}>
+      <ChooseTwoBox selectedOption={mySmoke ? 'true' : 'false'} onChangeOption={onChangeOption} items={SMOKE_ITEMS}>
         혹시 흡연자이신가요?
       </ChooseTwoBox>
     </SurveyTemplate>
diff --git a/src/types/constants/body.ts b/src/types/constants/body.ts
index 7d56398..8bf30d6 100644
--- a/src/types/constants/body.ts
+++ b/src/types/constants/body.ts
@@ -1,29 +1,33 @@
-export const MYBODY_ITEMS = [
+import { type Body } from '@/types/dating';
+
+export interface MYBODY_ITEM {
+  id: Body;
+  text: '마른 편' | '슬림 탄탄' | '근육' | '통통한';
+  name: 'myBody';
+}
+
+export const MYBODY_ITEMS: Readonly<MYBODY_ITEM>[] = [
   {
     id: 'SKINNY',
     text: '마른 편',
     name: 'myBody',
-    checked: false,
   },
   {
     id: 'SLIM',
     text: '슬림 탄탄',
     name: 'myBody',
-    checked: false,
   },
   {
     id: 'MUSCULAR',
     text: '근육',
     name: 'myBody',
-    checked: false,
   },
   {
     id: 'CHUBBY',
     text: '통통한',
     name: 'myBody',
-    checked: false,
   },
-] as const;
+];
 
 export const PREFER_BODY_ITEMS = [
   {

From 80feb609b3976fcf108d93d633659970ff3a497c Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Wed, 29 Jun 2022 23:46:05 +0900
Subject: [PATCH 27/82] =?UTF-8?q?feat:=20MyDateCount=20=EC=84=B8=EC=85=98?=
 =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MyDateCount.tsx     | 39 +++++++++++++++++------------------
 src/types/constants/dcount.ts | 16 ++++++++------
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/src/pages/MyDateCount.tsx b/src/pages/MyDateCount.tsx
index da7e089..8e71abc 100644
--- a/src/pages/MyDateCount.tsx
+++ b/src/pages/MyDateCount.tsx
@@ -1,45 +1,44 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useDatingNavigate } from '@/hooks/common/useNavigate';
 import { ChooseFourBox, ChooseTwoBox, SurveyTemplate } from '@/components/domain/survey';
 import Path from '@/router/Path';
-import { ChooseFourBoxItemProps } from '@/components/domain/survey/ChooseFourBox';
-import { SMOKEOK_ITEMS } from '@/types/constants/smoke';
 import { MY_DOUNT_ITEMS } from '@/types/constants/dcount';
-
-const ids = MY_DOUNT_ITEMS.map(({ id }) => id);
-type BodyOption = typeof ids[number];
-type SmokeOption = 'true' | 'false' | '';
+import { SMOKEOK_ITEMS } from '@/types/constants/smoke';
+import { useDatingSessionState } from '@/hooks/common';
+import { type DateCount } from '@/types/dating';
 
 const MyDateCount = () => {
   const datingNavigate = useDatingNavigate();
-  const [disableNext, setDisableNext] = useState(true);
-
-  const [checkedOption, setCheckedOption] = useState<BodyOption | ''>('');
-  const [isSmokeOk, setIsSmokeOk] = useState<SmokeOption>('');
+  const { initDatingState, setDatingData } = useDatingSessionState();
+  const [myDateCount, setMyDateCount] = useState<DateCount | string>(initDatingState.myDateCount);
+  const [isSmokeOk, setIsSmokeOk] = useState(initDatingState.isSmokeOk);
 
   const onChangeOption = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { id } = e.target;
-    setIsSmokeOk(id as SmokeOption);
+    setIsSmokeOk(id === 'true' ? true : false);
   };
 
-  useEffect(() => {
-    if (checkedOption === '' || isSmokeOk === '') return;
-    setDisableNext(false);
-  }, [checkedOption, isSmokeOk]);
+  const handleNextClick = () => {
+    if (initDatingState) {
+      setDatingData({ ...initDatingState, myDateCount: myDateCount as DateCount, isSmokeOk });
+    }
+
+    datingNavigate(Path.AvoidUniversitiesSurvey);
+  };
 
   return (
     <SurveyTemplate
-      disableNext={disableNext}
+      disableNext={!myDateCount}
       hasProgressBar={true}
       totalStep={12}
       currStep={6}
       handlePrevClick={() => datingNavigate(Path.MyBodySmoke)}
-      handleNextClick={() => datingNavigate(Path.AvoidUniversitiesSurvey)}
+      handleNextClick={handleNextClick}
     >
-      <ChooseFourBox items={MY_DOUNT_ITEMS as unknown as ChooseFourBoxItemProps[]} checkedOption={checkedOption} setCheckedOption={setCheckedOption}>
+      <ChooseFourBox items={MY_DOUNT_ITEMS} checkedOption={myDateCount} setCheckedOption={setMyDateCount}>
         본인의 연애 횟수를 선택해주세요.
       </ChooseFourBox>
-      <ChooseTwoBox selectedOption={isSmokeOk} onChangeOption={onChangeOption} items={SMOKEOK_ITEMS}>
+      <ChooseTwoBox selectedOption={isSmokeOk ? 'true' : 'false'} onChangeOption={onChangeOption} items={SMOKEOK_ITEMS}>
         상대가 흡연자여도 괜찮나요?
       </ChooseTwoBox>
     </SurveyTemplate>
diff --git a/src/types/constants/dcount.ts b/src/types/constants/dcount.ts
index 47df198..4b38e4f 100644
--- a/src/types/constants/dcount.ts
+++ b/src/types/constants/dcount.ts
@@ -1,29 +1,33 @@
-export const MY_DOUNT_ITEMS = [
+import { type DateCount } from '@/types/dating';
+
+export interface MY_DOUNT_ITEM {
+  id: DateCount;
+  text: '0회' | '1~2회' | '3~4회' | '5회 이상';
+  name: 'myDateCount';
+}
+
+export const MY_DOUNT_ITEMS: Readonly<MY_DOUNT_ITEM>[] = [
   {
     id: 'ZERO',
     text: '0회',
     name: 'myDateCount',
-    checked: false,
   },
   {
     id: 'ONETWO',
     text: '1~2회',
     name: 'myDateCount',
-    checked: false,
   },
   {
     id: 'THREEFOUR',
     text: '3~4회',
     name: 'myDateCount',
-    checked: false,
   },
   {
     id: 'FIVE',
     text: '5회 이상',
     name: 'myDateCount',
-    checked: false,
   },
-] as const;
+];
 
 export const PREFER_DCOUNT_ITEMS = [
   {

From d5d9b29ad955ddba400837ccb9c8ffc22b055eae Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Thu, 30 Jun 2022 00:00:07 +0900
Subject: [PATCH 28/82] =?UTF-8?q?feat:=20AvoidUniversitiesSurvey=20?=
 =?UTF-8?q?=EC=84=B8=EC=85=98=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/AvoidUniversitiesSurvey.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/pages/AvoidUniversitiesSurvey.tsx b/src/pages/AvoidUniversitiesSurvey.tsx
index 88c4a05..a51563e 100644
--- a/src/pages/AvoidUniversitiesSurvey.tsx
+++ b/src/pages/AvoidUniversitiesSurvey.tsx
@@ -7,17 +7,25 @@ import { schools } from '@/mock/schools';
 import styled from 'styled-components';
 import Path from '@/router/Path';
 import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useNavigate';
-import { useMeetingSessionState } from '@/hooks/common';
+import { useMeetingSessionState, useDatingSessionState } from '@/hooks/common';
 
 const AvoidUniversitiesSurvey = () => {
   const matchMeeting = useMatch('/meeting/*');
   const meetingNavigate = matchMeeting ? useMeetingNavigate() : useDatingNavigate();
   const { initMeetingState, setMeetingData } = useMeetingSessionState();
+  const { initDatingState, setDatingData } = useDatingSessionState();
   const [avoidUniversities, setAvoidUniversities] = useState<number[]>(initMeetingState.avoidUniversities);
+  const [avoidDatingUniversities, setAvoidDatingUniversities] = useState<number[]>(initDatingState.avoidUniversities);
+
+  const handlePrevClick = () => {
+    meetingNavigate(matchMeeting ? Path.OurDepartmentsAverageHeightSurvey : Path.MyDateCount);
+  };
 
   const handleNextClick = () => {
     if (initMeetingState) {
-      setMeetingData({ ...initMeetingState, avoidUniversities });
+      matchMeeting
+        ? setMeetingData({ ...initMeetingState, avoidUniversities })
+        : setDatingData({ ...initDatingState, avoidUniversities: avoidDatingUniversities });
     }
 
     meetingNavigate(Path.PreferUniversitiesSurvey);
@@ -29,7 +37,7 @@ const AvoidUniversitiesSurvey = () => {
       hasProgressBar={true}
       totalStep={matchMeeting ? 14 : 12}
       currStep={matchMeeting ? 5 : 7}
-      handlePrevClick={() => meetingNavigate(Path.OurDepartmentsAverageHeightSurvey)}
+      handlePrevClick={handlePrevClick}
       handleNextClick={handleNextClick}
     >
       <Title>
@@ -39,8 +47,8 @@ const AvoidUniversitiesSurvey = () => {
       <SearchSelector
         placeholder="학교를 검색하세요.(없을 시 ‘other’ 입력)"
         searchData={schools}
-        selectedResults={avoidUniversities}
-        setSelectedResults={setAvoidUniversities}
+        selectedResults={matchMeeting ? avoidUniversities : avoidDatingUniversities}
+        setSelectedResults={matchMeeting ? setAvoidUniversities : setAvoidDatingUniversities}
       />
       <Description>
         ※ 참여 인원이 부족할 경우 기피학교와

From 2e88910705909661acf983500b0d6fbecc414959 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Thu, 30 Jun 2022 00:24:27 +0900
Subject: [PATCH 29/82] =?UTF-8?q?Refactor:=20=ED=8C=8C=EC=9D=BC=20?=
 =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/domain/matching/MatchingTemplete.tsx       | 2 +-
 src/components/header/MenuBlock.tsx                       | 7 +++++++
 src/components/{domain/matching => header}/UserHeader.tsx | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 src/components/header/MenuBlock.tsx
 rename src/components/{domain/matching => header}/UserHeader.tsx (87%)

diff --git a/src/components/domain/matching/MatchingTemplete.tsx b/src/components/domain/matching/MatchingTemplete.tsx
index e30b146..0a29e68 100644
--- a/src/components/domain/matching/MatchingTemplete.tsx
+++ b/src/components/domain/matching/MatchingTemplete.tsx
@@ -1,7 +1,7 @@
 import React, { MouseEventHandler, ReactNode, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Button } from '@/components/base';
-import UserHeader from './UserHeader';
+import UserHeader from '../../header/UserHeader';
 import { useLocation } from 'react-router-dom';
 import { Title } from '@/lib/styles/styledComponents';
 import CompleteButton from './buttons/CompleteButton';
diff --git a/src/components/header/MenuBlock.tsx b/src/components/header/MenuBlock.tsx
new file mode 100644
index 0000000..6d23600
--- /dev/null
+++ b/src/components/header/MenuBlock.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+function MenuBlock() {
+  return <div>MenuBlock</div>;
+}
+
+export default MenuBlock;
diff --git a/src/components/domain/matching/UserHeader.tsx b/src/components/header/UserHeader.tsx
similarity index 87%
rename from src/components/domain/matching/UserHeader.tsx
rename to src/components/header/UserHeader.tsx
index e297eae..f024627 100644
--- a/src/components/domain/matching/UserHeader.tsx
+++ b/src/components/header/UserHeader.tsx
@@ -1,7 +1,7 @@
 import { TripleLineMenu } from '@/assets/img';
 import React from 'react';
 import styled from 'styled-components';
-import { HeaderWrapper, Logo } from '../survey/SurveyTemplate';
+import { HeaderWrapper, Logo } from '../domain/survey/SurveyTemplate';
 
 const UserHeader = () => {
   return (

From 4ab93dc0799516884dd0011059367fcfb9e6aa79 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Thu, 30 Jun 2022 00:48:48 +0900
Subject: [PATCH 30/82] =?UTF-8?q?feat:=20PreferUniversitiesSurvey=20?=
 =?UTF-8?q?=EC=84=B8=EC=85=98=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PreferUniversitiesSurvey.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/pages/PreferUniversitiesSurvey.tsx b/src/pages/PreferUniversitiesSurvey.tsx
index d7b051e..4604bf1 100644
--- a/src/pages/PreferUniversitiesSurvey.tsx
+++ b/src/pages/PreferUniversitiesSurvey.tsx
@@ -6,17 +6,25 @@ import SearchSelector from '@/components/domain/survey/SearchSelector';
 import { schools } from '@/mock/schools';
 import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useNavigate';
 import Path from '@/router/Path';
-import { useMeetingSessionState } from '@/hooks/common';
+import { useMeetingSessionState, useDatingSessionState } from '@/hooks/common';
 
 const PreferUniversitiesSurvey = () => {
   const matchMeeting = useMatch('/meeting/*');
   const meetingNavigate = matchMeeting ? useMeetingNavigate() : useDatingNavigate();
   const { initMeetingState, setMeetingData } = useMeetingSessionState();
+  const { initDatingState, setDatingData } = useDatingSessionState();
   const [preferUniversities, setPreferUniversities] = useState<number[]>(initMeetingState.preferUniversities);
+  const [preferDatingUniversities, setPreferDatingUniversities] = useState<number[]>(initDatingState.avoidUniversities);
+
+  const handlePrevClick = () => {
+    meetingNavigate(Path.AvoidUniversitiesSurvey);
+  };
 
   const handleNextClick = () => {
     if (initMeetingState) {
-      setMeetingData({ ...initMeetingState, preferUniversities });
+      matchMeeting
+        ? setMeetingData({ ...initMeetingState, preferUniversities })
+        : setDatingData({ ...initDatingState, preferUniversities: preferDatingUniversities });
     }
 
     meetingNavigate(Path.PreferAgeHeightSurvey);
@@ -28,7 +36,7 @@ const PreferUniversitiesSurvey = () => {
       hasProgressBar={true}
       totalStep={matchMeeting ? 14 : 12}
       currStep={matchMeeting ? 6 : 8}
-      handlePrevClick={() => meetingNavigate(Path.AvoidUniversitiesSurvey)}
+      handlePrevClick={handlePrevClick}
       handleNextClick={handleNextClick}
     >
       <Title>
@@ -38,8 +46,8 @@ const PreferUniversitiesSurvey = () => {
       <SearchSelector
         placeholder="학교를 검색하세요.(없을 시 ‘other’ 입력)"
         searchData={schools}
-        selectedResults={preferUniversities}
-        setSelectedResults={setPreferUniversities}
+        selectedResults={matchMeeting ? preferUniversities : preferDatingUniversities}
+        setSelectedResults={matchMeeting ? setPreferUniversities : setPreferDatingUniversities}
       />
     </SurveyTemplate>
   );

From 5cf289d91ed06342293d662bc16465be12cc60aa Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Thu, 30 Jun 2022 01:01:42 +0900
Subject: [PATCH 31/82] =?UTF-8?q?feat:=20meeting=20prev,=20next=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/pages/MindsetSurvey.tsx                | 2 +-
 src/pages/PreferAverageAgeHeightSurvey.tsx | 4 ++--
 src/pages/PreferDepartmentsSurvey.tsx      | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/MindsetSurvey.tsx b/src/pages/MindsetSurvey.tsx
index 3ad5880..9fdb79a 100644
--- a/src/pages/MindsetSurvey.tsx
+++ b/src/pages/MindsetSurvey.tsx
@@ -32,7 +32,7 @@ const MindsetSurvey = () => {
       disableNext={!checkedOption}
       currStep={9}
       totalStep={14}
-      handlePrevClick={() => meetingNavigate(Path.PreferAgeHeightSurvey)}
+      handlePrevClick={() => meetingNavigate(Path.PreferDepartmentsSurvey)}
       handleNextClick={handleNextClick}
     >
       <Title>
diff --git a/src/pages/PreferAverageAgeHeightSurvey.tsx b/src/pages/PreferAverageAgeHeightSurvey.tsx
index 7497d0f..3c6ff02 100644
--- a/src/pages/PreferAverageAgeHeightSurvey.tsx
+++ b/src/pages/PreferAverageAgeHeightSurvey.tsx
@@ -21,14 +21,14 @@ const PreferAverageAgeHeightSurvey = () => {
       setMeetingData({ ...initMeetingState, preferAge: multiAgeOption, preferHeight: multiHeightOption });
     }
 
-    meetingNavigate(matchMeeting ? Path.MindsetSurvey : Path.PreferDepartmentCharacterSurvey);
+    meetingNavigate(matchMeeting ? Path.PreferDepartmentsSurvey : Path.PreferDepartmentCharacterSurvey);
   };
 
   return (
     <SurveyTemplate
       disableNext={!multiAgeOption || !multiHeightOption}
       totalStep={matchMeeting ? 14 : 12}
-      currStep={matchMeeting ? 8 : 9}
+      currStep={matchMeeting ? 7 : 9}
       handlePrevClick={() => meetingNavigate(Path.PreferUniversitiesSurvey)}
       handleNextClick={handleNextClick}
     >
diff --git a/src/pages/PreferDepartmentsSurvey.tsx b/src/pages/PreferDepartmentsSurvey.tsx
index 1c871b9..a03b8d4 100644
--- a/src/pages/PreferDepartmentsSurvey.tsx
+++ b/src/pages/PreferDepartmentsSurvey.tsx
@@ -14,10 +14,10 @@ const PreferDepartmentsSurvey = () => {
   return (
     <SurveyTemplate
       disableNext={!checkedMultiOption}
-      currStep={7}
+      currStep={8}
       totalStep={14}
-      handlePrevClick={() => meetingNavigate(Path.PreferUniversitiesSurvey)}
-      handleNextClick={() => meetingNavigate(Path.PreferAgeHeightSurvey)}
+      handlePrevClick={() => meetingNavigate(Path.PreferAgeHeightSurvey)}
+      handleNextClick={() => meetingNavigate(Path.MindsetSurvey)}
     >
       <Title>
         <strong>

From aa449f7202f3f298b1887afae7ab880164265d1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Thu, 30 Jun 2022 02:47:54 +0900
Subject: [PATCH 32/82] =?UTF-8?q?Feat:=20=EC=9B=B9=20=EB=B0=B0=EA=B2=BD=20?=
 =?UTF-8?q?=EC=83=89=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/styles/palette.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/styles/palette.ts b/src/lib/styles/palette.ts
index 8cef59a..042b6c8 100644
--- a/src/lib/styles/palette.ts
+++ b/src/lib/styles/palette.ts
@@ -11,4 +11,5 @@ export const palette = {
   black: '#000',
   warning: '#ff402b', // FIXME: 임시로 넣어둠
   kakao: '#FEE500',
+  backgroundColor: '#F5F6F7',
 } as const;

From c9e01bb519cdc910ff6b5bdfd2dc9832a75c791b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Thu, 30 Jun 2022 02:48:45 +0900
Subject: [PATCH 33/82] =?UTF-8?q?Refactor:=20UserHeader=20roiting=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/domain/matching/MatchingTemplete.tsx | 4 +---
 src/router/Routing.tsx                              | 9 ++++++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/domain/matching/MatchingTemplete.tsx b/src/components/domain/matching/MatchingTemplete.tsx
index 0a29e68..bff6adb 100644
--- a/src/components/domain/matching/MatchingTemplete.tsx
+++ b/src/components/domain/matching/MatchingTemplete.tsx
@@ -1,7 +1,6 @@
 import React, { MouseEventHandler, ReactNode, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Button } from '@/components/base';
-import UserHeader from '../../header/UserHeader';
 import { useLocation } from 'react-router-dom';
 import { Title } from '@/lib/styles/styledComponents';
 import CompleteButton from './buttons/CompleteButton';
@@ -25,7 +24,6 @@ const MatchingTemplete = ({ children, handleClick, btnName, title }: MatchingTem
 
   return (
     <TemplateBlock>
-      <UserHeader />
       <Title>{title}</Title>
       <ButtonWrapper>
         <TypeButton onClick={handleClick} size="medium" variant={type === 'meeting' ? 'default' : 'gray'} fontWeight={type === 'dating' ? 700 : 400}>
@@ -55,7 +53,7 @@ const MatchingTemplete = ({ children, handleClick, btnName, title }: MatchingTem
 
 const TemplateBlock = styled.section`
   position: relative;
-  height: 100%;
+  height: calc(100% - 56px);
   margin: 0 8px;
 `;
 
diff --git a/src/router/Routing.tsx b/src/router/Routing.tsx
index b70dc77..f624f8a 100644
--- a/src/router/Routing.tsx
+++ b/src/router/Routing.tsx
@@ -33,6 +33,8 @@ import {
   MatchingPage,
 } from '@/pages';
 import Test from '@/components/base/Test';
+import UserHeader from '@/components/header/UserHeader';
+import { palette } from '@/lib/styles/palette';
 
 function Routing() {
   return (
@@ -80,7 +82,7 @@ function Routing() {
               <Route path={Path.AgreementSurvey} element={<AgreementSurvey />} />
               <Route path={Path.KakaoIdSurvey} element={<KakaoIdSurvey />} />
             </Route>
-            <Route path={'/matching'} element={<Outlet />}>
+            <Route path={'/matching'} element={<UserHeader />}>
               <Route path={Path.MatchingMeeting} element={<MatchingPage />} />
             </Route>
             <Route path="*" element={<NotFound />} />
@@ -91,11 +93,12 @@ function Routing() {
   );
 }
 const PageLayout = styled.div`
-  margin: 0 auto;
-  max-width: 344px;
+  background-color: ${palette.backgroundColor};
   height: 100%;
 `;
 const PageWrapper = styled.main`
+  margin: 0 auto;
+  max-width: 344px;
   height: 100%;
 `;
 

From 45243d0338a71a8b586cb7463eacf2f81d3cddf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Thu, 30 Jun 2022 02:49:05 +0900
Subject: [PATCH 34/82] Feat: Menublock

---
 src/components/header/MenuBlock.tsx  | 40 ++++++++++++++++++++++++++--
 src/components/header/UserHeader.tsx | 17 ++++++++----
 2 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/src/components/header/MenuBlock.tsx b/src/components/header/MenuBlock.tsx
index 6d23600..6462c4c 100644
--- a/src/components/header/MenuBlock.tsx
+++ b/src/components/header/MenuBlock.tsx
@@ -1,7 +1,43 @@
+import { palette } from '@/lib/styles/palette';
 import React from 'react';
+import styled from 'styled-components';
 
-function MenuBlock() {
-  return <div>MenuBlock</div>;
+interface MenuBlockProps {
+  isMenu: boolean;
+  onToggleMenu: () => void;
 }
+function MenuBlock({ isMenu, onToggleMenu }: MenuBlockProps) {
+  return (
+    <>
+      <NavBarBlock isMenu={isMenu}>asdasd</NavBarBlock>
+      <NavBackground onClick={onToggleMenu} isMenu={isMenu} />
+    </>
+  );
+}
+
+const NavBackground = styled.div<{ isMenu: boolean }>`
+  width: 100%;
+  height: 100vh;
+  background-color: black;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 800;
+  opacity: 0.5;
+  ${({ isMenu }) => (isMenu ? 'display: block' : 'display: none')}
+`;
 
+const NavBarBlock = styled.div<{ isMenu: boolean }>`
+  width: 100%;
+  max-width: 300px;
+  position: fixed;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  background: ${palette.primary};
+  z-index: 9000;
+  ${({ isMenu }) => (isMenu ? 'visibility: visible' : 'visibility : hidden')};
+  transition: all 0.2s ease-in-out;
+  transform: translateX(${({ isMenu }) => (isMenu ? 'calc(100vw - 300px)' : '100vw')});
+`;
 export default MenuBlock;
diff --git a/src/components/header/UserHeader.tsx b/src/components/header/UserHeader.tsx
index f024627..64d4479 100644
--- a/src/components/header/UserHeader.tsx
+++ b/src/components/header/UserHeader.tsx
@@ -1,15 +1,22 @@
 import { TripleLineMenu } from '@/assets/img';
+import { useToggle } from '@/hooks/common';
 import React from 'react';
+import { Outlet } from 'react-router-dom';
 import styled from 'styled-components';
 import { HeaderWrapper, Logo } from '../domain/survey/SurveyTemplate';
+import MenuBlock from './MenuBlock';
 
 const UserHeader = () => {
+  const [isMenu, onToggleMenu] = useToggle();
   return (
-    <HeaderLayout>
-      <Logo to="/">외딴썸</Logo>
-      {/* 유저 정보 불러오고 햄버거 매뉴 만들어야함! */}
-      <img src={TripleLineMenu} alt="메뉴 이미지" />
-    </HeaderLayout>
+    <>
+      <HeaderLayout>
+        <Logo to="/">외딴썸</Logo>
+        <img src={TripleLineMenu} alt="메뉴 이미지" onClick={onToggleMenu} />
+      </HeaderLayout>
+      <MenuBlock isMenu={isMenu} onToggleMenu={onToggleMenu} />
+      <Outlet />
+    </>
   );
 };
 

From 59f7c9ec8d08496f812cc7d2ab5cd111424ac835 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Thu, 30 Jun 2022 15:11:47 +0900
Subject: [PATCH 35/82] Feat: pallette graydark

---
 src/lib/styles/palette.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/styles/palette.ts b/src/lib/styles/palette.ts
index 042b6c8..10b3be1 100644
--- a/src/lib/styles/palette.ts
+++ b/src/lib/styles/palette.ts
@@ -4,6 +4,7 @@ export const palette = {
   grayLight: '#E8E8E8',
   grayLightHover: '#E3E3E3',
   gray: '#e4e5ed',
+  grayDark: '#888888',
   grayDarker: '#6F6F6F',
   explanationColor: 'rgba(0, 0, 0, 0.6)',
   disableColor: 'rgba(0, 0, 0, 0.2)',

From 6d70b63405399f869e5ec0c5585a6eb2e97fd206 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Thu, 30 Jun 2022 15:12:21 +0900
Subject: [PATCH 36/82] Design: sidebar header

---
 src/components/header/MenuBlock.tsx | 41 ++++++++++++++++++++++++++---
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/components/header/MenuBlock.tsx b/src/components/header/MenuBlock.tsx
index 6462c4c..758a2c7 100644
--- a/src/components/header/MenuBlock.tsx
+++ b/src/components/header/MenuBlock.tsx
@@ -1,3 +1,4 @@
+import { Logo } from '@/assets/img';
 import { palette } from '@/lib/styles/palette';
 import React from 'react';
 import styled from 'styled-components';
@@ -6,10 +7,21 @@ interface MenuBlockProps {
   isMenu: boolean;
   onToggleMenu: () => void;
 }
+const TempUserData = {
+  email: 'coffee123@naver.com',
+};
 function MenuBlock({ isMenu, onToggleMenu }: MenuBlockProps) {
   return (
     <>
-      <NavBarBlock isMenu={isMenu}>asdasd</NavBarBlock>
+      <NavBarBlock isMenu={isMenu}>
+        <SidebarHeader>
+          <SiteLogo src={Logo} alt="사이트 로고" />
+          <UserBox>
+            <div>{TempUserData.email}</div>
+            <div className="univ">Boston University</div>
+          </UserBox>
+        </SidebarHeader>
+      </NavBarBlock>
       <NavBackground onClick={onToggleMenu} isMenu={isMenu} />
     </>
   );
@@ -27,17 +39,40 @@ const NavBackground = styled.div<{ isMenu: boolean }>`
   ${({ isMenu }) => (isMenu ? 'display: block' : 'display: none')}
 `;
 
-const NavBarBlock = styled.div<{ isMenu: boolean }>`
+const NavBarBlock = styled.section<{ isMenu: boolean }>`
   width: 100%;
   max-width: 300px;
   position: fixed;
   height: 100vh;
   top: 0;
   left: 0;
-  background: ${palette.primary};
+  background: ${palette.white};
   z-index: 9000;
+  padding: 16px;
   ${({ isMenu }) => (isMenu ? 'visibility: visible' : 'visibility : hidden')};
   transition: all 0.2s ease-in-out;
   transform: translateX(${({ isMenu }) => (isMenu ? 'calc(100vw - 300px)' : '100vw')});
 `;
+const SidebarHeader = styled.header`
+  display: flex;
+  margin-bottom: 20px;
+`;
+
+const SiteLogo = styled.img`
+  width: 45px;
+  border-radius: 100%;
+  padding-right: 6px;
+`;
+const UserBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-left: 4px;
+  font-weight: 700;
+  .univ {
+    font-size: 14px;
+    font-weight: 400;
+    color: ${palette.grayDark};
+  }
+`;
 export default MenuBlock;

From 3533f2748b6eb29cba681eba86c882dc049cd28c Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Thu, 30 Jun 2022 21:32:44 +0900
Subject: [PATCH 37/82] =?UTF-8?q?feat:=20=EC=86=8C=EA=B0=9C=ED=8C=85=20?=
 =?UTF-8?q?=EA=B8=B0=ED=94=BC,=20=EC=84=A0=ED=98=B8=ED=95=99=EA=B5=90=20?=
 =?UTF-8?q?=EC=84=B8=EC=85=98=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/AvoidUniversitiesSurvey.tsx  | 4 ++--
 src/pages/PreferUniversitiesSurvey.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/AvoidUniversitiesSurvey.tsx b/src/pages/AvoidUniversitiesSurvey.tsx
index a51563e..e18142e 100644
--- a/src/pages/AvoidUniversitiesSurvey.tsx
+++ b/src/pages/AvoidUniversitiesSurvey.tsx
@@ -14,8 +14,8 @@ const AvoidUniversitiesSurvey = () => {
   const meetingNavigate = matchMeeting ? useMeetingNavigate() : useDatingNavigate();
   const { initMeetingState, setMeetingData } = useMeetingSessionState();
   const { initDatingState, setDatingData } = useDatingSessionState();
-  const [avoidUniversities, setAvoidUniversities] = useState<number[]>(initMeetingState.avoidUniversities);
-  const [avoidDatingUniversities, setAvoidDatingUniversities] = useState<number[]>(initDatingState.avoidUniversities);
+  const [avoidUniversities, setAvoidUniversities] = useState(initMeetingState.avoidUniversities);
+  const [avoidDatingUniversities, setAvoidDatingUniversities] = useState(initDatingState.avoidUniversities);
 
   const handlePrevClick = () => {
     meetingNavigate(matchMeeting ? Path.OurDepartmentsAverageHeightSurvey : Path.MyDateCount);
diff --git a/src/pages/PreferUniversitiesSurvey.tsx b/src/pages/PreferUniversitiesSurvey.tsx
index 4604bf1..059dd2e 100644
--- a/src/pages/PreferUniversitiesSurvey.tsx
+++ b/src/pages/PreferUniversitiesSurvey.tsx
@@ -14,7 +14,7 @@ const PreferUniversitiesSurvey = () => {
   const { initMeetingState, setMeetingData } = useMeetingSessionState();
   const { initDatingState, setDatingData } = useDatingSessionState();
   const [preferUniversities, setPreferUniversities] = useState<number[]>(initMeetingState.preferUniversities);
-  const [preferDatingUniversities, setPreferDatingUniversities] = useState<number[]>(initDatingState.avoidUniversities);
+  const [preferDatingUniversities, setPreferDatingUniversities] = useState<number[]>(initDatingState.preferUniversities);
 
   const handlePrevClick = () => {
     meetingNavigate(Path.AvoidUniversitiesSurvey);

From 287f23ce3723613ccdd84c07020ec64c966b0fb2 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Thu, 30 Jun 2022 21:33:22 +0900
Subject: [PATCH 38/82] =?UTF-8?q?feat:=20=EB=82=B4=20=ED=95=99=EA=B3=BC&?=
 =?UTF-8?q?=EC=84=B1=EA=B2=A9=20=EC=84=B8=EC=85=98=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MyDepartmentCharacter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/MyDepartmentCharacter.tsx b/src/pages/MyDepartmentCharacter.tsx
index 2428d02..3b0af9a 100644
--- a/src/pages/MyDepartmentCharacter.tsx
+++ b/src/pages/MyDepartmentCharacter.tsx
@@ -3,7 +3,7 @@ import { SurveyTemplate } from '@/components/domain/survey';
 import { Title } from '@/lib/styles/styledComponents';
 import { ChooseFourBox } from '@/components/domain/survey';
 import { MY_DEPARTMENT_ITEMS } from '@/types/constants/department';
-import { CHARACTER_ITEMS } from '@/types/constants/charater';
+import { CHARACTER_ITEMS } from '@/types/constants/characteristic';
 import Path from '@/router/Path';
 import { useDatingNavigate } from '@/hooks/common/useNavigate';
 import { useDatingSessionState } from '@/hooks/common';

From fc0ba4f2cbefe12a2931b08751a20046b33e3757 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Thu, 30 Jun 2022 21:33:42 +0900
Subject: [PATCH 39/82] =?UTF-8?q?refactor:=20=EC=95=88=EC=93=B0=EB=8A=94?=
 =?UTF-8?q?=20=ED=83=80=EC=9E=85=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/OurDepartmentsAverageHeightSurvey.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/pages/OurDepartmentsAverageHeightSurvey.tsx b/src/pages/OurDepartmentsAverageHeightSurvey.tsx
index 71e6ad5..e661a3a 100644
--- a/src/pages/OurDepartmentsAverageHeightSurvey.tsx
+++ b/src/pages/OurDepartmentsAverageHeightSurvey.tsx
@@ -9,10 +9,6 @@ import { useMeetingNavigate } from '@/hooks/common/useNavigate';
 import { useMeetingSessionState } from '@/hooks/common';
 import { type Departments } from '@/types/meeting';
 
-export interface ChooseFourDepartmentProps extends ChooseFourBoxItemProps {
-  id: Departments;
-}
-
 const OurDepartmentsAverageHeightSurvey = () => {
   const meetingNavigate = useMeetingNavigate();
   const { initMeetingState, setMeetingData } = useMeetingSessionState();

From 5d5acc647128ddb9e2d0cbfa41ef750ed05d9af9 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Thu, 30 Jun 2022 21:34:03 +0900
Subject: [PATCH 40/82] =?UTF-8?q?feat:=20=EC=84=A0=ED=98=B8=20=ED=95=99?=
 =?UTF-8?q?=EA=B3=BC=20&=20=EC=84=B1=EA=B2=A9=20=EC=84=B8=EC=85=98=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PreferDepartmentCharacterSurvey.tsx | 59 +++++++++++++++----
 1 file changed, 48 insertions(+), 11 deletions(-)

diff --git a/src/pages/PreferDepartmentCharacterSurvey.tsx b/src/pages/PreferDepartmentCharacterSurvey.tsx
index 0362702..c7239c9 100644
--- a/src/pages/PreferDepartmentCharacterSurvey.tsx
+++ b/src/pages/PreferDepartmentCharacterSurvey.tsx
@@ -1,28 +1,65 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { ChooseFourBox, SurveyTemplate } from '@/components/domain/survey';
 import { ChooseFourBoxItemProps } from '@/components/domain/survey/ChooseFourBox';
 import { useDatingNavigate } from '@/hooks/common/useNavigate';
 import Path from '@/router/Path';
-import { PREFER_DEPARTMENT_ITEMS } from '@/types/constants/department';
-import { PREFER_CHARACTER_ITEMS } from '@/types/constants/charater';
+import { PREFER_DEPARTMENT_ITEMS, DEPARTMENT_ITEM } from '@/types/constants/department';
+import { PREFER_CHARACTER_ITEMS, CHARACTER_ITEM } from '@/types/constants/characteristic';
+import { useDatingSessionState } from '@/hooks/common';
+import { type Departments } from '@/types/meeting';
+import { type Characteristic } from '@/types/dating';
 
 const PreferDepartmentCharacterSurvey = () => {
   const datingNavigate = useDatingNavigate();
-  const [checkedMultiOption, setMultiCheckedOption] = useState<ChooseFourBoxItemProps[]>(PREFER_DEPARTMENT_ITEMS);
-  const [checkedMultiOption2, setMultiCheckedOption2] = useState<ChooseFourBoxItemProps[]>(PREFER_CHARACTER_ITEMS);
+  const { initDatingState, setDatingData } = useDatingSessionState();
+
+  // @Desc: string[] 값을 받아와서 기존 constants에 checked 속성을 끼워넣기
+  const getInitItems = (items: DEPARTMENT_ITEM[] | CHARACTER_ITEM[], isDepartments: boolean) =>
+    items.map((item) =>
+      isDepartments
+        ? { ...item, checked: initDatingState.preferDepartments.some((initState) => initState === item.id) }
+        : { ...item, checked: initDatingState.preferCharacteristics.some((initState) => initState === item.id) },
+    );
+  const initDepartments = getInitItems(PREFER_DEPARTMENT_ITEMS, true) as DEPARTMENT_ITEM[];
+  const initCharacteristics = getInitItems(PREFER_CHARACTER_ITEMS, false) as CHARACTER_ITEM[];
+  const [preferDepartments, setPreferDepartments] = useState<ChooseFourBoxItemProps[]>(initDepartments);
+  const [preferCharacteristics, setPreferCharacteristics] = useState<ChooseFourBoxItemProps[]>(initCharacteristics);
+
+  // @Desc: 기존 constants에 checked 속성의 아이템 리스트들을 string[] 형태로 바꿔주기
+  const savedPreferDepartments = preferDepartments.reduce<Departments[]>((prev, cur) => {
+    if (cur.checked) {
+      prev.push(cur.id as Departments);
+    }
+    return prev;
+  }, []);
+  const savedPreferCharacteristics = preferCharacteristics.reduce<Characteristic[]>((prev, cur) => {
+    if (cur.checked) {
+      prev.push(cur.id as Characteristic);
+    }
+    return prev;
+  }, []);
+
+  const handleNextClick = () => {
+    if (initDatingState) {
+      setDatingData({ ...initDatingState, preferDepartments: savedPreferDepartments, preferCharacteristics: savedPreferCharacteristics });
+    }
+
+    datingNavigate(Path.PreferBodyDateCountSurvey);
+  };
+
   return (
     <SurveyTemplate
-      disableNext={!checkedMultiOption || !checkedMultiOption2}
+      disableNext={!preferDepartments || !preferCharacteristics}
       currStep={9}
       totalStep={11}
-      handleNextClick={() => datingNavigate(Path.PreferBodyDateCountSurvey)}
       handlePrevClick={() => datingNavigate(Path.PreferAgeHeightSurvey)}
+      handleNextClick={handleNextClick}
     >
       <ChooseFourBox
         isMulti
         items={PREFER_DEPARTMENT_ITEMS}
-        checkedMultiOption={checkedMultiOption}
-        setMultiCheckedOption={setMultiCheckedOption}
+        checkedMultiOption={preferDepartments}
+        setMultiCheckedOption={setPreferDepartments}
         top={31}
       >
         선호하는 학과를 모두 알려주세요.
@@ -30,8 +67,8 @@ const PreferDepartmentCharacterSurvey = () => {
       <ChooseFourBox
         isMulti
         items={PREFER_DEPARTMENT_ITEMS}
-        checkedMultiOption={checkedMultiOption2}
-        setMultiCheckedOption={setMultiCheckedOption2}
+        checkedMultiOption={preferCharacteristics}
+        setMultiCheckedOption={setPreferCharacteristics}
         top={31}
       >
         선호하는 성격을 모두 알려주세요.

From a49521982b1bdab37932f4bda19e1b076d2a38b5 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Thu, 30 Jun 2022 21:34:31 +0900
Subject: [PATCH 41/82] =?UTF-8?q?feat:=20constants=20=EB=B3=B4=EC=99=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/constants/characteristic.ts | 54 +++++++++++++++++++++++++++
 src/types/constants/charater.ts       | 49 ------------------------
 src/types/constants/department.ts     | 23 ++++++------
 3 files changed, 65 insertions(+), 61 deletions(-)
 create mode 100644 src/types/constants/characteristic.ts
 delete mode 100644 src/types/constants/charater.ts

diff --git a/src/types/constants/characteristic.ts b/src/types/constants/characteristic.ts
new file mode 100644
index 0000000..1152427
--- /dev/null
+++ b/src/types/constants/characteristic.ts
@@ -0,0 +1,54 @@
+import { type Characteristic } from '@/types/dating';
+
+export interface CHARACTER_ITEM {
+  id: Characteristic;
+  text: '많이 조용한' | '조금 조용한' | '조금 활발한' | '많이 활발한';
+  name: 'characteristic' | 'preferCharacteristics';
+  checked?: boolean;
+}
+
+export const CHARACTER_ITEMS: Readonly<CHARACTER_ITEM>[] = [
+  {
+    id: 'VERY_QUIET',
+    text: '많이 조용한',
+    name: 'characteristic',
+  },
+  {
+    id: 'A_LITTLE_QUIET',
+    text: '조금 조용한',
+    name: 'characteristic',
+  },
+  {
+    id: 'VERY_ACTIVE',
+    text: '조금 활발한',
+    name: 'characteristic',
+  },
+  {
+    id: 'A_LITTLE_ACTIVE',
+    text: '많이 활발한',
+    name: 'characteristic',
+  },
+];
+
+export const PREFER_CHARACTER_ITEMS: Readonly<CHARACTER_ITEM>[] = [
+  {
+    id: 'VERY_QUIET',
+    text: '많이 조용한',
+    name: 'preferCharacteristics',
+  },
+  {
+    id: 'A_LITTLE_QUIET',
+    text: '조금 조용한',
+    name: 'preferCharacteristics',
+  },
+  {
+    id: 'A_LITTLE_ACTIVE',
+    text: '조금 활발한',
+    name: 'preferCharacteristics',
+  },
+  {
+    id: 'VERY_ACTIVE',
+    text: '많이 활발한',
+    name: 'preferCharacteristics',
+  },
+];
diff --git a/src/types/constants/charater.ts b/src/types/constants/charater.ts
deleted file mode 100644
index d7e5955..0000000
--- a/src/types/constants/charater.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-export const CHARACTER_ITEMS = [
-  {
-    id: 'VERY_QUIET',
-    text: '많이 조용한',
-    name: 'character',
-  },
-  {
-    id: 'A_LITTLE_QUIET',
-    text: '조금 조용한',
-    name: 'character',
-  },
-  {
-    id: 'VERY_ACTIVE',
-    text: '조금 활발한',
-    name: 'character',
-  },
-  {
-    id: 'A_LITTLE_ACTIVE',
-    text: '많이 활발한',
-    name: 'character',
-  },
-];
-
-export const PREFER_CHARACTER_ITEMS = [
-  {
-    id: 'VERY_QUIET',
-    text: '많이 조용한',
-    name: 'preferCharacters',
-    checked: true,
-  },
-  {
-    id: 'A_LITTLE_QUIET',
-    text: '조금 조용한',
-    name: 'preferCharacters',
-    checked: true,
-  },
-  {
-    id: 'A_LITTLE_ACTIVE',
-    text: '조금 활발한',
-    name: 'preferCharacters',
-    checked: false,
-  },
-  {
-    id: 'VERY_ACTIVE',
-    text: '많이 활발한',
-    name: 'preferCharacters',
-    checked: false,
-  },
-];
diff --git a/src/types/constants/department.ts b/src/types/constants/department.ts
index 3a92b59..ff59613 100644
--- a/src/types/constants/department.ts
+++ b/src/types/constants/department.ts
@@ -1,6 +1,13 @@
-import { ChooseFourDepartmentProps } from '@/pages/OurDepartmentsAverageHeightSurvey';
+import { type Departments } from '@/types/meeting';
 
-export const MY_DEPARTMENT_ITEMS = [
+export interface DEPARTMENT_ITEM {
+  id: Departments;
+  text: '문과' | '이과' | '체육' | '예술';
+  name: 'myDepartment' | 'ourDepartments' | 'preferDepartments';
+  checked?: boolean;
+}
+
+export const MY_DEPARTMENT_ITEMS: Readonly<DEPARTMENT_ITEM>[] = [
   {
     id: 'LIBERAL',
     text: '문과',
@@ -23,56 +30,48 @@ export const MY_DEPARTMENT_ITEMS = [
   },
 ];
 
-export const OUR_DEPARTMENT_ITEMS: ChooseFourDepartmentProps[] = [
+export const OUR_DEPARTMENT_ITEMS: Readonly<DEPARTMENT_ITEM>[] = [
   {
     id: 'LIBERAL',
     text: '문과',
     name: 'ourDepartments',
-    checked: true,
   },
   {
     id: 'SCIENCE',
     text: '이과',
     name: 'ourDepartments',
-    checked: true,
   },
   {
     id: 'ATHLETIC',
     text: '체육',
     name: 'ourDepartments',
-    checked: false,
   },
   {
     id: 'ART',
     text: '예술',
     name: 'ourDepartments',
-    checked: false,
   },
 ];
 
-export const PREFER_DEPARTMENT_ITEMS = [
+export const PREFER_DEPARTMENT_ITEMS: Readonly<DEPARTMENT_ITEM>[] = [
   {
     id: 'LIBERAL',
     text: '문과',
     name: 'preferDepartments',
-    checked: true,
   },
   {
     id: 'SCIENCE',
     text: '이과',
     name: 'preferDepartments',
-    checked: true,
   },
   {
     id: 'ATHLETIC',
     text: '체육',
     name: 'preferDepartments',
-    checked: false,
   },
   {
     id: 'ART',
     text: '예술',
     name: 'preferDepartments',
-    checked: false,
   },
 ];

From 0029f6d812891bde3679e58590c0c7d51b26de53 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Thu, 30 Jun 2022 21:54:45 +0900
Subject: [PATCH 42/82] =?UTF-8?q?feat:=20=EC=84=A0=ED=98=B8=20=EC=B2=B4?=
 =?UTF-8?q?=ED=98=95=20&=20=EC=97=B0=EC=95=A0=ED=9A=9F=EC=88=98=20?=
 =?UTF-8?q?=EC=84=B8=EC=85=98=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PreferBodyDateCountSurvey.tsx | 41 ++++++++++++++++++++-----
 src/types/constants/body.ts             |  5 +--
 src/types/constants/dcount.ts           |  1 +
 3 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/src/pages/PreferBodyDateCountSurvey.tsx b/src/pages/PreferBodyDateCountSurvey.tsx
index 71ecb09..59d5f7c 100644
--- a/src/pages/PreferBodyDateCountSurvey.tsx
+++ b/src/pages/PreferBodyDateCountSurvey.tsx
@@ -1,27 +1,52 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { ChooseFourBox, SurveyTemplate } from '@/components/domain/survey';
 import { ChooseFourBoxItemProps } from '@/components/domain/survey/ChooseFourBox';
 import { useDatingNavigate } from '@/hooks/common/useNavigate';
 import Path from '@/router/Path';
-import { PREFER_DCOUNT_ITEMS } from '@/types/constants/dcount';
 import { PREFER_BODY_ITEMS } from '@/types/constants/body';
+import { PREFER_DCOUNT_ITEMS } from '@/types/constants/dcount';
+import { useDatingSessionState } from '@/hooks/common';
+import { type DateCount, type Body } from '@/types/dating';
 
 const PreferBodyDateCountSurvey = () => {
   const datingNavigate = useDatingNavigate();
-  const [checkedMultiOption, setMultiCheckedOption] = useState<ChooseFourBoxItemProps[]>(PREFER_BODY_ITEMS);
-  const [checkedCharacterOption, setCharacterCheckedOption] = useState('');
+  const { initDatingState, setDatingData } = useDatingSessionState();
+  const [preferDateCount, setPreferDateCount] = useState<DateCount | string>(initDatingState.preferDateCount);
+
+  // @Desc: string[] 값을 받아와서 기존 constants에 checked 속성을 끼워넣기
+  const getInitPreferBodies = PREFER_BODY_ITEMS.map((item) => {
+    return { ...item, checked: initDatingState.preferBodies.some((initState) => initState === item.id) };
+  });
+  const initBodies = useMemo(() => getInitPreferBodies, [PREFER_BODY_ITEMS, initDatingState.preferBodies]);
+  const [preferBodies, setPreferBodies] = useState<ChooseFourBoxItemProps[]>(initBodies);
+  // @Desc: 기존 constants에 checked 속성의 아이템 리스트들을 string[] 형태로 바꿔주기
+  const savedPreferBodies = preferBodies.reduce<Body[]>((prev, cur) => {
+    if (cur.checked) {
+      prev.push(cur.id as Body);
+    }
+    return prev;
+  }, []);
+
+  const handleNextClick = () => {
+    if (initDatingState) {
+      setDatingData({ ...initDatingState, preferBodies: savedPreferBodies, preferDateCount: preferDateCount as DateCount });
+    }
+
+    datingNavigate(Path.IsAbroadSurvey);
+  };
+
   return (
     <SurveyTemplate
-      disableNext={!checkedMultiOption && !checkedCharacterOption}
+      disableNext={!preferBodies && !preferDateCount}
       currStep={10}
       totalStep={11}
       handlePrevClick={() => datingNavigate(Path.PreferDepartmentCharacterSurvey)}
-      handleNextClick={() => datingNavigate(Path.IsAbroadSurvey)}
+      handleNextClick={handleNextClick}
     >
-      <ChooseFourBox isMulti items={PREFER_BODY_ITEMS} checkedMultiOption={checkedMultiOption} setMultiCheckedOption={setMultiCheckedOption} top={31}>
+      <ChooseFourBox isMulti items={PREFER_BODY_ITEMS} checkedMultiOption={preferBodies} setMultiCheckedOption={setPreferBodies} top={31}>
         선호하는 체형을 모두 선택해주세요.
       </ChooseFourBox>
-      <ChooseFourBox items={PREFER_DCOUNT_ITEMS} checkedOption={checkedCharacterOption} setCheckedOption={setCharacterCheckedOption} top={45}>
+      <ChooseFourBox items={PREFER_DCOUNT_ITEMS} checkedOption={preferDateCount} setCheckedOption={setPreferDateCount} top={45}>
         선호하는 상대방의 연애 횟수를 선택해주세요.
       </ChooseFourBox>
     </SurveyTemplate>
diff --git a/src/types/constants/body.ts b/src/types/constants/body.ts
index 8bf30d6..61015e8 100644
--- a/src/types/constants/body.ts
+++ b/src/types/constants/body.ts
@@ -4,6 +4,7 @@ export interface MYBODY_ITEM {
   id: Body;
   text: '마른 편' | '슬림 탄탄' | '근육' | '통통한';
   name: 'myBody';
+  checked?: boolean;
 }
 
 export const MYBODY_ITEMS: Readonly<MYBODY_ITEM>[] = [
@@ -34,24 +35,20 @@ export const PREFER_BODY_ITEMS = [
     id: 'SKINNY',
     text: '마른 편',
     name: 'preferBodies',
-    checked: false,
   },
   {
     id: 'SLIM',
     text: '슬림 탄탄',
     name: 'preferBodies',
-    checked: false,
   },
   {
     id: 'MUSCULAR',
     text: '근육',
     name: 'preferBodies',
-    checked: false,
   },
   {
     id: 'CHUBBY',
     text: '통통한',
     name: 'preferBodies',
-    checked: false,
   },
 ];
diff --git a/src/types/constants/dcount.ts b/src/types/constants/dcount.ts
index 4b38e4f..b614de8 100644
--- a/src/types/constants/dcount.ts
+++ b/src/types/constants/dcount.ts
@@ -4,6 +4,7 @@ export interface MY_DOUNT_ITEM {
   id: DateCount;
   text: '0회' | '1~2회' | '3~4회' | '5회 이상';
   name: 'myDateCount';
+  checked?: boolean;
 }
 
 export const MY_DOUNT_ITEMS: Readonly<MY_DOUNT_ITEM>[] = [

From c059907edbf83da77cce90a8dd992c95aa9c0221 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Thu, 30 Jun 2022 21:55:03 +0900
Subject: [PATCH 43/82] =?UTF-8?q?refactor:=20=EC=A7=9C=EC=9E=98=ED=95=9C?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/OurDepartmentsAverageHeightSurvey.tsx | 2 +-
 src/pages/PreferDepartmentCharacterSurvey.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/OurDepartmentsAverageHeightSurvey.tsx b/src/pages/OurDepartmentsAverageHeightSurvey.tsx
index e661a3a..bdbab31 100644
--- a/src/pages/OurDepartmentsAverageHeightSurvey.tsx
+++ b/src/pages/OurDepartmentsAverageHeightSurvey.tsx
@@ -15,7 +15,7 @@ const OurDepartmentsAverageHeightSurvey = () => {
   const getInitDepartments = OUR_DEPARTMENT_ITEMS.map((item) => {
     return { ...item, checked: initMeetingState.ourDepartments.some((initState) => initState === item.id) };
   });
-  const initDepartments = useMemo(() => getInitDepartments, [OUR_DEPARTMENT_ITEMS, initMeetingState]);
+  const initDepartments = useMemo(() => getInitDepartments, [OUR_DEPARTMENT_ITEMS, initMeetingState.ourDepartments]);
   const [checkedMultiOption, setMultiCheckedOption] = useState<ChooseFourBoxItemProps[]>(initDepartments);
   const getOurDepartments = checkedMultiOption.reduce<Departments[]>((prev, cur) => {
     if (cur.checked) {
diff --git a/src/pages/PreferDepartmentCharacterSurvey.tsx b/src/pages/PreferDepartmentCharacterSurvey.tsx
index c7239c9..7596ff1 100644
--- a/src/pages/PreferDepartmentCharacterSurvey.tsx
+++ b/src/pages/PreferDepartmentCharacterSurvey.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState } from 'react';
 import { ChooseFourBox, SurveyTemplate } from '@/components/domain/survey';
 import { ChooseFourBoxItemProps } from '@/components/domain/survey/ChooseFourBox';
 import { useDatingNavigate } from '@/hooks/common/useNavigate';

From 8127eb5c96d051fa3aa835cc3a4afec657ad01c8 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Thu, 30 Jun 2022 22:43:26 +0900
Subject: [PATCH 44/82] =?UTF-8?q?feat:=20=EC=86=8C=EA=B0=9C=ED=8C=85=20?=
 =?UTF-8?q?=EB=8F=84=EB=A9=94=EC=8A=A4=ED=8B=B1=20=EC=84=B8=EC=85=98=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/DomesticAreasSurvey.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/pages/DomesticAreasSurvey.tsx b/src/pages/DomesticAreasSurvey.tsx
index 1c6f6d1..417dec8 100644
--- a/src/pages/DomesticAreasSurvey.tsx
+++ b/src/pages/DomesticAreasSurvey.tsx
@@ -6,13 +6,16 @@ import { DOMESTICAREAS_ITEMS } from '@/types/constants/area';
 import styled from 'styled-components';
 import { FormWrapper } from './AuthMail';
 import Path from '@/router/Path';
-import { useMeetingNavigate } from '@/hooks/common/useNavigate';
-import { useMeetingSessionState } from '@/hooks/common';
+import { useMeetingNavigate, useDatingNavigate } from '@/hooks/common/useNavigate';
+import { useMeetingSessionState, useDatingSessionState } from '@/hooks/common';
 import { type DomesticAreas } from '@/types/meeting';
+import { useMatch } from 'react-router-dom';
 
 const DomesticAreasSurvey = () => {
-  const meetingNavigate = useMeetingNavigate();
+  const matchMeeting = useMatch('/meeting/*');
+  const meetingNavigate = matchMeeting ? useMeetingNavigate() : useDatingNavigate();
   const { initMeetingState, setMeetingData } = useMeetingSessionState();
+  const { initDatingState, setDatingData } = useDatingSessionState();
   const getInitDomesticAreas = DOMESTICAREAS_ITEMS.map((item) => {
     return { ...item, checked: initMeetingState.domesticAreas.some((initState) => initState === item.id) };
   });
@@ -29,7 +32,9 @@ const DomesticAreasSurvey = () => {
 
   const handleNextClick = () => {
     if (initMeetingState) {
-      setMeetingData({ ...initMeetingState, domesticAreas: domesticAreas ?? [] });
+      matchMeeting
+        ? setMeetingData({ ...initMeetingState, domesticAreas: domesticAreas ?? [] })
+        : setDatingData({ ...initDatingState, domesticAreas: domesticAreas ?? [] });
     }
 
     meetingNavigate(Path.ChannelSurvey);
@@ -38,8 +43,8 @@ const DomesticAreasSurvey = () => {
   return (
     <SurveyTemplate
       disableNext={!isChecked}
-      currStep={12}
-      totalStep={14}
+      currStep={matchMeeting ? 12 : 13}
+      totalStep={matchMeeting ? 14 : 16}
       handlePrevClick={() => meetingNavigate(Path.IsAbroadSurvey)}
       handleNextClick={handleNextClick}
     >

From b55700eb765ca4e695c2068ac069de48fe7baf1e Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Thu, 30 Jun 2022 22:43:47 +0900
Subject: [PATCH 45/82] =?UTF-8?q?IsAboard=20=EC=84=A4=EB=AC=B8=20=EC=86=8C?=
 =?UTF-8?q?=EA=B0=9C=ED=8C=85=20=EC=84=B8=EC=85=98=20=EC=A0=81=EC=9A=A9,?=
 =?UTF-8?q?=20path=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/IsAbroadSurvey.tsx | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/pages/IsAbroadSurvey.tsx b/src/pages/IsAbroadSurvey.tsx
index 0f9cde4..dda8e4e 100644
--- a/src/pages/IsAbroadSurvey.tsx
+++ b/src/pages/IsAbroadSurvey.tsx
@@ -1,40 +1,51 @@
 /* eslint-disable react/no-children-prop */
+import React, { useState, useMemo } from 'react';
 import { ChooseTwoBox, SurveyTemplate } from '@/components/domain/survey';
 import { Title } from '@/lib/styles/styledComponents';
-import React, { useState } from 'react';
 import styled from 'styled-components';
 import { FormWrapper } from './AuthMail';
-import { useMeetingNavigate } from '@/hooks/common/useNavigate';
+import { useMeetingNavigate, useDatingNavigate } from '@/hooks/common/useNavigate';
 import Path from '@/router/Path';
 import { COUNTRY_ITEMS } from '@/types/constants/area';
-import { useMeetingSessionState } from '@/hooks/common';
+import { useMeetingSessionState, useDatingSessionState } from '@/hooks/common';
+import { useMatch } from 'react-router-dom';
 import { type Location } from '@/types/meeting';
 
 const IsAbroadSurvey = () => {
-  const meetingNavigate = useMeetingNavigate();
+  const matchMeeting = useMatch('/meeting/*');
+  const meetingNavigate = matchMeeting ? useMeetingNavigate() : useDatingNavigate();
   const { initMeetingState, setMeetingData } = useMeetingSessionState();
+  const { initDatingState, setDatingData } = useDatingSessionState();
   const [isAbroad, setIsAbroad] = useState<Location>(initMeetingState.isAbroad ? 'ABROAD' : 'DOMESTIC');
+  const [isAbroadDating, setIsAbroadDating] = useState<Location>(initDatingState.isAbroad ? 'ABROAD' : 'DOMESTIC');
+  const ISABOARD = matchMeeting ? isAbroad : isAbroadDating;
 
   const onChangeOption = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { id } = e.target;
-    setIsAbroad(id as Location);
+    matchMeeting ? setIsAbroad(id as Location) : setIsAbroadDating(id as Location);
+  };
+
+  const handlePrevClick = () => {
+    meetingNavigate(matchMeeting ? Path.PlaySurvey : Path.PreferBodyDateCountSurvey);
   };
 
   const handleNextClick = () => {
     if (initMeetingState) {
-      setMeetingData({ ...initMeetingState, isAbroad: isAbroad === 'ABROAD' ? true : false });
+      matchMeeting
+        ? setMeetingData({ ...initMeetingState, isAbroad: isAbroad === 'ABROAD' ? true : false })
+        : setDatingData({ ...initDatingState, isAbroad: isAbroadDating === 'ABROAD' ? true : false });
     }
 
-    meetingNavigate(isAbroad === 'ABROAD' ? Path.AbroadAreasSurvey : Path.DomesticAreasSurvey);
+    meetingNavigate(ISABOARD === 'ABROAD' ? Path.AbroadAreasSurvey : Path.DomesticAreasSurvey);
   };
 
   return (
     <SurveyTemplate
       disableNext={false}
       hasProgressBar={true}
-      currStep={11}
-      totalStep={14}
-      handlePrevClick={() => meetingNavigate(Path.PlaySurvey)}
+      currStep={matchMeeting ? 11 : 12}
+      totalStep={matchMeeting ? 14 : 16}
+      handlePrevClick={handlePrevClick}
       handleNextClick={handleNextClick}
     >
       <Title>
@@ -42,7 +53,7 @@ const IsAbroadSurvey = () => {
         해외이신가요?
       </Title>
       <BtnWrapper>
-        <ChooseTwoBox height={100} items={COUNTRY_ITEMS} selectedOption={isAbroad} onChangeOption={onChangeOption} />
+        <ChooseTwoBox height={100} items={COUNTRY_ITEMS} selectedOption={matchMeeting ? isAbroad : isAbroadDating} onChangeOption={onChangeOption} />
       </BtnWrapper>
     </SurveyTemplate>
   );

From f99ab76bdad0a79e608d6fc305b1cfecdf161da4 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Thu, 30 Jun 2022 22:52:29 +0900
Subject: [PATCH 46/82] =?UTF-8?q?feat:=20=EC=86=8C=EA=B0=9C=ED=8C=85=20abr?=
 =?UTF-8?q?oad-area=20=EC=84=B8=EC=85=98,=20path=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/AbroadAreasSurvey.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/pages/AbroadAreasSurvey.tsx b/src/pages/AbroadAreasSurvey.tsx
index 47428ee..360f2bc 100644
--- a/src/pages/AbroadAreasSurvey.tsx
+++ b/src/pages/AbroadAreasSurvey.tsx
@@ -6,17 +6,19 @@ import Path from '@/router/Path';
 import { Title } from '@/lib/styles/styledComponents';
 import SearchSelector from '@/components/domain/survey/SearchSelector';
 import { schools } from '@/mock/schools';
-import { useMeetingSessionState } from '@/hooks/common';
+import { useMeetingSessionState, useDatingSessionState } from '@/hooks/common';
 
 const AbroadAreasSurvey = () => {
   const matchMeeting = useMatch('/meeting/*');
   const meetingNavigate = matchMeeting ? useMeetingNavigate() : useDatingNavigate();
   const { initMeetingState, setMeetingData } = useMeetingSessionState();
+  const { initDatingState, setDatingData } = useDatingSessionState();
   const [abroadAreas, setAbroadAreas] = useState<number[]>(initMeetingState.abroadAreas);
+  const [abroadAreasDating, setAbroadAreasDating] = useState<number[]>(initDatingState.abroadAreas);
 
   const handleNextClick = () => {
     if (initMeetingState) {
-      setMeetingData({ ...initMeetingState, abroadAreas });
+      matchMeeting ? setMeetingData({ ...initMeetingState, abroadAreas }) : setDatingData({ ...initDatingState, abroadAreas: abroadAreasDating });
     }
 
     meetingNavigate(Path.ChannelSurvey);
@@ -26,8 +28,8 @@ const AbroadAreasSurvey = () => {
     <SurveyTemplate
       disableNext={false}
       hasProgressBar={true}
-      totalStep={matchMeeting ? 14 : 12}
-      currStep={matchMeeting ? 12 : 7}
+      currStep={matchMeeting ? 12 : 13}
+      totalStep={matchMeeting ? 14 : 16}
       handlePrevClick={() => meetingNavigate(Path.IsAbroadSurvey)}
       handleNextClick={handleNextClick}
     >
@@ -35,7 +37,12 @@ const AbroadAreasSurvey = () => {
         <strong>미팅이 가능한 지역(도시)</strong>을<br />
         모두 알려주세요.
       </Title>
-      <SearchSelector placeholder="지역을 검색하세요." searchData={schools} selectedResults={abroadAreas} setSelectedResults={setAbroadAreas} />
+      <SearchSelector
+        placeholder="지역을 검색하세요."
+        searchData={schools}
+        selectedResults={matchMeeting ? abroadAreas : abroadAreasDating}
+        setSelectedResults={matchMeeting ? setAbroadAreas : setAbroadAreasDating}
+      />
     </SurveyTemplate>
   );
 };

From 205ea7852bca159955cc2447ca70b77b2cd60c2c Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Thu, 30 Jun 2022 23:04:00 +0900
Subject: [PATCH 47/82] =?UTF-8?q?feat:=20channel=20=EC=84=B8=EC=85=98,=20p?=
 =?UTF-8?q?ath=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/agreement/useChannelCheck.ts |  4 ++--
 src/pages/ChannelSurvey.tsx            | 33 +++++++++++++++++---------
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/hooks/agreement/useChannelCheck.ts b/src/hooks/agreement/useChannelCheck.ts
index 3ccddcc..255ad3c 100644
--- a/src/hooks/agreement/useChannelCheck.ts
+++ b/src/hooks/agreement/useChannelCheck.ts
@@ -1,7 +1,7 @@
 import { useState, useMemo } from 'react';
 import { type Channel } from '@/types/meeting';
 
-const useChannelCheck = (isMulti: boolean) => {
+const useChannelCheck = (isMulti: boolean, initData: Channel) => {
   const [channelMultiCheckList, setChannelMultiCheckList] = useState<{ text: string; name: Channel; checked: boolean }[]>([
     { text: '페이스북', name: 'FACEBOOK', checked: false },
     { text: '인스타그램', name: 'INSTAGRAM', checked: false },
@@ -11,7 +11,7 @@ const useChannelCheck = (isMulti: boolean) => {
     { text: '기타 커뮤니티', name: 'COMMUNITY', checked: false },
   ]);
 
-  const [channelCheck, setChannelCheck] = useState<Channel>('FACEBOOK');
+  const [channelCheck, setChannelCheck] = useState<Channel>(initData);
 
   if (isMulti) {
     const onChangeMultiCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/src/pages/ChannelSurvey.tsx b/src/pages/ChannelSurvey.tsx
index 8365211..6acd3dc 100644
--- a/src/pages/ChannelSurvey.tsx
+++ b/src/pages/ChannelSurvey.tsx
@@ -3,21 +3,32 @@ import { CheckBox } from '@/components/base';
 import { FormWrapper } from './AuthMail';
 import useChannelCheck from '@/hooks/agreement/useChannelCheck';
 import { SurveyTemplate } from '@/components/domain/survey';
-import { useMeetingNavigate } from '@/hooks/common/useNavigate';
 import Path from '@/router/Path';
-import { useMeetingSessionState } from '@/hooks/common';
+import { useMatch } from 'react-router-dom';
+import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useNavigate';
+import { useMeetingSessionState, useDatingSessionState } from '@/hooks/common';
 import { CHANNEL_ITEMS } from '@/types/constants/channel';
+import { Channel } from '@/types/meeting';
 
 const ChannelSurvey = () => {
-  const meetingNavigate = useMeetingNavigate();
+  const matchMeeting = useMatch('/meeting/*');
+  const meetingNavigate = matchMeeting ? useMeetingNavigate() : useDatingNavigate();
   const { initMeetingState, setMeetingData } = useMeetingSessionState();
-  const { channelCheck: channel, onChangeCheck, isChecked } = useChannelCheck(false);
+  const { initDatingState, setDatingData } = useDatingSessionState();
+  const { channelCheck: channel, onChangeCheck, isChecked } = useChannelCheck(false, initMeetingState.channel);
+  const {
+    channelCheck: channelDating,
+    onChangeCheck: onChangeCheckDating,
+    isChecked: isCheckedDating,
+  } = useChannelCheck(false, initDatingState.channel);
+
+  const isSameChannel = (name: string) => (matchMeeting ? name === channel : name === channelDating);
 
   const handleNextClick = () => {
     if (!channel) return;
 
     if (initMeetingState) {
-      setMeetingData({ ...initMeetingState, channel });
+      matchMeeting ? setMeetingData({ ...initMeetingState, channel }) : setDatingData({ ...initDatingState, channel: channelDating as Channel });
     }
 
     meetingNavigate(Path.AgreementSurvey);
@@ -25,10 +36,10 @@ const ChannelSurvey = () => {
 
   return (
     <SurveyTemplate
-      disableNext={!isChecked}
+      disableNext={matchMeeting ? !isChecked : !isCheckedDating}
       hasProgressBar={true}
-      currStep={13}
-      totalStep={14}
+      currStep={matchMeeting ? 13 : 14}
+      totalStep={matchMeeting ? 14 : 16}
       handlePrevClick={() => meetingNavigate(Path.IsAbroadSurvey)}
       handleNextClick={handleNextClick}
     >
@@ -42,10 +53,10 @@ const ChannelSurvey = () => {
             isMulti={false}
             key={text}
             text={text}
-            checked={name === channel}
-            onChange={onChangeCheck}
+            checked={isSameChannel(name)}
+            onChange={matchMeeting ? onChangeCheck : onChangeCheckDating}
             name={name}
-            impotrant={name === channel ? true : false}
+            impotrant={isSameChannel(name) ? true : false}
           />
         ))}
       </FormWrapper>

From eebcc9dd827ecd8343aa0dff16ac5b8f80040d29 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Thu, 30 Jun 2022 23:11:21 +0900
Subject: [PATCH 48/82] =?UTF-8?q?feat:=20agreement=20=EC=84=A4=EB=AC=B8=20?=
 =?UTF-8?q?=EC=86=8C=EA=B0=9C=ED=8C=85=20=EC=84=B8=EC=85=98=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/AgreementSurvey.tsx | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/pages/AgreementSurvey.tsx b/src/pages/AgreementSurvey.tsx
index bac14a8..006f3ef 100644
--- a/src/pages/AgreementSurvey.tsx
+++ b/src/pages/AgreementSurvey.tsx
@@ -6,18 +6,34 @@ import { Title } from '@/lib/styles/styledComponents';
 import React from 'react';
 import styled from 'styled-components';
 import { FormWrapper } from './AuthMail';
-import { useMeetingNavigate } from '@/hooks/common/useNavigate';
 import Path from '@/router/Path';
+import { useMatch } from 'react-router-dom';
+import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useNavigate';
+import { useMeetingSessionState, useDatingSessionState } from '@/hooks/common';
 
 const AgreementSurvey = () => {
-  const meetingNavigate = useMeetingNavigate();
+  const matchMeeting = useMatch('/meeting/*');
+  const meetingNavigate = matchMeeting ? useMeetingNavigate() : useDatingNavigate();
+  const { initMeetingState, setMeetingData } = useMeetingSessionState();
+  const { initDatingState, setDatingData } = useDatingSessionState();
   const { checkedList, checkedChoiceList, onChangeCheck, onChangeChoiceCheck, onCheckAll, isEssentialChecked, isAllchecked } = useAgreementCheck();
+
+  const handleNextClick = () => {
+    if (initMeetingState) {
+      matchMeeting
+        ? setMeetingData({ ...initMeetingState, agreement: isAllchecked })
+        : setDatingData({ ...initDatingState, agreement: isAllchecked });
+    }
+
+    meetingNavigate(Path.KakaoIdSurvey);
+  };
+
   return (
     <SurveyTemplate
       disableNext={!isEssentialChecked}
       hasProgressBar={false}
       handlePrevClick={() => meetingNavigate(Path.ChannelSurvey)}
-      handleNextClick={() => meetingNavigate(Path.KakaoIdSurvey)}
+      handleNextClick={handleNextClick}
     >
       <Title>
         약관동의를 <br />

From 689d3c0db2e0eb087898628a899b55d93278a2b5 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Thu, 30 Jun 2022 23:15:48 +0900
Subject: [PATCH 49/82] =?UTF-8?q?feat:=20kakaoId=20=EC=84=A4=EB=AC=B8=20?=
 =?UTF-8?q?=EC=86=8C=EA=B0=9C=ED=8C=85=20=EC=84=B8=EC=85=98=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/KakaoIdSurvey.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/pages/KakaoIdSurvey.tsx b/src/pages/KakaoIdSurvey.tsx
index e8e6936..43b6a9d 100644
--- a/src/pages/KakaoIdSurvey.tsx
+++ b/src/pages/KakaoIdSurvey.tsx
@@ -7,20 +7,23 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import { FormWrapper } from './AuthMail';
 import Path from '@/router/Path';
-import { useMeetingNavigate } from '@/hooks/common/useNavigate';
-import { useMeetingSessionState } from '@/hooks/common';
+import { useMatch } from 'react-router-dom';
+import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useNavigate';
+import { useMeetingSessionState, useDatingSessionState } from '@/hooks/common';
 
 const KakaoIdSurvey = () => {
-  const meetingNavigate = useMeetingNavigate();
-  const [isModal, onToggleModal] = useToggle();
-  const [kakaoId, setkakaoId] = useState('');
+  const matchMeeting = useMatch('/meeting/*');
+  const meetingNavigate = matchMeeting ? useMeetingNavigate() : useDatingNavigate();
   const { initMeetingState, setMeetingData } = useMeetingSessionState();
+  const { initDatingState, setDatingData } = useDatingSessionState();
+  const [isModal, onToggleModal] = useToggle();
+  const [kakaoId, setkakaoId] = useState(matchMeeting ? initMeetingState.kakaoId : initDatingState.kakaoId);
   const [isConfirm, setConfirm] = useState(false);
 
   const handleNextClick = () => {
     alert('설문이 완료되었습니다. 정식 출시가 되면 매칭을 시작할 수 있습니다. 조금만 기다려 주세요.');
     if (initMeetingState) {
-      setMeetingData({ ...initMeetingState, kakaoId });
+      matchMeeting ? setMeetingData({ ...initMeetingState, kakaoId }) : setDatingData({ ...initDatingState, kakaoId });
     }
   };
 

From 5221459c957f4dbce1b66385cc471eba3864a4b3 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Thu, 30 Jun 2022 23:16:10 +0900
Subject: [PATCH 50/82] =?UTF-8?q?refactor:=20dating=20abroadAreas=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/dating.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/types/dating.ts b/src/types/dating.ts
index 18c8e9a..d410d50 100644
--- a/src/types/dating.ts
+++ b/src/types/dating.ts
@@ -25,7 +25,7 @@ export interface Dating {
   preferDateCount: DateCount;
   isAbroad: boolean;
   domesticAreas: DomesticAreas[];
-  abroadAreas: string[];
+  abroadAreas: number[];
   channel: Channel;
   agreement: boolean;
   kakaoId: string;

From f0cffc326b3010682e909662eb10919b09b5d3be Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Thu, 30 Jun 2022 23:16:52 +0900
Subject: [PATCH 51/82] =?UTF-8?q?feat:=20=EC=86=8C=EA=B0=9C=ED=8C=85=20pat?=
 =?UTF-8?q?h=20=EC=84=A4=EC=A0=95,=20(=EC=B6=94=ED=9B=84=20=EB=B0=94?=
 =?UTF-8?q?=EA=BF=94=EC=95=BC=20=ED=95=A8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/AvoidUniversitiesSurvey.tsx         | 2 +-
 src/pages/MyBodySmoke.tsx                     | 2 +-
 src/pages/MyDateCount.tsx                     | 2 +-
 src/pages/MyDepartmentCharacter.tsx           | 2 +-
 src/pages/MyGenderAge.tsx                     | 2 +-
 src/pages/MyMbtiHeight.tsx                    | 2 +-
 src/pages/PreferAverageAgeHeightSurvey.tsx    | 2 +-
 src/pages/PreferBodyDateCountSurvey.tsx       | 4 ++--
 src/pages/PreferDepartmentCharacterSurvey.tsx | 4 ++--
 src/pages/PreferUniversitiesSurvey.tsx        | 2 +-
 10 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/pages/AvoidUniversitiesSurvey.tsx b/src/pages/AvoidUniversitiesSurvey.tsx
index e18142e..4485114 100644
--- a/src/pages/AvoidUniversitiesSurvey.tsx
+++ b/src/pages/AvoidUniversitiesSurvey.tsx
@@ -35,7 +35,7 @@ const AvoidUniversitiesSurvey = () => {
     <SurveyTemplate
       disableNext={false}
       hasProgressBar={true}
-      totalStep={matchMeeting ? 14 : 12}
+      totalStep={matchMeeting ? 14 : 16}
       currStep={matchMeeting ? 5 : 7}
       handlePrevClick={handlePrevClick}
       handleNextClick={handleNextClick}
diff --git a/src/pages/MyBodySmoke.tsx b/src/pages/MyBodySmoke.tsx
index 28d91bf..6d3e941 100644
--- a/src/pages/MyBodySmoke.tsx
+++ b/src/pages/MyBodySmoke.tsx
@@ -30,7 +30,7 @@ const MyBodySmoke = () => {
     <SurveyTemplate
       disableNext={!myBody}
       hasProgressBar={true}
-      totalStep={12}
+      totalStep={16}
       currStep={5}
       handlePrevClick={() => datingNavigate(Path.MyMbtiHeight)}
       handleNextClick={handleNextClick}
diff --git a/src/pages/MyDateCount.tsx b/src/pages/MyDateCount.tsx
index 8e71abc..8223760 100644
--- a/src/pages/MyDateCount.tsx
+++ b/src/pages/MyDateCount.tsx
@@ -30,7 +30,7 @@ const MyDateCount = () => {
     <SurveyTemplate
       disableNext={!myDateCount}
       hasProgressBar={true}
-      totalStep={12}
+      totalStep={16}
       currStep={6}
       handlePrevClick={() => datingNavigate(Path.MyBodySmoke)}
       handleNextClick={handleNextClick}
diff --git a/src/pages/MyDepartmentCharacter.tsx b/src/pages/MyDepartmentCharacter.tsx
index 3b0af9a..9d13dd5 100644
--- a/src/pages/MyDepartmentCharacter.tsx
+++ b/src/pages/MyDepartmentCharacter.tsx
@@ -28,7 +28,7 @@ const MyDepartmentCharacter = () => {
     <SurveyTemplate
       disableNext={!myDepartment && !characteristic}
       currStep={3}
-      totalStep={12}
+      totalStep={16}
       handlePrevClick={() => datingNavigate(Path.MyGenderAge)}
       handleNextClick={handleNextClick}
     >
diff --git a/src/pages/MyGenderAge.tsx b/src/pages/MyGenderAge.tsx
index 4abe11c..5be26ba 100644
--- a/src/pages/MyGenderAge.tsx
+++ b/src/pages/MyGenderAge.tsx
@@ -33,7 +33,7 @@ const MyGenderAge = () => {
     <SurveyTemplate
       disableNext={!age && !gender}
       currStep={2}
-      totalStep={12}
+      totalStep={16}
       handlePrevClick={() => navigate(Path.TypeOfMeetingSurvey)}
       handleNextClick={handleNextClick}
     >
diff --git a/src/pages/MyMbtiHeight.tsx b/src/pages/MyMbtiHeight.tsx
index 15d3d87..776c9c7 100644
--- a/src/pages/MyMbtiHeight.tsx
+++ b/src/pages/MyMbtiHeight.tsx
@@ -37,7 +37,7 @@ const MyMbtiHeight = () => {
     <SurveyTemplate
       disableNext={!mbti || myHeight <= 0}
       currStep={4}
-      totalStep={12}
+      totalStep={16}
       handlePrevClick={() => datingNavigate(Path.MyDepartmentCharacter)}
       handleNextClick={handleNextClick}
     >
diff --git a/src/pages/PreferAverageAgeHeightSurvey.tsx b/src/pages/PreferAverageAgeHeightSurvey.tsx
index 3c6ff02..f920030 100644
--- a/src/pages/PreferAverageAgeHeightSurvey.tsx
+++ b/src/pages/PreferAverageAgeHeightSurvey.tsx
@@ -27,7 +27,7 @@ const PreferAverageAgeHeightSurvey = () => {
   return (
     <SurveyTemplate
       disableNext={!multiAgeOption || !multiHeightOption}
-      totalStep={matchMeeting ? 14 : 12}
+      totalStep={matchMeeting ? 14 : 16}
       currStep={matchMeeting ? 7 : 9}
       handlePrevClick={() => meetingNavigate(Path.PreferUniversitiesSurvey)}
       handleNextClick={handleNextClick}
diff --git a/src/pages/PreferBodyDateCountSurvey.tsx b/src/pages/PreferBodyDateCountSurvey.tsx
index 59d5f7c..18a8a22 100644
--- a/src/pages/PreferBodyDateCountSurvey.tsx
+++ b/src/pages/PreferBodyDateCountSurvey.tsx
@@ -38,8 +38,8 @@ const PreferBodyDateCountSurvey = () => {
   return (
     <SurveyTemplate
       disableNext={!preferBodies && !preferDateCount}
-      currStep={10}
-      totalStep={11}
+      currStep={11}
+      totalStep={16}
       handlePrevClick={() => datingNavigate(Path.PreferDepartmentCharacterSurvey)}
       handleNextClick={handleNextClick}
     >
diff --git a/src/pages/PreferDepartmentCharacterSurvey.tsx b/src/pages/PreferDepartmentCharacterSurvey.tsx
index 7596ff1..ec962eb 100644
--- a/src/pages/PreferDepartmentCharacterSurvey.tsx
+++ b/src/pages/PreferDepartmentCharacterSurvey.tsx
@@ -50,8 +50,8 @@ const PreferDepartmentCharacterSurvey = () => {
   return (
     <SurveyTemplate
       disableNext={!preferDepartments || !preferCharacteristics}
-      currStep={9}
-      totalStep={11}
+      currStep={10}
+      totalStep={16}
       handlePrevClick={() => datingNavigate(Path.PreferAgeHeightSurvey)}
       handleNextClick={handleNextClick}
     >
diff --git a/src/pages/PreferUniversitiesSurvey.tsx b/src/pages/PreferUniversitiesSurvey.tsx
index 059dd2e..e438c86 100644
--- a/src/pages/PreferUniversitiesSurvey.tsx
+++ b/src/pages/PreferUniversitiesSurvey.tsx
@@ -34,7 +34,7 @@ const PreferUniversitiesSurvey = () => {
     <SurveyTemplate
       disableNext={false}
       hasProgressBar={true}
-      totalStep={matchMeeting ? 14 : 12}
+      totalStep={matchMeeting ? 14 : 16}
       currStep={matchMeeting ? 6 : 8}
       handlePrevClick={handlePrevClick}
       handleNextClick={handleNextClick}

From e02ba7a121fd7d3ed1bcf2f3cde07f66120d3cb6 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Thu, 30 Jun 2022 23:30:45 +0900
Subject: [PATCH 52/82] =?UTF-8?q?feat:=20=EB=8F=84=EB=A9=94=EC=8A=A4?=
 =?UTF-8?q?=ED=8B=B1=20=EC=86=8C=EA=B0=9C=ED=8C=85=20=EC=84=B8=EC=85=98=20?=
 =?UTF-8?q?=EC=9E=AC=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/DomesticAreasSurvey.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/DomesticAreasSurvey.tsx b/src/pages/DomesticAreasSurvey.tsx
index 417dec8..7a376ed 100644
--- a/src/pages/DomesticAreasSurvey.tsx
+++ b/src/pages/DomesticAreasSurvey.tsx
@@ -17,7 +17,9 @@ const DomesticAreasSurvey = () => {
   const { initMeetingState, setMeetingData } = useMeetingSessionState();
   const { initDatingState, setDatingData } = useDatingSessionState();
   const getInitDomesticAreas = DOMESTICAREAS_ITEMS.map((item) => {
-    return { ...item, checked: initMeetingState.domesticAreas.some((initState) => initState === item.id) };
+    return matchMeeting
+      ? { ...item, checked: initMeetingState.domesticAreas.some((initState) => initState === item.id) }
+      : { ...item, checked: initDatingState.domesticAreas.some((initState) => initState === item.id) };
   });
   const initDomesticAreas = useMemo(() => getInitDomesticAreas, [DOMESTICAREAS_ITEMS, initMeetingState]);
   const [checkedMultiOption, setMultiCheckedOption] = useState<ChooseFourBoxItemProps[]>(initDomesticAreas);

From 6254be3ee67557e120b0e2ea59cee91ff16c9548 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Thu, 30 Jun 2022 23:41:29 +0900
Subject: [PATCH 53/82] =?UTF-8?q?feat:=20PreferDepartment=20=EB=AF=B8?=
 =?UTF-8?q?=ED=8C=85=20=EC=84=B8=EC=85=98=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PreferDepartmentsSurvey.tsx | 34 ++++++++++++++++++++++-----
 src/types/meeting.ts                  |  2 +-
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/pages/PreferDepartmentsSurvey.tsx b/src/pages/PreferDepartmentsSurvey.tsx
index a03b8d4..109a82c 100644
--- a/src/pages/PreferDepartmentsSurvey.tsx
+++ b/src/pages/PreferDepartmentsSurvey.tsx
@@ -1,23 +1,45 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { SurveyTemplate } from '@/components/domain/survey';
 import { Title } from '@/lib/styles/styledComponents';
 import { ChooseFourBox } from '@/components/domain/survey';
 import { ChooseFourBoxItemProps } from '@/components/domain/survey/ChooseFourBox';
 import { PREFER_DEPARTMENT_ITEMS } from '@/types/constants/department';
 import { useMeetingNavigate } from '@/hooks/common/useNavigate';
+import { useMeetingSessionState } from '@/hooks/common';
 import Path from '@/router/Path';
+import { type Departments } from '@/types/meeting';
 
 const PreferDepartmentsSurvey = () => {
   const meetingNavigate = useMeetingNavigate();
-  const [checkedMultiOption, setMultiCheckedOption] = useState<ChooseFourBoxItemProps[]>(PREFER_DEPARTMENT_ITEMS);
+  const { initMeetingState, setMeetingData } = useMeetingSessionState();
+  const getInitDepartments = PREFER_DEPARTMENT_ITEMS.map((item) => {
+    return { ...item, checked: initMeetingState.preferDepartments.some((initState) => initState === item.id) };
+  });
+  const initDepartments = useMemo(() => getInitDepartments, [PREFER_DEPARTMENT_ITEMS, initMeetingState.preferDepartments]);
+  const [preferDepartments, setPreferDepartments] = useState<ChooseFourBoxItemProps[]>(initDepartments);
+  const getPreferDepartments = preferDepartments.reduce<Departments[]>((prev, cur) => {
+    if (cur.checked) {
+      prev.push(cur.id as Departments);
+    }
+    return prev;
+  }, []);
+  const savedPreferDepartments = useMemo(() => getPreferDepartments, [preferDepartments]);
+
+  const handleNextClick = () => {
+    if (initMeetingState) {
+      setMeetingData({ ...initMeetingState, preferDepartments: savedPreferDepartments ?? [] });
+    }
+
+    meetingNavigate(Path.MindsetSurvey);
+  };
 
   return (
     <SurveyTemplate
-      disableNext={!checkedMultiOption}
+      disableNext={!preferDepartments}
       currStep={8}
       totalStep={14}
       handlePrevClick={() => meetingNavigate(Path.PreferAgeHeightSurvey)}
-      handleNextClick={() => meetingNavigate(Path.MindsetSurvey)}
+      handleNextClick={handleNextClick}
     >
       <Title>
         <strong>
@@ -29,8 +51,8 @@ const PreferDepartmentsSurvey = () => {
       <ChooseFourBox
         isMulti
         items={PREFER_DEPARTMENT_ITEMS}
-        checkedMultiOption={checkedMultiOption}
-        setMultiCheckedOption={setMultiCheckedOption}
+        checkedMultiOption={preferDepartments}
+        setMultiCheckedOption={setPreferDepartments}
         top={97}
       >
         복수 선택이 가능합니다.
diff --git a/src/types/meeting.ts b/src/types/meeting.ts
index 29738bc..af9bf49 100644
--- a/src/types/meeting.ts
+++ b/src/types/meeting.ts
@@ -18,7 +18,7 @@ export interface Meeting {
   preferUniversities: number[];
   preferAge: number[];
   preferHeight: number[];
-  preferDepartments: string[];
+  preferDepartments: Departments[];
   mindset: MindSet;
   play: Play;
   isAbroad: boolean;

From 8832a3e52d39a9536bb64078bb371d872eae85cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sat, 2 Jul 2022 00:51:42 +0900
Subject: [PATCH 54/82] =?UTF-8?q?Refactor:=20=EB=8D=B0=EC=9D=B4=ED=84=B0?=
 =?UTF-8?q?=20=EB=B6=84=EB=A6=AC,=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/header/MenuBlock.tsx | 62 ++++++++++++++++++++++++++++-
 1 file changed, 61 insertions(+), 1 deletion(-)

diff --git a/src/components/header/MenuBlock.tsx b/src/components/header/MenuBlock.tsx
index 758a2c7..80859ea 100644
--- a/src/components/header/MenuBlock.tsx
+++ b/src/components/header/MenuBlock.tsx
@@ -1,14 +1,70 @@
 import { Logo } from '@/assets/img';
 import { palette } from '@/lib/styles/palette';
+import { Dating } from '@/types/dating';
+import { Meeting } from '@/types/meeting';
 import React from 'react';
 import styled from 'styled-components';
+import DatingInfoBox from './DatingInfoBox';
+import MeetingInfoBox from './MeetingInfoBox';
 
 interface MenuBlockProps {
   isMenu: boolean;
   onToggleMenu: () => void;
 }
+/**
+ * 임시 유저 데이터
+ */
 const TempUserData = {
   email: 'coffee123@naver.com',
+  univ: 'Boston University',
+};
+
+const TempMeetingData: Meeting = {
+  typeOfMeeting: 'ONE',
+  gender: 'FEMALE',
+  averageAge: 28,
+  ourUniversities: [],
+  ourDepartments: ['LIBERAL', 'SCIENCE'],
+  averageHeight: 170,
+  avoidUniversities: [],
+  preferUniversities: [],
+  preferAge: [20, 25],
+  preferHeight: [140, 180],
+  preferDepartments: ['LIBERAL', 'SCIENCE'],
+  mindset: 'ALL',
+  play: 'ALL',
+  isAbroad: false,
+  domesticAreas: ['SNW', 'SNE', 'SSW', 'SSE'],
+  abroadAreas: [],
+  channel: 'FACEBOOK',
+  agreement: true,
+  kakaoId: '',
+};
+const TempDatingData: Dating = {
+  gender: 'FEMALE',
+  age: 28,
+  myDepartment: 'LIBERAL',
+  characteristic: 'A_LITTLE_ACTIVE',
+  mbti: 'INFP',
+  myHeight: 0,
+  myBody: 'SKINNY',
+  mySmoke: true,
+  myDateCount: 'ZERO',
+  isSmokeOk: true,
+  avoidUniversities: [],
+  preferUniversities: [],
+  preferAge: [20, 28],
+  preferHeight: [140, 180],
+  preferDepartments: ['LIBERAL', 'SCIENCE'],
+  preferCharacteristics: ['VERY_QUIET', 'A_LITTLE_QUIET'],
+  preferBodies: ['SKINNY', 'SLIM'],
+  preferDateCount: 'ZERO',
+  isAbroad: false,
+  domesticAreas: ['SNW', 'SNE', 'SSW', 'SSE'],
+  abroadAreas: [],
+  channel: 'FACEBOOK',
+  agreement: true,
+  kakaoId: '',
 };
 function MenuBlock({ isMenu, onToggleMenu }: MenuBlockProps) {
   return (
@@ -18,9 +74,11 @@ function MenuBlock({ isMenu, onToggleMenu }: MenuBlockProps) {
           <SiteLogo src={Logo} alt="사이트 로고" />
           <UserBox>
             <div>{TempUserData.email}</div>
-            <div className="univ">Boston University</div>
+            <div className="univ">{TempUserData.univ}</div>
           </UserBox>
         </SidebarHeader>
+        <MeetingInfoBox meeting={TempMeetingData} />
+        <DatingInfoBox dating={TempDatingData} />
       </NavBarBlock>
       <NavBackground onClick={onToggleMenu} isMenu={isMenu} />
     </>
@@ -40,6 +98,7 @@ const NavBackground = styled.div<{ isMenu: boolean }>`
 `;
 
 const NavBarBlock = styled.section<{ isMenu: boolean }>`
+  overflow-y: scroll;
   width: 100%;
   max-width: 300px;
   position: fixed;
@@ -75,4 +134,5 @@ const UserBox = styled.div`
     color: ${palette.grayDark};
   }
 `;
+
 export default MenuBlock;

From 66bb70d70c5ae1154db9cd8d1bed68308cb7bec9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sat, 2 Jul 2022 00:52:02 +0900
Subject: [PATCH 55/82] =?UTF-8?q?Chore:=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EB=B3=80=EA=B2=BD=EC=97=90=20=EB=94=B0?=
 =?UTF-8?q?=EB=A5=B8=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/domain/matching/EndBox.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/domain/matching/EndBox.tsx b/src/components/domain/matching/EndBox.tsx
index 96dd3e8..a3c1a41 100644
--- a/src/components/domain/matching/EndBox.tsx
+++ b/src/components/domain/matching/EndBox.tsx
@@ -7,7 +7,7 @@ import KakaoCopyBox from './KakaoCopyBox';
 import AddCommaFunction from '@/hooks/common/AddCommaFunction';
 
 const TempData: Meeting = {
-  averageHeight: [170, 175],
+  averageHeight: 175,
   averageAge: 22,
   ourUniversities: [1, 2, 11],
   ourDepartments: ['ATHLETIC', 'SCIENCE'],
@@ -39,9 +39,7 @@ function EndBox() {
         </FlexLine>
         <FlexLine>
           <InfoLabel>평균키</InfoLabel>
-          <InfoText>
-            {averageHeight[0]} ~ {averageHeight[1]}
-          </InfoText>
+          <InfoText>{averageHeight}</InfoText>
         </FlexLine>
         <FlexLine>
           <InfoLabel>학교</InfoLabel>

From 005c4d1f6da7c038465a96f8ee9f6e5ebcab1b75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sat, 2 Jul 2022 00:52:44 +0900
Subject: [PATCH 56/82] Feat: DatingInfoBox, MeetingInfoBox

---
 src/components/header/DatingInfoBox.tsx  | 61 ++++++++++++++++++++++++
 src/components/header/MeetingInfoBox.tsx | 20 ++++++++
 2 files changed, 81 insertions(+)
 create mode 100644 src/components/header/DatingInfoBox.tsx
 create mode 100644 src/components/header/MeetingInfoBox.tsx

diff --git a/src/components/header/DatingInfoBox.tsx b/src/components/header/DatingInfoBox.tsx
new file mode 100644
index 0000000..c12c871
--- /dev/null
+++ b/src/components/header/DatingInfoBox.tsx
@@ -0,0 +1,61 @@
+import { palette } from '@/lib/styles/palette';
+import { Dating } from '@/types/dating';
+import React from 'react';
+import styled from 'styled-components';
+
+interface DatingInfoProps {
+  dating: Dating;
+}
+const DatingInfoBox = ({ dating }: DatingInfoProps) => {
+  const { age } = dating;
+  // const { addComma } = AddCommaFunction();
+  return (
+    <div>
+      <GroupLabel>Team</GroupLabel>
+      <InfoLabel>나의 정보</InfoLabel>
+      <InfoBox>
+        <InfoEle>{age}살</InfoEle>
+        <InfoEle></InfoEle>
+      </InfoBox>
+      <InfoLabel>선호 조건</InfoLabel>
+    </div>
+  );
+};
+export const InfoLabel = styled.div`
+  font-size: 14px;
+  font-weight: 700;
+  padding: 4px 0;
+`;
+
+export const GroupLabel = styled(InfoLabel)`
+  color: ${palette.primary};
+  margin-top: 16px;
+`;
+export const InfoBox = styled.ul`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+`;
+
+export const InfoEle = styled.li`
+  max-width: 200px;
+  position: relative;
+  height: 23px;
+  line-height: 14px;
+  background-color: ${({ theme }) => theme.palette.grayLight};
+  border-radius: 4px;
+  padding: 4px 10px;
+  font-size: 12px;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+`;
+
+export default DatingInfoBox;
+{
+  /* {ourUniversities.map((univ, index) => (
+            <p key={univ}>
+              {schools[univ].name}
+              {addTailComma(ourUniversities.length, index)}
+            </p>
+          ))} */
+}
diff --git a/src/components/header/MeetingInfoBox.tsx b/src/components/header/MeetingInfoBox.tsx
new file mode 100644
index 0000000..03be67f
--- /dev/null
+++ b/src/components/header/MeetingInfoBox.tsx
@@ -0,0 +1,20 @@
+import { Meeting } from '@/types/meeting';
+import React from 'react';
+import { GroupLabel, InfoLabel } from './DatingInfoBox';
+
+interface MeetingInfoProps {
+  meeting: Meeting;
+}
+function MeetingInfoBox({ meeting }: MeetingInfoProps) {
+  const { abroadAreas } = meeting;
+  return (
+    <div>
+      <GroupLabel>Me</GroupLabel>
+      <InfoLabel>우리 팀 정보</InfoLabel>
+      {abroadAreas}
+      <InfoLabel>나의 정보</InfoLabel>
+    </div>
+  );
+}
+
+export default MeetingInfoBox;

From 13ea13c10b0369813e2ab92bdee21bca124d30f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sat, 2 Jul 2022 00:53:25 +0900
Subject: [PATCH 57/82] =?UTF-8?q?Chore:=20=EC=BD=A4=EB=A7=88=20=EC=A1=B0?=
 =?UTF-8?q?=EA=B1=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/common/AddCommaFunction.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/common/AddCommaFunction.ts b/src/hooks/common/AddCommaFunction.ts
index d12b8f5..56a74bf 100644
--- a/src/hooks/common/AddCommaFunction.ts
+++ b/src/hooks/common/AddCommaFunction.ts
@@ -4,7 +4,7 @@ const AddCommaFunction = () => {
     else return ',';
   };
   const addTailComma = (arrayLength: number, index: number) => {
-    if (index === arrayLength - 1) return;
+    if (index === arrayLength - 1 || arrayLength === 0) return;
     else return ',';
   };
 

From a38e96e78301dfeb740c2188ff012040222249ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sat, 2 Jul 2022 04:50:20 +0900
Subject: [PATCH 58/82] =?UTF-8?q?Chore:=20=ED=85=8C=EB=B8=94=EB=A6=BF?=
 =?UTF-8?q?=EA=B9=8C=EC=A7=80=20=EB=8C=80=EC=9D=91=EB=90=98=EA=B2=8C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95,=20=EC=83=81=EC=9D=98=ED=9B=84=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=ED=95=98=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/header/MenuBlock.tsx | 22 ++++++++++++++++++----
 src/router/Routing.tsx              | 12 +++++++++++-
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/components/header/MenuBlock.tsx b/src/components/header/MenuBlock.tsx
index 80859ea..8049408 100644
--- a/src/components/header/MenuBlock.tsx
+++ b/src/components/header/MenuBlock.tsx
@@ -99,18 +99,32 @@ const NavBackground = styled.div<{ isMenu: boolean }>`
 
 const NavBarBlock = styled.section<{ isMenu: boolean }>`
   overflow-y: scroll;
+  &::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: ${palette.white};
+    border-radius: 0px 10px 10px 0;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: ${palette.grayLight};
+    border-radius: 12px;
+    background-clip: padding-box;
+    border: 1px solid transparent;
+  }
   width: 100%;
   max-width: 300px;
-  position: fixed;
+  position: absolute;
   height: 100vh;
   top: 0;
-  left: 0;
+  right: 0;
   background: ${palette.white};
-  z-index: 9000;
+  z-index: 1000;
   padding: 16px;
   ${({ isMenu }) => (isMenu ? 'visibility: visible' : 'visibility : hidden')};
   transition: all 0.2s ease-in-out;
-  transform: translateX(${({ isMenu }) => (isMenu ? 'calc(100vw - 300px)' : '100vw')});
+  transform: translateX(${({ isMenu }) => (isMenu ? '0px' : '300px')});
 `;
 const SidebarHeader = styled.header`
   display: flex;
diff --git a/src/router/Routing.tsx b/src/router/Routing.tsx
index f624f8a..c39c105 100644
--- a/src/router/Routing.tsx
+++ b/src/router/Routing.tsx
@@ -95,11 +95,21 @@ function Routing() {
 const PageLayout = styled.div`
   background-color: ${palette.backgroundColor};
   height: 100%;
+  position: relative;
 `;
 const PageWrapper = styled.main`
   margin: 0 auto;
-  max-width: 344px;
+  max-width: 650px;
+  width: 100%;
+  /* 이부분 상의후 변경 */
   height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  overflow: hidden;
 `;
 
 export default Routing;

From eae4c59f6fc1bfef7977c1139023c70222cad273 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sat, 2 Jul 2022 05:06:33 +0900
Subject: [PATCH 59/82] =?UTF-8?q?Feat:=20sidebar=20=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=20=EC=B6=94=EA=B0=80=20(=EA=B0=80=EA=B3=B5X)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/header/DatingInfoBox.tsx  | 48 ++++++++++++++++++++++--
 src/components/header/MeetingInfoBox.tsx | 37 +++++++++++++++---
 2 files changed, 77 insertions(+), 8 deletions(-)

diff --git a/src/components/header/DatingInfoBox.tsx b/src/components/header/DatingInfoBox.tsx
index c12c871..cbad29a 100644
--- a/src/components/header/DatingInfoBox.tsx
+++ b/src/components/header/DatingInfoBox.tsx
@@ -7,17 +7,59 @@ interface DatingInfoProps {
   dating: Dating;
 }
 const DatingInfoBox = ({ dating }: DatingInfoProps) => {
-  const { age } = dating;
+  const {
+    age,
+    myDepartment,
+    mbti,
+    myHeight,
+    myBody,
+    myDateCount,
+    mySmoke,
+    characteristic,
+    domesticAreas,
+    abroadAreas,
+    gender,
+    // 여까지 내정보
+    preferAge,
+    preferBodies,
+    preferCharacteristics,
+    preferDateCount,
+    preferDepartments,
+    preferHeight,
+    preferUniversities,
+  } = dating;
   // const { addComma } = AddCommaFunction();
   return (
     <div>
-      <GroupLabel>Team</GroupLabel>
+      <GroupLabel>Me</GroupLabel>
       <InfoLabel>나의 정보</InfoLabel>
       <InfoBox>
         <InfoEle>{age}살</InfoEle>
-        <InfoEle></InfoEle>
+        <InfoEle>{myDepartment}</InfoEle>
+        <InfoEle>{mbti}</InfoEle>
+        <InfoEle>{myDateCount}</InfoEle>
+        <InfoEle>{myHeight}cm</InfoEle>
+        <InfoEle>{myBody}</InfoEle>
+        <InfoEle>{mySmoke ? '흡연' : '비흡연'}</InfoEle>
+        <InfoEle>{characteristic}</InfoEle>
+        {domesticAreas && <InfoEle>{domesticAreas}</InfoEle>}
+        <InfoEle>{abroadAreas}</InfoEle>
+        <InfoEle>{gender}</InfoEle>
       </InfoBox>
       <InfoLabel>선호 조건</InfoLabel>
+      <InfoBox>
+        <InfoEle>
+          {preferAge[0]}~{preferAge[1]}살
+        </InfoEle>
+        <InfoEle>{preferBodies}</InfoEle>
+        <InfoEle>{preferCharacteristics}</InfoEle>
+        <InfoEle>{preferDateCount}</InfoEle>
+        <InfoEle>{preferDepartments}</InfoEle>
+        <InfoEle>
+          {preferHeight[0]}~{preferHeight[1]}
+        </InfoEle>
+        <InfoEle>{preferUniversities}</InfoEle>
+      </InfoBox>
     </div>
   );
 };
diff --git a/src/components/header/MeetingInfoBox.tsx b/src/components/header/MeetingInfoBox.tsx
index 03be67f..b5f50ad 100644
--- a/src/components/header/MeetingInfoBox.tsx
+++ b/src/components/header/MeetingInfoBox.tsx
@@ -1,18 +1,45 @@
 import { Meeting } from '@/types/meeting';
 import React from 'react';
-import { GroupLabel, InfoLabel } from './DatingInfoBox';
+import { GroupLabel, InfoBox, InfoEle, InfoLabel } from './DatingInfoBox';
 
 interface MeetingInfoProps {
   meeting: Meeting;
 }
 function MeetingInfoBox({ meeting }: MeetingInfoProps) {
-  const { abroadAreas } = meeting;
+  const {
+    ourUniversities,
+    ourDepartments,
+    domesticAreas,
+    averageAge,
+    averageHeight,
+    play,
+    typeOfMeeting,
+    // 여까지 우리팀정보
+    preferAge,
+    preferDepartments,
+    preferHeight,
+    preferUniversities,
+  } = meeting;
   return (
     <div>
-      <GroupLabel>Me</GroupLabel>
+      <GroupLabel>Team</GroupLabel>
       <InfoLabel>우리 팀 정보</InfoLabel>
-      {abroadAreas}
-      <InfoLabel>나의 정보</InfoLabel>
+      <InfoBox>
+        <InfoEle>{ourUniversities}</InfoEle>
+        <InfoEle>{typeOfMeeting}</InfoEle>
+        <InfoEle>{ourDepartments}</InfoEle>
+        <InfoEle>{averageAge}</InfoEle>
+        <InfoEle>{averageHeight}cm</InfoEle>
+        <InfoEle>{play}</InfoEle>
+        {domesticAreas && <InfoEle>{domesticAreas}</InfoEle>}
+      </InfoBox>
+      <InfoLabel>선호 조건</InfoLabel>
+      <InfoBox>
+        <InfoEle>{preferAge}살</InfoEle>
+        <InfoEle>{preferDepartments}</InfoEle>
+        <InfoEle>{preferHeight}</InfoEle>
+        <InfoEle>{preferUniversities}</InfoEle>
+      </InfoBox>
     </div>
   );
 }

From 1da8f687bfd71c9eeba135da18f0d4368018c364 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sat, 2 Jul 2022 05:07:08 +0900
Subject: [PATCH 60/82] =?UTF-8?q?Chore:=20=ED=83=9C=EA=B7=B8=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/header/MenuBlock.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/header/MenuBlock.tsx b/src/components/header/MenuBlock.tsx
index 8049408..c2689d8 100644
--- a/src/components/header/MenuBlock.tsx
+++ b/src/components/header/MenuBlock.tsx
@@ -126,7 +126,7 @@ const NavBarBlock = styled.section<{ isMenu: boolean }>`
   transition: all 0.2s ease-in-out;
   transform: translateX(${({ isMenu }) => (isMenu ? '0px' : '300px')});
 `;
-const SidebarHeader = styled.header`
+const SidebarHeader = styled.div`
   display: flex;
   margin-bottom: 20px;
 `;

From 007c7cad4e4cc45a0289482f6b46e25359e45b9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sat, 2 Jul 2022 05:08:28 +0900
Subject: [PATCH 61/82] =?UTF-8?q?Chore:=20=ED=97=A4=EB=8D=94=20=ED=8C=A8?=
 =?UTF-8?q?=EB=94=A9=EA=B0=92=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/header/UserHeader.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/header/UserHeader.tsx b/src/components/header/UserHeader.tsx
index 64d4479..12f8243 100644
--- a/src/components/header/UserHeader.tsx
+++ b/src/components/header/UserHeader.tsx
@@ -24,6 +24,7 @@ const HeaderLayout = styled(HeaderWrapper)`
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
+  padding: 20px 10px;
 `;
 
 export default UserHeader;

From e0f7887caa80f3e955b7e4f2d995563d14354b1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sat, 2 Jul 2022 19:31:46 +0900
Subject: [PATCH 62/82] =?UTF-8?q?Chore:=20=ED=9A=8C=EC=9D=98=20=EA=B2=B0?=
 =?UTF-8?q?=EA=B3=BC=20=EB=B0=98=EC=98=81(sidebar=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EB=B0=96=EC=97=90=EC=84=9C=20=EB=82=98?=
 =?UTF-8?q?=EC=98=A4=EB=8F=84=EB=A1=9D)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/header/MenuBlock.tsx | 8 ++++----
 src/router/Routing.tsx              | 9 ++++-----
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/header/MenuBlock.tsx b/src/components/header/MenuBlock.tsx
index c2689d8..8f27cb0 100644
--- a/src/components/header/MenuBlock.tsx
+++ b/src/components/header/MenuBlock.tsx
@@ -87,9 +87,9 @@ function MenuBlock({ isMenu, onToggleMenu }: MenuBlockProps) {
 
 const NavBackground = styled.div<{ isMenu: boolean }>`
   width: 100%;
-  height: 100vh;
+  height: 100%;
   background-color: black;
-  position: absolute;
+  position: fixed;
   left: 0;
   top: 0;
   z-index: 800;
@@ -115,7 +115,7 @@ const NavBarBlock = styled.section<{ isMenu: boolean }>`
   }
   width: 100%;
   max-width: 300px;
-  position: absolute;
+  position: fixed;
   height: 100vh;
   top: 0;
   right: 0;
@@ -124,7 +124,7 @@ const NavBarBlock = styled.section<{ isMenu: boolean }>`
   padding: 16px;
   ${({ isMenu }) => (isMenu ? 'visibility: visible' : 'visibility : hidden')};
   transition: all 0.2s ease-in-out;
-  transform: translateX(${({ isMenu }) => (isMenu ? '0px' : '300px')});
+  transform: translateX(${({ isMenu }) => (isMenu ? 'calc(100vw-300px)' : '100vw')});
 `;
 const SidebarHeader = styled.div`
   display: flex;
diff --git a/src/router/Routing.tsx b/src/router/Routing.tsx
index c39c105..a88cd58 100644
--- a/src/router/Routing.tsx
+++ b/src/router/Routing.tsx
@@ -95,21 +95,20 @@ function Routing() {
 const PageLayout = styled.div`
   background-color: ${palette.backgroundColor};
   height: 100%;
-  position: relative;
+  /* position: relative; */
 `;
 const PageWrapper = styled.main`
   margin: 0 auto;
-  max-width: 650px;
+  max-width: 344px;
   width: 100%;
-  /* 이부분 상의후 변경 */
   height: 100%;
-  position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 9999;
-  overflow: hidden;
+  /* overflow: hidden; */
+  /* position: absolute; */
 `;
 
 export default Routing;

From 0da36fbd19569548076a35d11a2a2cca140fea57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sat, 2 Jul 2022 19:44:58 +0900
Subject: [PATCH 63/82] =?UTF-8?q?Chore:=20addCommaFunction=20=EC=9C=A0?=
 =?UTF-8?q?=ED=8B=B8=EB=A6=AC=ED=8B=B0=20=ED=8F=B4=EB=8D=94=EB=A1=9C=20?=
 =?UTF-8?q?=EC=98=AE=EA=B9=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/domain/matching/EndBox.tsx                     | 4 ++--
 .../common/AddCommaFunction.ts => utils/addCommaFunction.ts}  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename src/{hooks/common/AddCommaFunction.ts => utils/addCommaFunction.ts} (81%)

diff --git a/src/components/domain/matching/EndBox.tsx b/src/components/domain/matching/EndBox.tsx
index a3c1a41..f060e5c 100644
--- a/src/components/domain/matching/EndBox.tsx
+++ b/src/components/domain/matching/EndBox.tsx
@@ -4,7 +4,7 @@ import { schools } from '@/mock/schools';
 import { Meeting } from '@/types/meeting';
 import styled from 'styled-components';
 import KakaoCopyBox from './KakaoCopyBox';
-import AddCommaFunction from '@/hooks/common/AddCommaFunction';
+import addCommaFunction from '@/utils/AddCommaFunction';
 
 const TempData: Meeting = {
   averageHeight: 175,
@@ -29,7 +29,7 @@ const TempData: Meeting = {
 };
 function EndBox() {
   const { kakaoId, averageAge, averageHeight, mindset, ourDepartments, ourUniversities, play } = TempData;
-  const { addComma, addTailComma } = AddCommaFunction();
+  const { addComma, addTailComma } = addCommaFunction();
   return (
     <div>
       <MatchingInfoBox>
diff --git a/src/hooks/common/AddCommaFunction.ts b/src/utils/addCommaFunction.ts
similarity index 81%
rename from src/hooks/common/AddCommaFunction.ts
rename to src/utils/addCommaFunction.ts
index 56a74bf..a87e779 100644
--- a/src/hooks/common/AddCommaFunction.ts
+++ b/src/utils/addCommaFunction.ts
@@ -1,4 +1,4 @@
-const AddCommaFunction = () => {
+const addCommaFunction = () => {
   const addComma = (index: number) => {
     if (index === 0) return;
     else return ',';
@@ -11,4 +11,4 @@ const AddCommaFunction = () => {
   return { addComma, addTailComma };
 };
 
-export default AddCommaFunction;
+export default addCommaFunction;

From 0244b87848dc0efb1673f2c05948ca3a36ae1518 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sat, 2 Jul 2022 20:00:02 +0900
Subject: [PATCH 64/82] =?UTF-8?q?Feat:=20convert=20=EC=9C=A0=ED=8B=B8?=
 =?UTF-8?q?=EB=A6=AC=ED=8B=B0=20=ED=95=A8=EC=88=98=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/converson/conversionDepartment.ts   | 7 +++++++
 src/utils/converson/conversionDomesticArea.ts | 7 +++++++
 src/utils/converson/conversionMindset.ts      | 6 ++++++
 src/utils/converson/conversionPlay.ts         | 7 +++++++
 4 files changed, 27 insertions(+)
 create mode 100644 src/utils/converson/conversionDepartment.ts
 create mode 100644 src/utils/converson/conversionDomesticArea.ts
 create mode 100644 src/utils/converson/conversionMindset.ts
 create mode 100644 src/utils/converson/conversionPlay.ts

diff --git a/src/utils/converson/conversionDepartment.ts b/src/utils/converson/conversionDepartment.ts
new file mode 100644
index 0000000..27c6cdb
--- /dev/null
+++ b/src/utils/converson/conversionDepartment.ts
@@ -0,0 +1,7 @@
+/**
+ * @description 들어온 department를 적절한 단어로 변경
+ */
+export const conversionDepartment = (department: string) => {
+  return { LIBERAL: '문과', SCIENCE: '이과', ATHLETIC: '체육', ART: '예술' }[department];
+};
+``;
diff --git a/src/utils/converson/conversionDomesticArea.ts b/src/utils/converson/conversionDomesticArea.ts
new file mode 100644
index 0000000..fe4b2ea
--- /dev/null
+++ b/src/utils/converson/conversionDomesticArea.ts
@@ -0,0 +1,7 @@
+/**
+ * @description 들어온 domesticArea를 적절한 단어로 변경
+ */
+export const conversionDomesticArea = (domesticArea: string) => {
+  return { ICN: '인천', SNW: '서북', SNE: '동북', SSW: '서남', SSE: '동서', GN: '경기 북부', GS: '경기 남부' }[domesticArea];
+};
+``;
diff --git a/src/utils/converson/conversionMindset.ts b/src/utils/converson/conversionMindset.ts
new file mode 100644
index 0000000..530600d
--- /dev/null
+++ b/src/utils/converson/conversionMindset.ts
@@ -0,0 +1,6 @@
+/**
+ * @description 들어온 mindset을 적절한 단어로 변경
+ */
+export const conversionMindset = (mindset: string) => {
+  return { ALL: '친구랑 노는, 설레는 둘 다', FRIEND: '친구랑 노는 느낌', LOVE: '설레는 느낌' }[mindset];
+};
diff --git a/src/utils/converson/conversionPlay.ts b/src/utils/converson/conversionPlay.ts
new file mode 100644
index 0000000..9ba5824
--- /dev/null
+++ b/src/utils/converson/conversionPlay.ts
@@ -0,0 +1,7 @@
+/**
+ * @description 들어온 play를 적절한 단어로 변경
+ */
+export const conversionPlay = (play: string) => {
+  return { ALL: '술게임, 얘기하면서 둘 다', GAME: '술게임 할래요!', TALK: '얘기하면서 놀래요.' }[play];
+};
+``;

From 444f1e8fa7d546074411ca37d8f78e59d51d7136 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sat, 2 Jul 2022 20:50:45 +0900
Subject: [PATCH 65/82] =?UTF-8?q?Feat:=20conversion=20=ED=95=A8=EC=88=98?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/converson/conversionBody.ts      | 7 +++++++
 src/utils/converson/conversionCharacter.ts | 7 +++++++
 src/utils/converson/conversionDateCount.ts | 7 +++++++
 3 files changed, 21 insertions(+)
 create mode 100644 src/utils/converson/conversionBody.ts
 create mode 100644 src/utils/converson/conversionCharacter.ts
 create mode 100644 src/utils/converson/conversionDateCount.ts

diff --git a/src/utils/converson/conversionBody.ts b/src/utils/converson/conversionBody.ts
new file mode 100644
index 0000000..1d87cf5
--- /dev/null
+++ b/src/utils/converson/conversionBody.ts
@@ -0,0 +1,7 @@
+/**
+ * @description 들어온 Body를 적절한 단어로 변경
+ */
+export const conversionBody = (body: string) => {
+  return { SKINNY: '마른 편', SLIM: '슬림 탄탄', MUSCULAR: '근육', CHUBBY: '통통한' }[body];
+};
+``;
diff --git a/src/utils/converson/conversionCharacter.ts b/src/utils/converson/conversionCharacter.ts
new file mode 100644
index 0000000..c8fef53
--- /dev/null
+++ b/src/utils/converson/conversionCharacter.ts
@@ -0,0 +1,7 @@
+/**
+ * @description 들어온 Body를 적절한 단어로 변경
+ */
+export const conversionCharacter = (body: string) => {
+  return { VERY_QUIET: '많이 조용한', A_LITTLE_QUIET: '조금 조용한', VERY_ACTIVE: '많이 활발한', A_LITTLE_ACTIVE: '조금 활발한' }[body];
+};
+``;
diff --git a/src/utils/converson/conversionDateCount.ts b/src/utils/converson/conversionDateCount.ts
new file mode 100644
index 0000000..045bab2
--- /dev/null
+++ b/src/utils/converson/conversionDateCount.ts
@@ -0,0 +1,7 @@
+/**
+ * @description 들어온 DateCount를 적절한 단어로 변경
+ */
+export const conversionDateCount = (dateCount: string) => {
+  return { ZERO: '모태솔로', ONETWO: '1~2회', THREEFOUR: '3~4회', FIVE: '5회 이상' }[dateCount];
+};
+``;

From be77f77460366600e4d57a849db70757397b3fc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sun, 3 Jul 2022 21:09:00 +0900
Subject: [PATCH 66/82] Add: axios, ps

---
 package.json |  3 +++
 yarn.lock    | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+)

diff --git a/package.json b/package.json
index 10600ad..0068c4b 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@types/styled-components": "^5.1.25",
+    "axios": "^0.27.2",
+    "qs": "^6.11.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0",
@@ -19,6 +21,7 @@
   },
   "devDependencies": {
     "@honkhonk/vite-plugin-svgr": "^1.1.0",
+    "@types/qs": "^6.9.7",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
diff --git a/yarn.lock b/yarn.lock
index 04af93c..8c67eb0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -506,6 +506,11 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
+"@types/qs@^6.9.7":
+  version "6.9.7"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
+  integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
+
 "@types/react-dom@^18.0.0":
   version "18.0.3"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.3.tgz#a022ea08c75a476fe5e96b675c3e673363853831"
@@ -728,11 +733,24 @@ async@^3.2.3:
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.3.tgz#ac53dafd3f4720ee9e8a160628f18ea91df196c9"
   integrity sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
 axe-core@^4.3.5:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.2.tgz#dcf7fb6dea866166c3eab33d68208afe4d5f670c"
   integrity sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA==
 
+axios@^0.27.2:
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
+  integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
+  dependencies:
+    follow-redirects "^1.14.9"
+    form-data "^4.0.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -891,6 +909,13 @@ colorette@^2.0.16:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.17.tgz#5dd4c0d15e2984b7433cb4a9f2ead45063b80c47"
   integrity sha512-hJo+3Bkn0NCHybn9Tu35fIeoOKGOk5OCC32y4Hz2It+qlCO2Q3DeQ1hRn/tDDMQKRYUEzqsl7jbF6dYKjlE60g==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -1027,6 +1052,11 @@ define-properties@^1.1.3, define-properties@^1.1.4:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
@@ -1616,6 +1646,20 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
   integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
 
+follow-redirects@^1.14.9:
+  version "1.15.1"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5"
+  integrity sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 fs-extra@^10.0.1:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
@@ -2122,6 +2166,18 @@ micromatch@^4.0.4:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -2410,6 +2466,13 @@ punycode@^2.1.0:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+qs@^6.11.0:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
+  integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
+  dependencies:
+    side-channel "^1.0.4"
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"

From d08cbf1bb539d833051d8b313d03860d36ffd954 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sun, 3 Jul 2022 21:10:09 +0900
Subject: [PATCH 67/82] =?UTF-8?q?Feat:=20=EC=84=9C=EB=B2=84=20=EC=A3=BC?=
 =?UTF-8?q?=EC=86=8C=20=EC=A0=80=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/constants.ts | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/lib/constants.ts

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
new file mode 100644
index 0000000..4a5b463
--- /dev/null
+++ b/src/lib/constants.ts
@@ -0,0 +1 @@
+export const SERVER_URL = 'http://49.50.175.112:8080';

From 44d2e3a278a75be1e4f0a5f92474fc1347032493 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sun, 3 Jul 2022 21:20:44 +0900
Subject: [PATCH 68/82] Feat: axios apiClient

---
 .env.development     | 1 +
 src/lib/api/index.ts | 9 +++++++++
 src/lib/constants.ts | 1 -
 3 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/api/index.ts
 delete mode 100644 src/lib/constants.ts

diff --git a/.env.development b/.env.development
index f03ba3d..d09b8e4 100644
--- a/.env.development
+++ b/.env.development
@@ -1,3 +1,4 @@
 VITE_KAKAO_JAVASCRIPT_KEY=02e0caae3e4116da61d734a06528cd86
 VITE_KAKAO_RESTAPI_KEY=09bebf5106adf50d6a204a7ac2c22779
 VITE_KAKAO_OPEN_URL=https://kauth.kakao.com/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&response_type=code&prompt=login
+VITE_SERVER_URL=http://49.50.175.112:8080
\ No newline at end of file
diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts
new file mode 100644
index 0000000..302074d
--- /dev/null
+++ b/src/lib/api/index.ts
@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+const host = import.meta.env.VITE_KAKAO_JAVASCRIPT_KEY;
+const apiClient = axios.create({
+  baseURL: host,
+  withCredentials: false,
+});
+
+export default apiClient;
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
deleted file mode 100644
index 4a5b463..0000000
--- a/src/lib/constants.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const SERVER_URL = 'http://49.50.175.112:8080';

From 2b25c19889b36139909bf607a71bafb1935bdd55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sun, 3 Jul 2022 22:13:10 +0900
Subject: [PATCH 69/82] =?UTF-8?q?Feat:=20sideBar=20=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=20=EA=B0=80=EA=B3=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/domain/matching/EndBox.tsx | 13 ++--
 src/components/header/DatingInfoBox.tsx   | 76 ++++++++++++++++++-----
 src/utils/converson/conversionGender.ts   |  7 +++
 3 files changed, 76 insertions(+), 20 deletions(-)
 create mode 100644 src/utils/converson/conversionGender.ts

diff --git a/src/components/domain/matching/EndBox.tsx b/src/components/domain/matching/EndBox.tsx
index f060e5c..9830f23 100644
--- a/src/components/domain/matching/EndBox.tsx
+++ b/src/components/domain/matching/EndBox.tsx
@@ -4,7 +4,10 @@ import { schools } from '@/mock/schools';
 import { Meeting } from '@/types/meeting';
 import styled from 'styled-components';
 import KakaoCopyBox from './KakaoCopyBox';
-import addCommaFunction from '@/utils/AddCommaFunction';
+import addCommaFunction from '@/utils/addCommaFunction';
+import { conversionMindset } from '@/utils/converson/conversionMindset';
+import { conversionPlay } from '@/utils/converson/conversionPlay';
+import { conversionDepartment } from '@/utils/converson/conversionDepartment';
 
 const TempData: Meeting = {
   averageHeight: 175,
@@ -58,7 +61,7 @@ function EndBox() {
             {ourDepartments.map((department, index) => (
               <p key={`${department}_${index}`}>
                 {addComma(index)}
-                {{ LIBERAL: '문과', SCIENCE: '이과', ATHLETIC: '체육', ART: '예술' }[department]}
+                {conversionDepartment(department)}
               </p>
             ))}
           </InfoFlexText>
@@ -77,17 +80,17 @@ function EndBox() {
           {TempData.domesticAreas?.map((area, index) => (
             <InfoFlexText key={`${area}_${index}`}>
               {addComma(index)}
-              {{ ICN: '인천', SNW: '서북', SNE: '동북', SSW: '서남', SSE: '동서', GN: '경기 북부', GS: '경기 남부' }[area]},
+              {conversionPlay(area)},
             </InfoFlexText>
           ))}
         </FlexLine>
         <FlexLine>
           <InfoLabel>마인드셋</InfoLabel>
-          <InfoText>{{ ALL: '친구랑 노는, 설레는 둘 다', FRIEND: '친구랑 노는 느낌', LOVE: '설레는 느낌' }[mindset]}</InfoText>
+          <InfoText>{conversionMindset(mindset)}</InfoText>
         </FlexLine>
         <FlexLine>
           <InfoLabel>술게임</InfoLabel>
-          <InfoText>{{ ALL: '술게임, 얘기하면서 둘 다', GAME: '술게임 할래요!', TALK: '얘기하면서 놀래요.' }[play]}</InfoText>
+          <InfoText>{conversionPlay(play)}</InfoText>
         </FlexLine>
       </MatchingInfoBox>
       <KakaoCopyBox kakaoId={kakaoId} />
diff --git a/src/components/header/DatingInfoBox.tsx b/src/components/header/DatingInfoBox.tsx
index cbad29a..926362d 100644
--- a/src/components/header/DatingInfoBox.tsx
+++ b/src/components/header/DatingInfoBox.tsx
@@ -1,5 +1,12 @@
 import { palette } from '@/lib/styles/palette';
 import { Dating } from '@/types/dating';
+import addCommaFunction from '@/utils/addCommaFunction';
+import { conversionBody } from '@/utils/converson/conversionBody';
+import { conversionCharacter } from '@/utils/converson/conversionCharacter';
+import { conversionDateCount } from '@/utils/converson/conversionDateCount';
+import { conversionDepartment } from '@/utils/converson/conversionDepartment';
+import { conversionDomesticArea } from '@/utils/converson/conversionDomesticArea';
+import { conversionGender } from '@/utils/converson/conversionGender';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -17,7 +24,6 @@ const DatingInfoBox = ({ dating }: DatingInfoProps) => {
     mySmoke,
     characteristic,
     domesticAreas,
-    abroadAreas,
     gender,
     // 여까지 내정보
     preferAge,
@@ -26,39 +32,75 @@ const DatingInfoBox = ({ dating }: DatingInfoProps) => {
     preferDateCount,
     preferDepartments,
     preferHeight,
-    preferUniversities,
+    isSmokeOk,
+    isAbroad,
+    abroadAreas,
+    //여까지 선호 조건
   } = dating;
-  // const { addComma } = AddCommaFunction();
+  const { addComma } = addCommaFunction();
+  console.log(abroadAreas);
   return (
     <div>
       <GroupLabel>Me</GroupLabel>
       <InfoLabel>나의 정보</InfoLabel>
       <InfoBox>
         <InfoEle>{age}살</InfoEle>
-        <InfoEle>{myDepartment}</InfoEle>
+        <InfoEle>{conversionGender(gender)}</InfoEle>
+        <InfoEle>{conversionDepartment(myDepartment)}</InfoEle>
         <InfoEle>{mbti}</InfoEle>
-        <InfoEle>{myDateCount}</InfoEle>
+        <InfoEle>연애 횟수 : {conversionDateCount(myDateCount)}</InfoEle>
         <InfoEle>{myHeight}cm</InfoEle>
-        <InfoEle>{myBody}</InfoEle>
+        <InfoEle>{conversionBody(myBody)}</InfoEle>
         <InfoEle>{mySmoke ? '흡연' : '비흡연'}</InfoEle>
-        <InfoEle>{characteristic}</InfoEle>
-        {domesticAreas && <InfoEle>{domesticAreas}</InfoEle>}
-        <InfoEle>{abroadAreas}</InfoEle>
-        <InfoEle>{gender}</InfoEle>
+        <InfoEle>{conversionCharacter(characteristic)}</InfoEle>
+        {domesticAreas && (
+          <FlexEle>
+            {domesticAreas.map((area, index) => (
+              <div className="longEle" key={area + domesticAreas}>
+                {addComma(index)}
+                {conversionDomesticArea(area)}
+              </div>
+            ))}
+          </FlexEle>
+        )}
+        <InfoEle>{abroadAreas.length === 0 ? '기피지역 : 없음' : abroadAreas}</InfoEle>
+        <InfoEle>해외여부 : {isAbroad ? '예' : '아니요'}</InfoEle>
       </InfoBox>
       <InfoLabel>선호 조건</InfoLabel>
       <InfoBox>
         <InfoEle>
           {preferAge[0]}~{preferAge[1]}살
         </InfoEle>
-        <InfoEle>{preferBodies}</InfoEle>
-        <InfoEle>{preferCharacteristics}</InfoEle>
-        <InfoEle>{preferDateCount}</InfoEle>
-        <InfoEle>{preferDepartments}</InfoEle>
+        <FlexEle>
+          {preferBodies?.map((body, index) => (
+            <div key={body + preferBodies}>
+              {addComma(index)}
+              {conversionBody(body)}
+            </div>
+          ))}
+        </FlexEle>
+        <FlexEle>
+          {preferCharacteristics?.map((charator, index) => (
+            <div key={charator + preferCharacteristics}>
+              {addComma(index)}
+              {conversionCharacter(charator)}
+            </div>
+          ))}
+        </FlexEle>
+        <InfoEle>{conversionDateCount(preferDateCount)}</InfoEle>
+        <FlexEle>
+          {preferDepartments?.map((department, index) => (
+            <div key={department + preferDepartments}>
+              {addComma(index)}
+              {conversionDepartment(department)}
+            </div>
+          ))}
+        </FlexEle>
         <InfoEle>
           {preferHeight[0]}~{preferHeight[1]}
         </InfoEle>
-        <InfoEle>{preferUniversities}</InfoEle>
+        {/* <InfoEle>{preferUniversities}</InfoEle> */}
+        <InfoEle>흡연 : {isSmokeOk ? '괜찮아요' : '싫어요'}</InfoEle>
       </InfoBox>
     </div>
   );
@@ -92,6 +134,10 @@ export const InfoEle = styled.li`
   text-overflow: ellipsis;
 `;
 
+export const FlexEle = styled(InfoEle)`
+  display: flex;
+`;
+
 export default DatingInfoBox;
 {
   /* {ourUniversities.map((univ, index) => (
diff --git a/src/utils/converson/conversionGender.ts b/src/utils/converson/conversionGender.ts
new file mode 100644
index 0000000..0069632
--- /dev/null
+++ b/src/utils/converson/conversionGender.ts
@@ -0,0 +1,7 @@
+/**
+ * @description 들어온 gender을 적절한 단어로 변경
+ */
+export const conversionGender = (gender: string) => {
+  return { FEMALE: '여성', MALE: '남성' }[gender];
+};
+``;

From 5b53364110d6d1b07f8af4db0ec80c232010a272 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sun, 3 Jul 2022 22:31:11 +0900
Subject: [PATCH 70/82] Feat: conversionTypeOfMeeting

---
 src/utils/converson/conversionTypeOfMeeting.ts | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 src/utils/converson/conversionTypeOfMeeting.ts

diff --git a/src/utils/converson/conversionTypeOfMeeting.ts b/src/utils/converson/conversionTypeOfMeeting.ts
new file mode 100644
index 0000000..ec864d9
--- /dev/null
+++ b/src/utils/converson/conversionTypeOfMeeting.ts
@@ -0,0 +1,7 @@
+/**
+ * @description 들어온 typeOfMeeting를 적절한 단어로 변경
+ */
+export const conversionTypeOfMeeting = (meeting: string) => {
+  return { ONE: '소개팅', TWO: '2:2 미팅', THREE: '3:3 미팅', FOUR: '4:4 미팅' }[meeting];
+};
+``;

From f62a9f7a15d0f73d9f797d64e910f5306dd8567a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sun, 3 Jul 2022 22:31:39 +0900
Subject: [PATCH 71/82] =?UTF-8?q?Feat:=20Sidebar=20=EB=AF=B8=ED=8C=85=20co?=
 =?UTF-8?q?mponent=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EA=B0=80=EA=B3=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/header/DatingInfoBox.tsx  | 20 ++++----
 src/components/header/MeetingInfoBox.tsx | 62 ++++++++++++++++++------
 src/components/header/MenuBlock.tsx      |  2 +-
 3 files changed, 58 insertions(+), 26 deletions(-)

diff --git a/src/components/header/DatingInfoBox.tsx b/src/components/header/DatingInfoBox.tsx
index 926362d..b4286a6 100644
--- a/src/components/header/DatingInfoBox.tsx
+++ b/src/components/header/DatingInfoBox.tsx
@@ -53,16 +53,14 @@ const DatingInfoBox = ({ dating }: DatingInfoProps) => {
         <InfoEle>{conversionBody(myBody)}</InfoEle>
         <InfoEle>{mySmoke ? '흡연' : '비흡연'}</InfoEle>
         <InfoEle>{conversionCharacter(characteristic)}</InfoEle>
-        {domesticAreas && (
-          <FlexEle>
-            {domesticAreas.map((area, index) => (
-              <div className="longEle" key={area + domesticAreas}>
-                {addComma(index)}
-                {conversionDomesticArea(area)}
-              </div>
-            ))}
-          </FlexEle>
-        )}
+        <FlexEle>
+          {domesticAreas?.map((area, index) => (
+            <div key={area + domesticAreas}>
+              {addComma(index)}
+              {conversionDomesticArea(area)}
+            </div>
+          ))}
+        </FlexEle>
         <InfoEle>{abroadAreas.length === 0 ? '기피지역 : 없음' : abroadAreas}</InfoEle>
         <InfoEle>해외여부 : {isAbroad ? '예' : '아니요'}</InfoEle>
       </InfoBox>
@@ -97,7 +95,7 @@ const DatingInfoBox = ({ dating }: DatingInfoProps) => {
           ))}
         </FlexEle>
         <InfoEle>
-          {preferHeight[0]}~{preferHeight[1]}
+          {preferHeight[0]}~{preferHeight[1]}cm
         </InfoEle>
         {/* <InfoEle>{preferUniversities}</InfoEle> */}
         <InfoEle>흡연 : {isSmokeOk ? '괜찮아요' : '싫어요'}</InfoEle>
diff --git a/src/components/header/MeetingInfoBox.tsx b/src/components/header/MeetingInfoBox.tsx
index b5f50ad..4bfce78 100644
--- a/src/components/header/MeetingInfoBox.tsx
+++ b/src/components/header/MeetingInfoBox.tsx
@@ -1,44 +1,78 @@
 import { Meeting } from '@/types/meeting';
+import addCommaFunction from '@/utils/addCommaFunction';
+import { conversionDepartment } from '@/utils/converson/conversionDepartment';
+import { conversionDomesticArea } from '@/utils/converson/conversionDomesticArea';
+import { conversionGender } from '@/utils/converson/conversionGender';
+import { conversionMindset } from '@/utils/converson/conversionMindset';
+import { conversionPlay } from '@/utils/converson/conversionPlay';
+import { conversionTypeOfMeeting } from '@/utils/converson/conversionTypeOfMeeting';
 import React from 'react';
-import { GroupLabel, InfoBox, InfoEle, InfoLabel } from './DatingInfoBox';
+import { FlexEle, GroupLabel, InfoBox, InfoEle, InfoLabel } from './DatingInfoBox';
 
 interface MeetingInfoProps {
   meeting: Meeting;
 }
 function MeetingInfoBox({ meeting }: MeetingInfoProps) {
   const {
-    ourUniversities,
     ourDepartments,
     domesticAreas,
     averageAge,
     averageHeight,
     play,
     typeOfMeeting,
+    mindset,
+    gender,
     // 여까지 우리팀정보
     preferAge,
     preferDepartments,
     preferHeight,
-    preferUniversities,
   } = meeting;
+  const { addComma } = addCommaFunction();
   return (
     <div>
       <GroupLabel>Team</GroupLabel>
       <InfoLabel>우리 팀 정보</InfoLabel>
+
       <InfoBox>
-        <InfoEle>{ourUniversities}</InfoEle>
-        <InfoEle>{typeOfMeeting}</InfoEle>
-        <InfoEle>{ourDepartments}</InfoEle>
-        <InfoEle>{averageAge}</InfoEle>
-        <InfoEle>{averageHeight}cm</InfoEle>
-        <InfoEle>{play}</InfoEle>
-        {domesticAreas && <InfoEle>{domesticAreas}</InfoEle>}
+        <InfoEle>{conversionGender(gender)}</InfoEle>
+        <InfoEle>{conversionTypeOfMeeting(typeOfMeeting)}</InfoEle>
+        <FlexEle>
+          {ourDepartments?.map((department, index) => (
+            <div key={department + ourDepartments}>
+              {addComma(index)}
+              {conversionDepartment(department)}
+            </div>
+          ))}
+        </FlexEle>
+        <InfoEle>평균나이 : {averageAge}살</InfoEle>
+        <InfoEle>평균 키 : {averageHeight}cm</InfoEle>
+        <InfoEle>{conversionPlay(play)}</InfoEle>
+        <FlexEle>
+          {domesticAreas?.map((area, index) => (
+            <div key={area + domesticAreas}>
+              {addComma(index)}
+              {conversionDomesticArea(area)}
+            </div>
+          ))}
+        </FlexEle>
+        <InfoEle>{conversionMindset(mindset)}</InfoEle>
       </InfoBox>
       <InfoLabel>선호 조건</InfoLabel>
       <InfoBox>
-        <InfoEle>{preferAge}살</InfoEle>
-        <InfoEle>{preferDepartments}</InfoEle>
-        <InfoEle>{preferHeight}</InfoEle>
-        <InfoEle>{preferUniversities}</InfoEle>
+        <InfoEle>
+          {preferAge[0]}~{preferAge[1]}살
+        </InfoEle>
+        <FlexEle>
+          {preferDepartments?.map((department, index) => (
+            <div key={department + preferDepartments}>
+              {addComma(index)}
+              {conversionDepartment(department)}
+            </div>
+          ))}
+        </FlexEle>
+        <InfoEle>
+          {preferHeight[0]}~{preferHeight[1]}cm
+        </InfoEle>
       </InfoBox>
     </div>
   );
diff --git a/src/components/header/MenuBlock.tsx b/src/components/header/MenuBlock.tsx
index 8f27cb0..a23304b 100644
--- a/src/components/header/MenuBlock.tsx
+++ b/src/components/header/MenuBlock.tsx
@@ -23,7 +23,7 @@ const TempMeetingData: Meeting = {
   typeOfMeeting: 'ONE',
   gender: 'FEMALE',
   averageAge: 28,
-  ourUniversities: [],
+  ourUniversities: [1, 21, 3],
   ourDepartments: ['LIBERAL', 'SCIENCE'],
   averageHeight: 170,
   avoidUniversities: [],

From 6381d9f11387fe228a57faca6d6d5f21ed035d7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sun, 3 Jul 2022 22:39:02 +0900
Subject: [PATCH 72/82] =?UTF-8?q?Refactor:=20convert=20=EC=9C=A0=ED=8B=B8?=
 =?UTF-8?q?=20=ED=95=A8=EC=88=98=EB=93=A4=20import=20=ED=95=9C=EB=B2=88?=
 =?UTF-8?q?=EC=97=90=20=EB=B0=9B=EC=95=84=EC=98=A4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/header/DatingInfoBox.tsx  | 14 ++++++++------
 src/components/header/MeetingInfoBox.tsx | 16 +++++++++-------
 src/utils/converson/index.ts             |  9 +++++++++
 3 files changed, 26 insertions(+), 13 deletions(-)
 create mode 100644 src/utils/converson/index.ts

diff --git a/src/components/header/DatingInfoBox.tsx b/src/components/header/DatingInfoBox.tsx
index b4286a6..06ade16 100644
--- a/src/components/header/DatingInfoBox.tsx
+++ b/src/components/header/DatingInfoBox.tsx
@@ -1,12 +1,14 @@
 import { palette } from '@/lib/styles/palette';
 import { Dating } from '@/types/dating';
 import addCommaFunction from '@/utils/addCommaFunction';
-import { conversionBody } from '@/utils/converson/conversionBody';
-import { conversionCharacter } from '@/utils/converson/conversionCharacter';
-import { conversionDateCount } from '@/utils/converson/conversionDateCount';
-import { conversionDepartment } from '@/utils/converson/conversionDepartment';
-import { conversionDomesticArea } from '@/utils/converson/conversionDomesticArea';
-import { conversionGender } from '@/utils/converson/conversionGender';
+import {
+  conversionBody,
+  conversionCharacter,
+  conversionDateCount,
+  conversionDepartment,
+  conversionDomesticArea,
+  conversionGender,
+} from '@/utils/converson';
 import React from 'react';
 import styled from 'styled-components';
 
diff --git a/src/components/header/MeetingInfoBox.tsx b/src/components/header/MeetingInfoBox.tsx
index 4bfce78..dcafe88 100644
--- a/src/components/header/MeetingInfoBox.tsx
+++ b/src/components/header/MeetingInfoBox.tsx
@@ -1,12 +1,14 @@
+import React from 'react';
 import { Meeting } from '@/types/meeting';
 import addCommaFunction from '@/utils/addCommaFunction';
-import { conversionDepartment } from '@/utils/converson/conversionDepartment';
-import { conversionDomesticArea } from '@/utils/converson/conversionDomesticArea';
-import { conversionGender } from '@/utils/converson/conversionGender';
-import { conversionMindset } from '@/utils/converson/conversionMindset';
-import { conversionPlay } from '@/utils/converson/conversionPlay';
-import { conversionTypeOfMeeting } from '@/utils/converson/conversionTypeOfMeeting';
-import React from 'react';
+import {
+  conversionDepartment,
+  conversionDomesticArea,
+  conversionGender,
+  conversionMindset,
+  conversionPlay,
+  conversionTypeOfMeeting,
+} from '@/utils/converson';
 import { FlexEle, GroupLabel, InfoBox, InfoEle, InfoLabel } from './DatingInfoBox';
 
 interface MeetingInfoProps {
diff --git a/src/utils/converson/index.ts b/src/utils/converson/index.ts
new file mode 100644
index 0000000..2b996ba
--- /dev/null
+++ b/src/utils/converson/index.ts
@@ -0,0 +1,9 @@
+export * from './conversionBody';
+export * from './conversionCharacter';
+export * from './conversionDateCount';
+export * from './conversionDepartment';
+export * from './conversionDomesticArea';
+export * from './conversionGender';
+export * from './conversionMindset';
+export * from './conversionPlay';
+export * from './conversionTypeOfMeeting';

From 72b8befe8869180656a417f6d6b65eb224fd3c00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sun, 3 Jul 2022 22:48:00 +0900
Subject: [PATCH 73/82] =?UTF-8?q?Refactor:=20conversion=20import=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/domain/matching/EndBox.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/domain/matching/EndBox.tsx b/src/components/domain/matching/EndBox.tsx
index 9830f23..1215b95 100644
--- a/src/components/domain/matching/EndBox.tsx
+++ b/src/components/domain/matching/EndBox.tsx
@@ -4,10 +4,9 @@ import { schools } from '@/mock/schools';
 import { Meeting } from '@/types/meeting';
 import styled from 'styled-components';
 import KakaoCopyBox from './KakaoCopyBox';
-import addCommaFunction from '@/utils/addCommaFunction';
-import { conversionMindset } from '@/utils/converson/conversionMindset';
-import { conversionPlay } from '@/utils/converson/conversionPlay';
-import { conversionDepartment } from '@/utils/converson/conversionDepartment';
+import { conversionDepartment, conversionDomesticArea, conversionMindset, conversionPlay } from '@/utils/converson';
+import { addComma } from '@/utils/addComma';
+import { addCommaTail } from '@/utils/addCommaTail';
 
 const TempData: Meeting = {
   averageHeight: 175,
@@ -32,7 +31,6 @@ const TempData: Meeting = {
 };
 function EndBox() {
   const { kakaoId, averageAge, averageHeight, mindset, ourDepartments, ourUniversities, play } = TempData;
-  const { addComma, addTailComma } = addCommaFunction();
   return (
     <div>
       <MatchingInfoBox>
@@ -50,7 +48,7 @@ function EndBox() {
             {ourUniversities.map((univ, index) => (
               <p key={univ}>
                 {schools[univ].name}
-                {addTailComma(ourUniversities.length, index)}
+                {addCommaTail(ourUniversities.length, index)}
               </p>
             ))}
           </InfoText>
@@ -80,7 +78,7 @@ function EndBox() {
           {TempData.domesticAreas?.map((area, index) => (
             <InfoFlexText key={`${area}_${index}`}>
               {addComma(index)}
-              {conversionPlay(area)},
+              {conversionDomesticArea(area)},
             </InfoFlexText>
           ))}
         </FlexLine>

From 2c9fe4cbb2cc77c1f610427ea91a8124b8723fa5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sun, 3 Jul 2022 22:48:43 +0900
Subject: [PATCH 74/82] =?UTF-8?q?Refactor:=20addComma=20=EB=8B=A8=EC=9D=BC?=
 =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=EC=9C=BC=EB=A1=9C=20=EB=82=98=EB=88=84?=
 =?UTF-8?q?=EA=B3=A0=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/header/DatingInfoBox.tsx  |  3 +--
 src/components/header/MeetingInfoBox.tsx |  3 +--
 src/utils/addComma.ts                    |  4 ++++
 src/utils/addCommaFunction.ts            | 14 --------------
 src/utils/addCommaTail.ts                |  4 ++++
 5 files changed, 10 insertions(+), 18 deletions(-)
 create mode 100644 src/utils/addComma.ts
 delete mode 100644 src/utils/addCommaFunction.ts
 create mode 100644 src/utils/addCommaTail.ts

diff --git a/src/components/header/DatingInfoBox.tsx b/src/components/header/DatingInfoBox.tsx
index 06ade16..68e4104 100644
--- a/src/components/header/DatingInfoBox.tsx
+++ b/src/components/header/DatingInfoBox.tsx
@@ -1,6 +1,6 @@
 import { palette } from '@/lib/styles/palette';
 import { Dating } from '@/types/dating';
-import addCommaFunction from '@/utils/addCommaFunction';
+import { addComma } from '@/utils/addComma';
 import {
   conversionBody,
   conversionCharacter,
@@ -39,7 +39,6 @@ const DatingInfoBox = ({ dating }: DatingInfoProps) => {
     abroadAreas,
     //여까지 선호 조건
   } = dating;
-  const { addComma } = addCommaFunction();
   console.log(abroadAreas);
   return (
     <div>
diff --git a/src/components/header/MeetingInfoBox.tsx b/src/components/header/MeetingInfoBox.tsx
index dcafe88..4aa98a1 100644
--- a/src/components/header/MeetingInfoBox.tsx
+++ b/src/components/header/MeetingInfoBox.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Meeting } from '@/types/meeting';
-import addCommaFunction from '@/utils/addCommaFunction';
 import {
   conversionDepartment,
   conversionDomesticArea,
@@ -10,6 +9,7 @@ import {
   conversionTypeOfMeeting,
 } from '@/utils/converson';
 import { FlexEle, GroupLabel, InfoBox, InfoEle, InfoLabel } from './DatingInfoBox';
+import { addComma } from '@/utils/addComma';
 
 interface MeetingInfoProps {
   meeting: Meeting;
@@ -29,7 +29,6 @@ function MeetingInfoBox({ meeting }: MeetingInfoProps) {
     preferDepartments,
     preferHeight,
   } = meeting;
-  const { addComma } = addCommaFunction();
   return (
     <div>
       <GroupLabel>Team</GroupLabel>
diff --git a/src/utils/addComma.ts b/src/utils/addComma.ts
new file mode 100644
index 0000000..ae27aee
--- /dev/null
+++ b/src/utils/addComma.ts
@@ -0,0 +1,4 @@
+export const addComma = (index: number) => {
+  if (index === 0) return;
+  else return ',';
+};
diff --git a/src/utils/addCommaFunction.ts b/src/utils/addCommaFunction.ts
deleted file mode 100644
index a87e779..0000000
--- a/src/utils/addCommaFunction.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-const addCommaFunction = () => {
-  const addComma = (index: number) => {
-    if (index === 0) return;
-    else return ',';
-  };
-  const addTailComma = (arrayLength: number, index: number) => {
-    if (index === arrayLength - 1 || arrayLength === 0) return;
-    else return ',';
-  };
-
-  return { addComma, addTailComma };
-};
-
-export default addCommaFunction;
diff --git a/src/utils/addCommaTail.ts b/src/utils/addCommaTail.ts
new file mode 100644
index 0000000..188df01
--- /dev/null
+++ b/src/utils/addCommaTail.ts
@@ -0,0 +1,4 @@
+export const addCommaTail = (arrayLength: number, index: number) => {
+  if (index === arrayLength - 1 || arrayLength === 0) return;
+  else return ',';
+};

From f323f5a42c115c442dfebc225508c024e969c193 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sun, 3 Jul 2022 22:51:14 +0900
Subject: [PATCH 75/82] =?UTF-8?q?Chore:=20apiClient=20host=20VITE=5FSERVER?=
 =?UTF-8?q?=5FKEY=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/api/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts
index 302074d..283fe88 100644
--- a/src/lib/api/index.ts
+++ b/src/lib/api/index.ts
@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-const host = import.meta.env.VITE_KAKAO_JAVASCRIPT_KEY;
+const host = import.meta.env.VITE_SERVER_URL;
 const apiClient = axios.create({
   baseURL: host,
   withCredentials: false,

From ab1261bcab6f63643dd23400049d5e3efba0d20f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Tue, 5 Jul 2022 14:03:34 +0900
Subject: [PATCH 76/82] Feat: Matchig Dating Page

---
 src/router/Routing.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/router/Routing.tsx b/src/router/Routing.tsx
index a88cd58..022c8c0 100644
--- a/src/router/Routing.tsx
+++ b/src/router/Routing.tsx
@@ -84,6 +84,7 @@ function Routing() {
             </Route>
             <Route path={'/matching'} element={<UserHeader />}>
               <Route path={Path.MatchingMeeting} element={<MatchingPage />} />
+              <Route path={Path.MatchingDating} element={<MatchingPage />} />
             </Route>
             <Route path="*" element={<NotFound />} />
           </Routes>

From bdb95b167047a8296ea172efeeb43e803bfd432c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Tue, 5 Jul 2022 14:03:51 +0900
Subject: [PATCH 77/82] Feat: MatchingTemplete navigate Btn

---
 .../domain/matching/MatchingTemplete.tsx      | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/domain/matching/MatchingTemplete.tsx b/src/components/domain/matching/MatchingTemplete.tsx
index bff6adb..e75c5a1 100644
--- a/src/components/domain/matching/MatchingTemplete.tsx
+++ b/src/components/domain/matching/MatchingTemplete.tsx
@@ -1,23 +1,25 @@
-import React, { MouseEventHandler, ReactNode, useEffect, useState } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Button } from '@/components/base';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { Title } from '@/lib/styles/styledComponents';
 import CompleteButton from './buttons/CompleteButton';
 import EndButton from './buttons/EndButton';
 import NoneButton from './buttons/NoneButton';
 import WaitingButton from './buttons/WaitingButton';
 import SuccessButton from './buttons/SuccessButton';
+import Path from '@/router/Path';
 
 interface MatchingTemplateProps {
   children: ReactNode;
-  handleClick?: MouseEventHandler<HTMLButtonElement>;
   title: ReactNode;
   btnName: string;
 }
-const MatchingTemplete = ({ children, handleClick, btnName, title }: MatchingTemplateProps) => {
+const MatchingTemplete = ({ children, btnName, title }: MatchingTemplateProps) => {
   const location = useLocation();
   const [type, setType] = useState('meeting');
+  const navigate = useNavigate();
+
   useEffect(() => {
     location.pathname.includes('meeting') ? setType('meeting') : setType('dating');
   }, [location.pathname]);
@@ -26,10 +28,20 @@ const MatchingTemplete = ({ children, handleClick, btnName, title }: MatchingTem
     <TemplateBlock>
       <Title>{title}</Title>
       <ButtonWrapper>
-        <TypeButton onClick={handleClick} size="medium" variant={type === 'meeting' ? 'default' : 'gray'} fontWeight={type === 'dating' ? 700 : 400}>
+        <TypeButton
+          onClick={() => navigate(Path.MatchingMeeting)}
+          size="medium"
+          variant={type === 'meeting' ? 'default' : 'gray'}
+          fontWeight={type === 'dating' ? 700 : 400}
+        >
           미팅
         </TypeButton>
-        <TypeButton onClick={handleClick} size="medium" variant={type === 'dating' ? 'default' : 'gray'} fontWeight={type === 'dating' ? 700 : 400}>
+        <TypeButton
+          onClick={() => navigate(Path.MatchingDating)}
+          size="medium"
+          variant={type === 'dating' ? 'default' : 'gray'}
+          fontWeight={type === 'dating' ? 700 : 400}
+        >
           소개팅
         </TypeButton>
       </ButtonWrapper>

From ee09a06ef30f61fc0a5a76947bf142178b184a1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Tue, 5 Jul 2022 14:04:19 +0900
Subject: [PATCH 78/82] =?UTF-8?q?Feat:=20=EC=84=A4=EB=AC=B8=20=EC=A2=85?=
 =?UTF-8?q?=EB=A3=8C=20=ED=9B=84=20=EB=A7=A4=EC=B9=AD=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=9D=B4=EB=8F=99=20=EA=B8=B0=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/KakaoIdSurvey.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/pages/KakaoIdSurvey.tsx b/src/pages/KakaoIdSurvey.tsx
index d1c2c8d..fd12dd3 100644
--- a/src/pages/KakaoIdSurvey.tsx
+++ b/src/pages/KakaoIdSurvey.tsx
@@ -1,4 +1,4 @@
-import { Button, Input, Modal } from '@/components/base';
+import { Input, Modal } from '@/components/base';
 import { SurveyTemplate } from '@/components/domain/survey';
 import useToggle from '@/hooks/common/useToggle';
 import { palette } from '@/lib/styles/palette';
@@ -8,11 +8,13 @@ import styled from 'styled-components';
 import { FormWrapper } from './AuthMail';
 import Path from '@/router/Path';
 import { useMeetingNavigate } from '@/hooks/common/useMeetingNavigate';
+import { useNavigate } from 'react-router-dom';
 
 const KakaoIdSurvey = () => {
   const meetingNavigate = useMeetingNavigate();
   const [isModal, onToggleModal] = useToggle();
   const [kakaoID, setkakaoID] = useState('');
+  const navigate = useNavigate();
 
   return (
     <>
@@ -22,7 +24,7 @@ const KakaoIdSurvey = () => {
         currStep={14}
         totalStep={14}
         handlePrevClick={() => meetingNavigate(Path.AgreementSurvey)}
-        handleNextClick={() => alert('설문이 완료되었습니다. 정식 출시가 되면 매칭을 시작할 수 있습니다. 조금만 기다려 주세요.')}
+        handleNextClick={onToggleModal}
       >
         <Title>
           카톡 아이디를 <br />
@@ -44,9 +46,6 @@ const KakaoIdSurvey = () => {
             }}
           />
           <Explane>※'카톡 ID 검색 허용'으로 되어있어야 합니다.</Explane>
-          <Button width={100} onClick={onToggleModal}>
-            (임시 버튼)
-          </Button>
         </InputWrapper>
       </SurveyTemplate>
       {isModal && (
@@ -58,7 +57,7 @@ const KakaoIdSurvey = () => {
           text="　카톡아이디를 확인해 주세요.　상대에게 보여질 아아디입니다!"
           onToggleModal={onToggleModal}
           onClick={() => {
-            console.log('안녕하세용');
+            navigate(Path.MatchingMeeting);
           }}
         />
       )}

From c9a5fb2d1a27c88fd086e3995ef728cedc6d2439 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Tue, 5 Jul 2022 14:05:02 +0900
Subject: [PATCH 79/82] =?UTF-8?q?Style:=20margin-top=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/domain/survey/ChooseTwoBox.tsx | 1 -
 src/pages/IsAbroadSurvey.tsx                  | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/domain/survey/ChooseTwoBox.tsx b/src/components/domain/survey/ChooseTwoBox.tsx
index 10b18a8..e735eaa 100644
--- a/src/components/domain/survey/ChooseTwoBox.tsx
+++ b/src/components/domain/survey/ChooseTwoBox.tsx
@@ -39,7 +39,6 @@ const ChooseTwoBox = ({ selectedOption, onChangeOption, children, items, size =
 
 const Container = styled.section`
   width: 100%;
-  margin-top: 67px;
 `;
 
 const ButtonWrapper = styled.div`
diff --git a/src/pages/IsAbroadSurvey.tsx b/src/pages/IsAbroadSurvey.tsx
index 94c86eb..ee46ba9 100644
--- a/src/pages/IsAbroadSurvey.tsx
+++ b/src/pages/IsAbroadSurvey.tsx
@@ -50,6 +50,7 @@ const IsAbroadSurvey = () => {
 
 const BtnWrapper = styled(FormWrapper)`
   display: flex;
+  margin-top: 0px;
 `;
 
 export default IsAbroadSurvey;

From 1394687b6aa46013a0b324cc2be6572ac8c59cfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Tue, 5 Jul 2022 14:05:25 +0900
Subject: [PATCH 80/82] =?UTF-8?q?Feat:=20Path=20Matching/Dating=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/Path.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/router/Path.ts b/src/router/Path.ts
index 97cf7ae..d63d738 100644
--- a/src/router/Path.ts
+++ b/src/router/Path.ts
@@ -26,7 +26,8 @@ enum Path {
   PreferDepartmentCharacterSurvey = 'prefer-dprt-character',
   PreferBodyDateCountSurvey = 'prefer-body-dcount',
   OauthKakao = '/oauth/kakao',
-  MatchingMeeting = 'meeting',
+  MatchingMeeting = '/matching/meeting',
+  MatchingDating = '/matching/dating',
 }
 
 export default Path;

From 497db52202af8c896624d9b0d4bcba4bbed3ebc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sun, 10 Jul 2022 01:35:59 +0900
Subject: [PATCH 81/82] =?UTF-8?q?Chore:=20genderAge=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=82=BD=EC=9E=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/atoms/meetingState.ts            | 2 +-
 src/pages/GenderAverageAgeSurvey.tsx | 7 ++++++-
 src/pages/KakaoIdSurvey.tsx          | 3 +++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/atoms/meetingState.ts b/src/atoms/meetingState.ts
index ba8891c..c16857b 100644
--- a/src/atoms/meetingState.ts
+++ b/src/atoms/meetingState.ts
@@ -29,7 +29,7 @@ const INITIAL_MEETING_STATE: Meeting = {
   kakaoId: '',
 };
 
-const meetingState = atom<Meeting>({
+export const meetingState = atom<Meeting>({
   key: 'meetingState',
   default: INITIAL_MEETING_STATE,
   effects_UNSTABLE: [persistAtom],
diff --git a/src/pages/GenderAverageAgeSurvey.tsx b/src/pages/GenderAverageAgeSurvey.tsx
index d1f23f7..97e64d9 100644
--- a/src/pages/GenderAverageAgeSurvey.tsx
+++ b/src/pages/GenderAverageAgeSurvey.tsx
@@ -9,6 +9,9 @@ import { useNavigate } from 'react-router-dom';
 import { GENDER_ITEMS } from '@/types/constants/constant';
 import { useMeetingSessionState } from '@/hooks/common';
 import { type Gender } from '@/types/meeting';
+import { useRecoilValue } from 'recoil';
+import { meetingState } from '@/atoms/meetingState';
+import { conversionTypeOfMeeting } from '@/utils/converson';
 
 const GenderAverageAgeSurvey = () => {
   const navigate = useNavigate();
@@ -16,6 +19,8 @@ const GenderAverageAgeSurvey = () => {
   const { initMeetingState, setMeetingData } = useMeetingSessionState();
   const [genderOption, setGenderOption] = useState(initMeetingState.gender);
   const [ageOption, setAgeOption] = useState(initMeetingState.averageAge);
+  const meetingData = useRecoilValue(meetingState);
+  const { typeOfMeeting } = meetingData;
   const onChangeOption = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { id } = e.target;
     setGenderOption(id as Gender);
@@ -37,7 +42,7 @@ const GenderAverageAgeSurvey = () => {
       handleNextClick={handleNextClick}
     >
       <StyledTitle>
-        <strong>2:2 미팅</strong>을 선택하셨어요.
+        <strong>{conversionTypeOfMeeting(typeOfMeeting)}</strong>을 선택하셨어요.
         <br />
         몇가지 질문만 대답하시면
         <br />
diff --git a/src/pages/KakaoIdSurvey.tsx b/src/pages/KakaoIdSurvey.tsx
index 294011b..3a5959f 100644
--- a/src/pages/KakaoIdSurvey.tsx
+++ b/src/pages/KakaoIdSurvey.tsx
@@ -10,6 +10,8 @@ import Path from '@/router/Path';
 import { useMatch, useNavigate } from 'react-router-dom';
 import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useNavigate';
 import { useMeetingSessionState, useDatingSessionState } from '@/hooks/common';
+// import { useRecoilValue } from 'recoil';
+// import { meetingState } from '@/atoms/meetingState';
 
 const KakaoIdSurvey = () => {
   const matchMeeting = useMatch('/meeting/*');
@@ -20,6 +22,7 @@ const KakaoIdSurvey = () => {
   const navigate = useNavigate();
   const [kakaoId, setkakaoId] = useState(matchMeeting ? initMeetingState.kakaoId : initDatingState.kakaoId);
   const [isConfirm, setConfirm] = useState(false);
+  // const meetingData = useRecoilValue(meetingState); 나중에 이걸로 data post
 
   const handleNextClick = () => {
     if (initMeetingState) {

From 11498f16c315bce11cc3cc810bc2c30c698ddd9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= <cctv1998@naver.com>
Date: Sun, 10 Jul 2022 13:52:26 +0900
Subject: [PATCH 82/82] =?UTF-8?q?Chore:=20=EC=9E=84=EC=8B=9C=20=EC=BB=A4?=
 =?UTF-8?q?=EB=B0=8B=20(=ED=85=8C=EC=8A=A4=ED=8A=B8=EC=9A=A9=20=EC=9E=85?=
 =?UTF-8?q?=EB=8B=88=EB=8B=A4)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../domain/landing/LandingContainer.tsx       |  8 +++--
 src/pages/OauthKakao.tsx                      | 30 +++++++++++++++++--
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/components/domain/landing/LandingContainer.tsx b/src/components/domain/landing/LandingContainer.tsx
index 0c35438..5550bf9 100644
--- a/src/components/domain/landing/LandingContainer.tsx
+++ b/src/components/domain/landing/LandingContainer.tsx
@@ -20,6 +20,8 @@ function LandingContainer() {
 
     const loginUrl = import.meta.env.VITE_KAKAO_OPEN_URL.replace('{clientId}', clientId).replace('{redirectUri}', redirectUri);
     window.location.href = loginUrl;
+    // const code = new URL(window.location.href).searchParams.get('code');
+    // console.log(code);
   };
 
   return (
@@ -50,9 +52,9 @@ function LandingContainer() {
           >
             시작하기
           </LandingBtn>
-          {/*<LandingBtn size="medium" fontWeight={700} fullWidth variant={'grayBlack'} onClick={() => setIsLogin((prev) => !prev)}>*/}
-          {/*  응답 수정하기*/}
-          {/*</LandingBtn>*/}
+          <LandingBtn size="medium" fontWeight={700} fullWidth variant={'grayBlack'} onClick={() => setIsLogin((prev) => !prev)}>
+            응답 수정하기
+          </LandingBtn>
         </BtnBox>
       )}
       {isModal && (
diff --git a/src/pages/OauthKakao.tsx b/src/pages/OauthKakao.tsx
index 2bbb78e..03dcea0 100644
--- a/src/pages/OauthKakao.tsx
+++ b/src/pages/OauthKakao.tsx
@@ -1,7 +1,33 @@
-import React from 'react';
+import client from '@/lib/api';
+import qs from 'qs';
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 const OauthKakao = () => {
-  return <div></div>;
+  const [token, setToken] = useState('');
+  const code = new URL(window.location.href).searchParams.get('code');
+  const navigate = useNavigate();
+  useEffect(() => {
+    const getToken = async () => {
+      const response = await client.get(`/oauth/kakao?code=${code}`);
+      setToken(response.data);
+      // setToken을 세션에 넣는 로직으로 변경
+    };
+    getToken();
+    // navigate('/');
+  }, []);
+  console.log(token);
+
+  // const getToken = async () => {
+  //   const payload = qs.stringify({
+  //     grant_type: "authorization_code",
+  //     client_id: REST_API_KEY,
+  //     redirect_uri: REDIRECT_URI,
+  //     code: code,s
+  //     client_secret: CLIENT_SECRET,
+  //   });
+  // get(oauth/kakao?code=3yk5-JBiG4p3CVxzPJV32WoJqfE220Kjar9XA2Aemd9TbTKQxkxAyILMZaXcC-_Rj4jLrQo9dVwAAAGBv0F2KQ)
+  return <div>{token}</div>;
 };
 
 export default OauthKakao;