From 99cf70d42eabc7ffe28a488bc9ff34a01017dd4d Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Thu, 20 Jun 2024 21:51:52 +0900
Subject: [PATCH 01/62] =?UTF-8?q?chore:=20=ED=8C=8C=EC=9D=BC=20=EC=A0=95?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/atoms/atom.ts                             |  3 +-
 src/components/TestComponents.tsx             | 42 -------------------
 .../scheduleComponents/components/Column.tsx  |  0
 .../components/PriorityDropdown.tsx           |  0
 .../scheduleComponents/components/Row.tsx     |  0
 .../components/TimeTable.tsx                  |  0
 .../scheduleComponents/data/availableDates.ts |  0
 .../scheduleComponents/data/preferTimes.ts    |  0
 .../data/selectedSchedule.ts                  |  0
 .../types/AvailableScheduleType.ts            |  0
 .../utils/IsContainingAfternoon.ts            |  0
 .../scheduleComponents/utils/compareTime.ts   |  0
 .../scheduleComponents/utils/getTimeSlots.ts  |  0
 .../utils/isMorningDinner.ts                  |  0
 .../utils/priorityToColor.ts                  |  0
 src/pages/ApiTesting.tsx                      | 20 ---------
 .../OverallSchedule/components/Column.tsx     |  6 +--
 src/pages/OverallSchedule/components/Row.tsx  |  7 ++--
 .../OverallSchedule/components/TimeTable.tsx  |  8 ++--
 src/pages/SteppingStone/SteppingLayout.tsx    |  1 -
 src/pages/Test.tsx                            |  5 +++
 .../selectSchedule/SelectPriorityPage.tsx     | 19 ++++-----
 .../selectSchedule/SelectSchedulePage.tsx     |  6 +--
 .../components/EndTimeSelect.tsx              |  9 ++--
 .../components/SelectSchedule.tsx             |  2 +-
 .../selectSchedule/components/TimeSelect.tsx  |  7 ++--
 26 files changed, 36 insertions(+), 99 deletions(-)
 delete mode 100644 src/components/TestComponents.tsx
 rename src/components/{ => legacy}/scheduleComponents/components/Column.tsx (100%)
 rename src/components/{ => legacy}/scheduleComponents/components/PriorityDropdown.tsx (100%)
 rename src/components/{ => legacy}/scheduleComponents/components/Row.tsx (100%)
 rename src/components/{ => legacy}/scheduleComponents/components/TimeTable.tsx (100%)
 rename src/components/{ => legacy}/scheduleComponents/data/availableDates.ts (100%)
 rename src/components/{ => legacy}/scheduleComponents/data/preferTimes.ts (100%)
 rename src/components/{ => legacy}/scheduleComponents/data/selectedSchedule.ts (100%)
 rename src/components/{ => legacy}/scheduleComponents/types/AvailableScheduleType.ts (100%)
 rename src/components/{ => legacy}/scheduleComponents/utils/IsContainingAfternoon.ts (100%)
 rename src/components/{ => legacy}/scheduleComponents/utils/compareTime.ts (100%)
 rename src/components/{ => legacy}/scheduleComponents/utils/getTimeSlots.ts (100%)
 rename src/components/{ => legacy}/scheduleComponents/utils/isMorningDinner.ts (100%)
 rename src/components/{ => legacy}/scheduleComponents/utils/priorityToColor.ts (100%)
 delete mode 100644 src/pages/ApiTesting.tsx
 create mode 100644 src/pages/Test.tsx

diff --git a/src/atoms/atom.ts b/src/atoms/atom.ts
index 8cc76349..0ad340b2 100644
--- a/src/atoms/atom.ts
+++ b/src/atoms/atom.ts
@@ -1,5 +1,6 @@
-import { PreferTime } from 'components/scheduleComponents/types/AvailableScheduleType';
 import { DateStates, ScheduleStates, TimeStates } from 'pages/selectSchedule/types/Schedule';
+
+import { PreferTime } from 'components/legacy/scheduleComponents/types/AvailableScheduleType';
 import { atom } from 'recoil';
 
 export const methodStateAtom = atom<boolean>({
diff --git a/src/components/TestComponents.tsx b/src/components/TestComponents.tsx
deleted file mode 100644
index 4c4b3f2c..00000000
--- a/src/components/TestComponents.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { HostAvailableSchduleRequestType } from 'src/types/createAvailableSchduleType';
-import styled from 'styled-components';
-import { hostAvailableApi } from 'utils/apis/createHostAvailableSchedule';
-
-const TestComponents = () => {
-  const [apiData, setApiData] = useState<HostAvailableSchduleRequestType[]>([
-    {
-      id: '1',
-      month: '07',
-      day: '06',
-      dayOfWeek: '목',
-      startTime: '09:00',
-      endTime: '11:00',
-      priority: 1,
-    },
-  ]);
-  const meetingId = 'MTEy';
-
-  console.log(apiData);
-  const apiTest = async () => {
-    try {
-      const { data } = await hostAvailableApi(meetingId, apiData);
-      console.log(data);
-    } catch (e) {
-      console.log(e);
-    }
-  };
-  apiTest();
-  useEffect(() => {}, []);
-
-  return <TestComponentsWrapper>test</TestComponentsWrapper>;
-};
-
-const TestComponentsWrapper = styled.div`
-  width: 10rem;
-  height: 10rem;
-  color: white;
-`;
-
-export default TestComponents;
diff --git a/src/components/scheduleComponents/components/Column.tsx b/src/components/legacy/scheduleComponents/components/Column.tsx
similarity index 100%
rename from src/components/scheduleComponents/components/Column.tsx
rename to src/components/legacy/scheduleComponents/components/Column.tsx
diff --git a/src/components/scheduleComponents/components/PriorityDropdown.tsx b/src/components/legacy/scheduleComponents/components/PriorityDropdown.tsx
similarity index 100%
rename from src/components/scheduleComponents/components/PriorityDropdown.tsx
rename to src/components/legacy/scheduleComponents/components/PriorityDropdown.tsx
diff --git a/src/components/scheduleComponents/components/Row.tsx b/src/components/legacy/scheduleComponents/components/Row.tsx
similarity index 100%
rename from src/components/scheduleComponents/components/Row.tsx
rename to src/components/legacy/scheduleComponents/components/Row.tsx
diff --git a/src/components/scheduleComponents/components/TimeTable.tsx b/src/components/legacy/scheduleComponents/components/TimeTable.tsx
similarity index 100%
rename from src/components/scheduleComponents/components/TimeTable.tsx
rename to src/components/legacy/scheduleComponents/components/TimeTable.tsx
diff --git a/src/components/scheduleComponents/data/availableDates.ts b/src/components/legacy/scheduleComponents/data/availableDates.ts
similarity index 100%
rename from src/components/scheduleComponents/data/availableDates.ts
rename to src/components/legacy/scheduleComponents/data/availableDates.ts
diff --git a/src/components/scheduleComponents/data/preferTimes.ts b/src/components/legacy/scheduleComponents/data/preferTimes.ts
similarity index 100%
rename from src/components/scheduleComponents/data/preferTimes.ts
rename to src/components/legacy/scheduleComponents/data/preferTimes.ts
diff --git a/src/components/scheduleComponents/data/selectedSchedule.ts b/src/components/legacy/scheduleComponents/data/selectedSchedule.ts
similarity index 100%
rename from src/components/scheduleComponents/data/selectedSchedule.ts
rename to src/components/legacy/scheduleComponents/data/selectedSchedule.ts
diff --git a/src/components/scheduleComponents/types/AvailableScheduleType.ts b/src/components/legacy/scheduleComponents/types/AvailableScheduleType.ts
similarity index 100%
rename from src/components/scheduleComponents/types/AvailableScheduleType.ts
rename to src/components/legacy/scheduleComponents/types/AvailableScheduleType.ts
diff --git a/src/components/scheduleComponents/utils/IsContainingAfternoon.ts b/src/components/legacy/scheduleComponents/utils/IsContainingAfternoon.ts
similarity index 100%
rename from src/components/scheduleComponents/utils/IsContainingAfternoon.ts
rename to src/components/legacy/scheduleComponents/utils/IsContainingAfternoon.ts
diff --git a/src/components/scheduleComponents/utils/compareTime.ts b/src/components/legacy/scheduleComponents/utils/compareTime.ts
similarity index 100%
rename from src/components/scheduleComponents/utils/compareTime.ts
rename to src/components/legacy/scheduleComponents/utils/compareTime.ts
diff --git a/src/components/scheduleComponents/utils/getTimeSlots.ts b/src/components/legacy/scheduleComponents/utils/getTimeSlots.ts
similarity index 100%
rename from src/components/scheduleComponents/utils/getTimeSlots.ts
rename to src/components/legacy/scheduleComponents/utils/getTimeSlots.ts
diff --git a/src/components/scheduleComponents/utils/isMorningDinner.ts b/src/components/legacy/scheduleComponents/utils/isMorningDinner.ts
similarity index 100%
rename from src/components/scheduleComponents/utils/isMorningDinner.ts
rename to src/components/legacy/scheduleComponents/utils/isMorningDinner.ts
diff --git a/src/components/scheduleComponents/utils/priorityToColor.ts b/src/components/legacy/scheduleComponents/utils/priorityToColor.ts
similarity index 100%
rename from src/components/scheduleComponents/utils/priorityToColor.ts
rename to src/components/legacy/scheduleComponents/utils/priorityToColor.ts
diff --git a/src/pages/ApiTesting.tsx b/src/pages/ApiTesting.tsx
deleted file mode 100644
index 6a3540cc..00000000
--- a/src/pages/ApiTesting.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// import { useEffect } from 'react';
-
-// import { createMeetingApi } from 'utils/apis/createMeetingApi';
-
-const createMeetingRequestExample = {
-  title: 'ASAP 회의',
-  availableDates: ['2023/04/23/MON'],
-  preferTimes: [
-    {
-      startTime: '06:00',
-      endTime: '12:00',
-    },
-  ],
-  place: 'ONLINE',
-  placeDetail: 'zoom',
-  duration: 'HALF',
-  name: '서지원',
-  password: '0702',
-  additionalInfo: '추가 공지사항',
-};
diff --git a/src/pages/OverallSchedule/components/Column.tsx b/src/pages/OverallSchedule/components/Column.tsx
index 9f59786e..f2ba41db 100644
--- a/src/pages/OverallSchedule/components/Column.tsx
+++ b/src/pages/OverallSchedule/components/Column.tsx
@@ -1,10 +1,10 @@
 import { clickedTimeSlotAtom, timeSlotUserNameAtom } from 'atoms/atom';
-import { ColumnProps } from 'components/scheduleComponents/types/AvailableScheduleType';
 import { useRecoilState, useSetRecoilState } from 'recoil';
-import styled from 'styled-components';
-import { theme } from 'styles/theme';
 
+import { ColumnProps } from 'components/legacy/scheduleComponents/types/AvailableScheduleType';
 import { filterUserNames } from '../utils/setUserNames';
+import styled from 'styled-components';
+import { theme } from 'styles/theme';
 
 const Column = (props: ColumnProps) => {
   const setTimeSlotUserName = useSetRecoilState(timeSlotUserNameAtom);
diff --git a/src/pages/OverallSchedule/components/Row.tsx b/src/pages/OverallSchedule/components/Row.tsx
index 7db6bffe..6c29b7fc 100644
--- a/src/pages/OverallSchedule/components/Row.tsx
+++ b/src/pages/OverallSchedule/components/Row.tsx
@@ -1,11 +1,10 @@
+import Column from './Column';
 import Text from 'components/atomComponents/Text';
-import getTimeSlots from 'components/scheduleComponents/utils/getTimeSlots';
+import { filterUserNames } from '../utils/setUserNames';
+import getTimeSlots from 'components/legacy/scheduleComponents/utils/getTimeSlots';
 import styled from 'styled-components';
 import { theme } from 'styles/theme';
 
-import Column from './Column';
-import { filterUserNames } from '../utils/setUserNames';
-
 interface TimeSlot{
   time:string;
   userNames:string[];
diff --git a/src/pages/OverallSchedule/components/TimeTable.tsx b/src/pages/OverallSchedule/components/TimeTable.tsx
index 51c537f9..1e6d7b6f 100644
--- a/src/pages/OverallSchedule/components/TimeTable.tsx
+++ b/src/pages/OverallSchedule/components/TimeTable.tsx
@@ -1,14 +1,12 @@
+import { DateStates, TimeStates } from 'pages/selectSchedule/types/Schedule';
 
 import React from 'react';
-
+import Row from './Row';
 import Text from 'components/atomComponents/Text';
-import getTimeSlots from 'components/scheduleComponents/utils/getTimeSlots';
-import { DateStates, TimeStates } from 'pages/selectSchedule/types/Schedule';
+import getTimeSlots from 'components/legacy/scheduleComponents/utils/getTimeSlots';
 import { styled } from 'styled-components';
 import { theme } from 'styles/theme';
 
-import Row from './Row';
-
 interface TimeTableProps {
   selectedSchedule?: SelectedSchedule[];
   availableDates: DateStates[];
diff --git a/src/pages/SteppingStone/SteppingLayout.tsx b/src/pages/SteppingStone/SteppingLayout.tsx
index b7f21bb4..f5d0a208 100644
--- a/src/pages/SteppingStone/SteppingLayout.tsx
+++ b/src/pages/SteppingStone/SteppingLayout.tsx
@@ -39,7 +39,6 @@ function SteppingLayout({ steppingType }: SteppingProps) {
   );
 
   const handlePopstate = () => {
-    alert('handle 작동');
     navigate('/');
   };
 
diff --git a/src/pages/Test.tsx b/src/pages/Test.tsx
new file mode 100644
index 00000000..4e6c8213
--- /dev/null
+++ b/src/pages/Test.tsx
@@ -0,0 +1,5 @@
+function Test() {
+  return <div>Test</div>;
+}
+
+export default Test;
diff --git a/src/pages/selectSchedule/SelectPriorityPage.tsx b/src/pages/selectSchedule/SelectPriorityPage.tsx
index 93b308ae..ae84fa62 100644
--- a/src/pages/selectSchedule/SelectPriorityPage.tsx
+++ b/src/pages/selectSchedule/SelectPriorityPage.tsx
@@ -1,19 +1,18 @@
 import React, { useEffect, useState } from 'react';
-
 import { availableDatesAtom, preferTimesAtom, scheduleAtom } from 'atoms/atom';
-import axios from 'axios';
+import { useNavigate, useParams } from 'react-router-dom';
+
 import Button from 'components/atomComponents/Button';
-import Text from 'components/atomComponents/Text';
 import Header from 'components/moleculesComponents/Header';
-import PriorityDropdown from 'components/scheduleComponents/components/PriorityDropdown';
-import TimeTable from 'components/scheduleComponents/components/TimeTable';
-import { useNavigate, useParams } from 'react-router-dom';
-import { useRecoilState } from 'recoil';
+import PriorityDropdown from 'components/legacy/scheduleComponents/components/PriorityDropdown';
+import SelectModal from './SelectModal';
+import Text from 'components/atomComponents/Text';
+import TimeTable from 'components/legacy/scheduleComponents/components/TimeTable';
+import { availableScheduleOptionApi } from 'utils/apis/availbleScheduleOptionApi';
+import axios from 'axios';
 import styled from 'styled-components';
 import { theme } from 'styles/theme';
-import { availableScheduleOptionApi } from 'utils/apis/availbleScheduleOptionApi';
-
-import SelectModal from './SelectModal';
+import { useRecoilState } from 'recoil';
 
 const SelectSchedulePriority = () => {
   const [availableDates, setAvailableDates] = useRecoilState(availableDatesAtom);
diff --git a/src/pages/selectSchedule/SelectSchedulePage.tsx b/src/pages/selectSchedule/SelectSchedulePage.tsx
index cb5b3066..639e117e 100644
--- a/src/pages/selectSchedule/SelectSchedulePage.tsx
+++ b/src/pages/selectSchedule/SelectSchedulePage.tsx
@@ -5,8 +5,8 @@ import axios from 'axios';
 import Button from 'components/atomComponents/Button';
 import Text from 'components/atomComponents/Text';
 import { PlusIc } from 'components/Icon/icon';
+import TimeTable from 'components/legacy/scheduleComponents/components/TimeTable';
 import Header from 'components/moleculesComponents/Header';
-import TimeTable from 'components/scheduleComponents/components/TimeTable';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 import { MeetingDetail } from 'src/types/availbleScheduleType';
@@ -269,9 +269,9 @@ const StyledBtnSection = styled.section`
   bottom: 0;
   align-items: end;
   justify-content: center;
-  background: ${({ theme }) => theme.colors.dim_gradient};
 
-  margin-top:3rem;
+  margin-top: 3rem;
+  background: ${({ theme }) => theme.colors.dim_gradient};
   padding-bottom: 2.9rem;
 
   width: 100%;
diff --git a/src/pages/selectSchedule/components/EndTimeSelect.tsx b/src/pages/selectSchedule/components/EndTimeSelect.tsx
index fdbc07ca..8fb804fa 100644
--- a/src/pages/selectSchedule/components/EndTimeSelect.tsx
+++ b/src/pages/selectSchedule/components/EndTimeSelect.tsx
@@ -1,14 +1,13 @@
+import { ScheduleStates, TimeStates } from '../types/Schedule';
 import { useEffect, useRef, useState } from 'react';
 
+import EndTimeDropDown from './EndTimeDropDown';
 import Text from 'components/atomComponents/Text';
-import getTimeSlots from 'components/scheduleComponents/utils/getTimeSlots';
+import { addThirtyMinutesToLastElement } from '../utils/addThirtyMinutesToLastElement';
+import getTimeSlots from 'components/legacy/scheduleComponents/utils/getTimeSlots';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
 
-import EndTimeDropDown from './EndTimeDropDown';
-import { ScheduleStates, TimeStates } from '../types/Schedule';
-import { addThirtyMinutesToLastElement } from '../utils/addThirtyMinutesToLastElement';
-
 interface PropTypes {
   text: string;
   id: number;
diff --git a/src/pages/selectSchedule/components/SelectSchedule.tsx b/src/pages/selectSchedule/components/SelectSchedule.tsx
index 75a1f96c..ffa1f673 100644
--- a/src/pages/selectSchedule/components/SelectSchedule.tsx
+++ b/src/pages/selectSchedule/components/SelectSchedule.tsx
@@ -1,7 +1,7 @@
 import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 import { ExitIc } from 'components/Icon/icon';
-import { compareTime } from 'components/scheduleComponents/utils/compareTime';
+import { compareTime } from 'components/legacy/scheduleComponents/utils/compareTime';
 import styled from 'styled-components/macro';
 
 import DateSelect from './DateSelect';
diff --git a/src/pages/selectSchedule/components/TimeSelect.tsx b/src/pages/selectSchedule/components/TimeSelect.tsx
index 68956179..740ab053 100644
--- a/src/pages/selectSchedule/components/TimeSelect.tsx
+++ b/src/pages/selectSchedule/components/TimeSelect.tsx
@@ -1,13 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { ScheduleStates, TimeStates } from '../types/Schedule';
 
 import Text from 'components/atomComponents/Text';
-import getTimeSlots from 'components/scheduleComponents/utils/getTimeSlots';
+import TimeDropDown from './TimeDropDown';
+import getTimeSlots from 'components/legacy/scheduleComponents/utils/getTimeSlots';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
 
-import TimeDropDown from './TimeDropDown';
-import { ScheduleStates, TimeStates } from '../types/Schedule';
-
 interface PropTypes {
   text: string;
   id: number;

From c2147fa7ffda82216adba1e26ba67ccaf46efc54 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Thu, 20 Jun 2024 21:53:26 +0900
Subject: [PATCH 02/62] =?UTF-8?q?chore:=20=ED=8C=8C=EC=9D=BC=20=EC=A0=95?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Router.tsx                                |   5 +-
 src/atoms/atom.ts                             |   2 +-
 .../components/PriorityDropdown.tsx           |   8 +-
 .../components/TimeTable.tsx                  |  10 +-
 src/pages/ComponentTesting.tsx                | 170 ------------------
 .../OverallSchedule/components/TimeTable.tsx  |   2 +-
 .../selectSchedule/SelectModal.tsx            |   0
 .../selectSchedule/SelectPriorityPage.tsx     |   0
 .../selectSchedule/SelectSchedulePage.tsx     |   0
 .../components/DateDropDown.tsx               |   0
 .../selectSchedule/components/DateSelect.tsx  |   0
 .../components/EndTimeDropDown.tsx            |   0
 .../components/EndTimeSelect.tsx              |   0
 .../components/SelectSchedule.tsx             |   0
 .../components/TimeDropDown.tsx               |   0
 .../selectSchedule/components/TimeSelect.tsx  |   0
 .../selectSchedule/components/dummyData.ts    |   0
 .../selectSchedule}/selectTime/SelectTime.tsx |   0
 .../selectSchedule/types/Schedule.ts          |   0
 .../utils/addThirtyMinutesToLastElement.ts    |   0
 .../selectSchedule/utils/changeApiReq.ts      |   0
 src/types/availbleScheduleType.ts             |   2 +-
 22 files changed, 15 insertions(+), 184 deletions(-)
 delete mode 100644 src/pages/ComponentTesting.tsx
 rename src/pages/{ => legacy}/selectSchedule/SelectModal.tsx (100%)
 rename src/pages/{ => legacy}/selectSchedule/SelectPriorityPage.tsx (100%)
 rename src/pages/{ => legacy}/selectSchedule/SelectSchedulePage.tsx (100%)
 rename src/pages/{ => legacy}/selectSchedule/components/DateDropDown.tsx (100%)
 rename src/pages/{ => legacy}/selectSchedule/components/DateSelect.tsx (100%)
 rename src/pages/{ => legacy}/selectSchedule/components/EndTimeDropDown.tsx (100%)
 rename src/pages/{ => legacy}/selectSchedule/components/EndTimeSelect.tsx (100%)
 rename src/pages/{ => legacy}/selectSchedule/components/SelectSchedule.tsx (100%)
 rename src/pages/{ => legacy}/selectSchedule/components/TimeDropDown.tsx (100%)
 rename src/pages/{ => legacy}/selectSchedule/components/TimeSelect.tsx (100%)
 rename src/pages/{ => legacy}/selectSchedule/components/dummyData.ts (100%)
 rename src/pages/{ => legacy/selectSchedule}/selectTime/SelectTime.tsx (100%)
 rename src/pages/{ => legacy}/selectSchedule/types/Schedule.ts (100%)
 rename src/pages/{ => legacy}/selectSchedule/utils/addThirtyMinutesToLastElement.ts (100%)
 rename src/pages/{ => legacy}/selectSchedule/utils/changeApiReq.ts (100%)

diff --git a/src/Router.tsx b/src/Router.tsx
index 976cea5b..680dbb8c 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -1,3 +1,5 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
 import ChooseBestTime from 'pages/BestMeetTime/ChooseBestTime';
 import CreateMeeting from 'pages/createMeeting/CreateMeeting';
 import CueCard from 'pages/cueCard/CueCard';
@@ -5,10 +7,9 @@ import ErrorPage404 from 'pages/ErrorLoading/ErrorPage404';
 import LoadingPage from 'pages/ErrorLoading/LoadingPage';
 import LoginEntrance from 'pages/LoginEntrance/LoginEntrance';
 import OnBoarding from 'pages/onBoarding/OnBoarding';
-import SelectSchedulePriority from 'pages/selectSchedule/SelectPriorityPage';
 import SelectPage from 'pages/selectSchedule/SelectSchedulePage';
+import SelectSchedulePriority from 'pages/legacy/selectSchedule/SelectPriorityPage';
 import SteppingLayout from 'pages/SteppingStone/SteppingLayout';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 const Router = () => {
   return (
diff --git a/src/atoms/atom.ts b/src/atoms/atom.ts
index 0ad340b2..cdd05ea2 100644
--- a/src/atoms/atom.ts
+++ b/src/atoms/atom.ts
@@ -1,4 +1,4 @@
-import { DateStates, ScheduleStates, TimeStates } from 'pages/selectSchedule/types/Schedule';
+import { DateStates, ScheduleStates, TimeStates } from 'pages/legacy/selectSchedule/types/Schedule';
 
 import { PreferTime } from 'components/legacy/scheduleComponents/types/AvailableScheduleType';
 import { atom } from 'recoil';
diff --git a/src/components/legacy/scheduleComponents/components/PriorityDropdown.tsx b/src/components/legacy/scheduleComponents/components/PriorityDropdown.tsx
index b6f2e576..0478a770 100644
--- a/src/components/legacy/scheduleComponents/components/PriorityDropdown.tsx
+++ b/src/components/legacy/scheduleComponents/components/PriorityDropdown.tsx
@@ -1,12 +1,12 @@
+import { Circle1Ic, Circle2Ic, Circle3Ic, DropDownIc, DropUpIc } from 'components/Icon/icon';
 import { useEffect, useState } from 'react';
 
-import { scheduleAtom } from 'atoms/atom';
+import { ScheduleStates } from 'pages/legacy/selectSchedule/types/Schedule';
 import Text from 'components/atomComponents/Text';
-import { Circle1Ic, Circle2Ic, Circle3Ic, DropDownIc, DropUpIc } from 'components/Icon/icon';
-import { ScheduleStates } from 'pages/selectSchedule/types/Schedule';
-import { useRecoilState } from 'recoil';
+import { scheduleAtom } from 'atoms/atom';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
+import { useRecoilState } from 'recoil';
 
 function PriorityDropdown() {
   const [scheduleList, setScheduleList] = useRecoilState<ScheduleStates[]>(scheduleAtom);
diff --git a/src/components/legacy/scheduleComponents/components/TimeTable.tsx b/src/components/legacy/scheduleComponents/components/TimeTable.tsx
index 22244736..591775d0 100644
--- a/src/components/legacy/scheduleComponents/components/TimeTable.tsx
+++ b/src/components/legacy/scheduleComponents/components/TimeTable.tsx
@@ -1,11 +1,11 @@
-import Text from 'components/atomComponents/Text';
-import { DateStates } from 'pages/selectSchedule/types/Schedule';
-import { styled } from 'styled-components';
-import { theme } from 'styles/theme';
+import { PreferTime, SelectedSchedule } from '../types/AvailableScheduleType';
 
+import { DateStates } from 'pages/legacy/selectSchedule/types/Schedule';
 import Row from './Row';
-import { PreferTime, SelectedSchedule } from '../types/AvailableScheduleType';
+import Text from 'components/atomComponents/Text';
 import getTimeSlots from '../utils/getTimeSlots';
+import { styled } from 'styled-components';
+import { theme } from 'styles/theme';
 
 interface TimeTableProps {
   selectedSchedule: SelectedSchedule[];
diff --git a/src/pages/ComponentTesting.tsx b/src/pages/ComponentTesting.tsx
deleted file mode 100644
index 22e52d43..00000000
--- a/src/pages/ComponentTesting.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import { useState } from 'react';
-
-import Button from 'components/atomComponents/Button';
-import PlaceInput from 'components/atomComponents/PlaceInput';
-import Text from 'components/atomComponents/Text';
-import TextAreaInput from 'components/atomComponents/TextAreaInput';
-import TextInput from 'components/atomComponents/TextInput';
-import {
-  MainLogoIc,
-  HambergerIc,
-  ExitIc,
-  InputCancelIc,
-  RadioCheckIc,
-  RadioCheckedIc,
-  BackIc,
-  PlusIc,
-  InputErrorIc,
-  DropDownIc,
-  DropUpIc,
-  PasswordOpenEyeIc,
-  PasswordEyeIc,
-  LinkIc,
-  PlaceIc,
-  ClockIc,
-  OnlinePlaceIc,
-  OfflinePlaceIc,
-  TimeIc,
-} from 'components/Icon/icon';
-import styled from 'styled-components/macro';
-import { theme } from 'styles/theme';
-
-const buttonType: string[] = [
-  'primaryActive',
-  'primaryDisabled',
-  'secondaryActive',
-  'secondaryDisabled',
-  'tertiaryActive',
-  'tertiaryDisabled',
-  'halfPrimaryActive',
-  'halfTertiaryActive',
-  'halfsecondaryDisabled',
-];
-
-const textComponentsType: string[] = [
-  'head2',
-  'title1',
-  'title2',
-  'body1',
-  'body2',
-  'body3',
-  'body4',
-  'head1',
-  'button1',
-  'button2',
-];
-
-function ComponentTesting() {
-  //TextInput component 사용시 useState 로 보내주기
-  // const [inputValue, setInputValue] = useState(``);
-  //TextAreaInput component 사용시 useState 로 보내주기
-  // const [textAreaValue, settextAreaValue] = useState(``);
-
-  return (
-    <>
-      <Wrapper>
-        <CategorySection>
-          <h1>SVG Component</h1>
-          <MainLogoIc />
-          <IconWrapper>
-            <HambergerIc />
-          </IconWrapper>
-          <IconWrapper>
-            <ExitIc />
-          </IconWrapper>
-          <InputCancelIc />
-          <InputErrorIc />
-          <RadioCheckIc />
-          <RadioCheckedIc />
-          <IconWrapper>
-            <BackIc />
-          </IconWrapper>
-          <PlusIc />
-          <DropDownIc />
-          <DropUpIc />
-          <PasswordEyeIc />
-          <PasswordOpenEyeIc />
-          <IconWrapper>
-            <LinkIc />
-          </IconWrapper>
-          <PlaceIc />
-          <ClockIc />
-          <OnlinePlaceIc />
-          <OfflinePlaceIc />
-          <TimeIc />
-        </CategorySection>
-        <CategorySection>
-          <h1>ReuseComponents</h1>
-          {/* <TextInput
-            value={inputValue}
-            setValue={setInputValue}
-            placeholder={'서비스 기획 1차 회의'}
-          />
-          <TextAreaInput
-            value={textAreaValue}
-            setValue={settextAreaValue}
-            placeholder={
-              '회의 안건, 준비물 등 회의와 관련하여 알리고 싶은 추가 내용을 적어 보세요.'
-            }
-          /> */}
-          {/* <PlaceInput /> */}
-        </CategorySection>
-        <CategorySection>
-          <h1>ReuseButton</h1>
-
-          {buttonType.map((type, i) => {
-            return (
-              <Button key={i} typeState={type} onClick={() => console.log(`${type}`)}>
-                <Text font={'button2'}>약속 생성하기</Text>
-              </Button>
-            );
-          })}
-        </CategorySection>
-        <CategorySection>
-          <h1>TextComponents</h1>
-          {textComponentsType.map((type, i) => {
-            return (
-              <Text key={i} font={type} color={`${theme.colors.black}`}>
-                Hello
-              </Text>
-            );
-          })}
-        </CategorySection>
-      </Wrapper>
-    </>
-  );
-}
-
-export default ComponentTesting;
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 2rem;
-  align-items: center;
-  justify-content: center;
-  margin-top: 1rem;
-
-  width: 100%;
-  height: 80rem;
-`;
-
-const CategorySection = styled.section`
-  display: flex;
-  flex-direction: column;
-
-  gap: 1rem;
-  align-items: center;
-  justify-content: flex-start;
-  margin-top: 2rem;
-
-  border: 2px solid ${({ theme }) => theme.colors.black};
-  padding: 1rem;
-
-  height: 100%;
-`;
-
-const IconWrapper = styled.div`
-  background-color: ${({ theme }) => theme.colors.black};
-  padding: 12.35px 11px;
-`;
diff --git a/src/pages/OverallSchedule/components/TimeTable.tsx b/src/pages/OverallSchedule/components/TimeTable.tsx
index 1e6d7b6f..a4592d0f 100644
--- a/src/pages/OverallSchedule/components/TimeTable.tsx
+++ b/src/pages/OverallSchedule/components/TimeTable.tsx
@@ -1,4 +1,4 @@
-import { DateStates, TimeStates } from 'pages/selectSchedule/types/Schedule';
+import { DateStates, TimeStates } from 'pages/legacy/selectSchedule/types/Schedule';
 
 import React from 'react';
 import Row from './Row';
diff --git a/src/pages/selectSchedule/SelectModal.tsx b/src/pages/legacy/selectSchedule/SelectModal.tsx
similarity index 100%
rename from src/pages/selectSchedule/SelectModal.tsx
rename to src/pages/legacy/selectSchedule/SelectModal.tsx
diff --git a/src/pages/selectSchedule/SelectPriorityPage.tsx b/src/pages/legacy/selectSchedule/SelectPriorityPage.tsx
similarity index 100%
rename from src/pages/selectSchedule/SelectPriorityPage.tsx
rename to src/pages/legacy/selectSchedule/SelectPriorityPage.tsx
diff --git a/src/pages/selectSchedule/SelectSchedulePage.tsx b/src/pages/legacy/selectSchedule/SelectSchedulePage.tsx
similarity index 100%
rename from src/pages/selectSchedule/SelectSchedulePage.tsx
rename to src/pages/legacy/selectSchedule/SelectSchedulePage.tsx
diff --git a/src/pages/selectSchedule/components/DateDropDown.tsx b/src/pages/legacy/selectSchedule/components/DateDropDown.tsx
similarity index 100%
rename from src/pages/selectSchedule/components/DateDropDown.tsx
rename to src/pages/legacy/selectSchedule/components/DateDropDown.tsx
diff --git a/src/pages/selectSchedule/components/DateSelect.tsx b/src/pages/legacy/selectSchedule/components/DateSelect.tsx
similarity index 100%
rename from src/pages/selectSchedule/components/DateSelect.tsx
rename to src/pages/legacy/selectSchedule/components/DateSelect.tsx
diff --git a/src/pages/selectSchedule/components/EndTimeDropDown.tsx b/src/pages/legacy/selectSchedule/components/EndTimeDropDown.tsx
similarity index 100%
rename from src/pages/selectSchedule/components/EndTimeDropDown.tsx
rename to src/pages/legacy/selectSchedule/components/EndTimeDropDown.tsx
diff --git a/src/pages/selectSchedule/components/EndTimeSelect.tsx b/src/pages/legacy/selectSchedule/components/EndTimeSelect.tsx
similarity index 100%
rename from src/pages/selectSchedule/components/EndTimeSelect.tsx
rename to src/pages/legacy/selectSchedule/components/EndTimeSelect.tsx
diff --git a/src/pages/selectSchedule/components/SelectSchedule.tsx b/src/pages/legacy/selectSchedule/components/SelectSchedule.tsx
similarity index 100%
rename from src/pages/selectSchedule/components/SelectSchedule.tsx
rename to src/pages/legacy/selectSchedule/components/SelectSchedule.tsx
diff --git a/src/pages/selectSchedule/components/TimeDropDown.tsx b/src/pages/legacy/selectSchedule/components/TimeDropDown.tsx
similarity index 100%
rename from src/pages/selectSchedule/components/TimeDropDown.tsx
rename to src/pages/legacy/selectSchedule/components/TimeDropDown.tsx
diff --git a/src/pages/selectSchedule/components/TimeSelect.tsx b/src/pages/legacy/selectSchedule/components/TimeSelect.tsx
similarity index 100%
rename from src/pages/selectSchedule/components/TimeSelect.tsx
rename to src/pages/legacy/selectSchedule/components/TimeSelect.tsx
diff --git a/src/pages/selectSchedule/components/dummyData.ts b/src/pages/legacy/selectSchedule/components/dummyData.ts
similarity index 100%
rename from src/pages/selectSchedule/components/dummyData.ts
rename to src/pages/legacy/selectSchedule/components/dummyData.ts
diff --git a/src/pages/selectTime/SelectTime.tsx b/src/pages/legacy/selectSchedule/selectTime/SelectTime.tsx
similarity index 100%
rename from src/pages/selectTime/SelectTime.tsx
rename to src/pages/legacy/selectSchedule/selectTime/SelectTime.tsx
diff --git a/src/pages/selectSchedule/types/Schedule.ts b/src/pages/legacy/selectSchedule/types/Schedule.ts
similarity index 100%
rename from src/pages/selectSchedule/types/Schedule.ts
rename to src/pages/legacy/selectSchedule/types/Schedule.ts
diff --git a/src/pages/selectSchedule/utils/addThirtyMinutesToLastElement.ts b/src/pages/legacy/selectSchedule/utils/addThirtyMinutesToLastElement.ts
similarity index 100%
rename from src/pages/selectSchedule/utils/addThirtyMinutesToLastElement.ts
rename to src/pages/legacy/selectSchedule/utils/addThirtyMinutesToLastElement.ts
diff --git a/src/pages/selectSchedule/utils/changeApiReq.ts b/src/pages/legacy/selectSchedule/utils/changeApiReq.ts
similarity index 100%
rename from src/pages/selectSchedule/utils/changeApiReq.ts
rename to src/pages/legacy/selectSchedule/utils/changeApiReq.ts
diff --git a/src/types/availbleScheduleType.ts b/src/types/availbleScheduleType.ts
index 44bc3704..720b26cb 100644
--- a/src/types/availbleScheduleType.ts
+++ b/src/types/availbleScheduleType.ts
@@ -1,4 +1,4 @@
-import { DateStates, TimeStates } from 'pages/selectSchedule/types/Schedule';
+import { DateStates, TimeStates } from 'pages/legacy/selectSchedule/types/Schedule';
 
 export interface AvailableScheduleOptionResponse {
   data: {

From ddbb872c8538227375b0b0a0f9a3cc08086bb5bf Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Thu, 20 Jun 2024 23:10:06 +0900
Subject: [PATCH 03/62] =?UTF-8?q?chore:=20pages=20=EB=82=B4=20=ED=8F=B4?=
 =?UTF-8?q?=EB=8D=94=20camelCase=EB=A1=9C=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Router.tsx                                | 17 +++++++--------
 src/pages/BestMeetTime/ChooseBestTime.tsx     |  4 ++--
 .../bestMeetTime/AlternativeCard.tsx          |  2 +-
 .../components/bestMeetTime/BestMeetTime.tsx  | 21 +++++++++----------
 .../components/bestMeetTime/BestTimeCard.tsx  |  4 ++--
 .../components/bestMeetTime/confirmModal.tsx  | 10 ++++-----
 src/pages/OverallSchedule/OverallSchedule.tsx |  4 ++--
 src/pages/Test.tsx                            |  8 ++++++-
 src/pages/cueCard/components/Qcard.tsx        | 13 ++++++------
 .../selectSchedule/SelectPriorityPage.tsx     | 17 ++++++++-------
 .../selectSchedule/SelectSchedulePage.tsx     |  1 -
 .../selectSchedule/components/TimeSelect.tsx  |  6 ++++--
 src/pages/selectSchedule/SelectSchedule.tsx   |  5 +++++
 13 files changed, 61 insertions(+), 51 deletions(-)
 create mode 100644 src/pages/selectSchedule/SelectSchedule.tsx

diff --git a/src/Router.tsx b/src/Router.tsx
index 680dbb8c..d9c4c662 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -1,15 +1,14 @@
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
-
-import ChooseBestTime from 'pages/BestMeetTime/ChooseBestTime';
+import ChooseBestTime from 'pages/bestMeetTime/ChooseBestTime';
 import CreateMeeting from 'pages/createMeeting/CreateMeeting';
 import CueCard from 'pages/cueCard/CueCard';
-import ErrorPage404 from 'pages/ErrorLoading/ErrorPage404';
-import LoadingPage from 'pages/ErrorLoading/LoadingPage';
-import LoginEntrance from 'pages/LoginEntrance/LoginEntrance';
-import OnBoarding from 'pages/onBoarding/OnBoarding';
-import SelectPage from 'pages/selectSchedule/SelectSchedulePage';
+import ErrorPage404 from 'pages/errorLoading/ErrorPage404';
+import LoadingPage from 'pages/errorLoading/LoadingPage';
 import SelectSchedulePriority from 'pages/legacy/selectSchedule/SelectPriorityPage';
-import SteppingLayout from 'pages/SteppingStone/SteppingLayout';
+import SelectPage from 'pages/legacy/selectSchedule/SelectSchedulePage';
+import LoginEntrance from 'pages/loginEntrance/LoginEntrance';
+import OnBoarding from 'pages/onBoarding/OnBoarding';
+import SteppingLayout from 'pages/steppingStone/SteppingLayout';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 const Router = () => {
   return (
diff --git a/src/pages/BestMeetTime/ChooseBestTime.tsx b/src/pages/BestMeetTime/ChooseBestTime.tsx
index 8aa577cf..df5ed133 100644
--- a/src/pages/BestMeetTime/ChooseBestTime.tsx
+++ b/src/pages/BestMeetTime/ChooseBestTime.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 
 import Header from 'components/moleculesComponents/Header';
-import BestMeetTime from 'pages/BestMeetTime/components/bestMeetTime/BestMeetTime';
-import OverallSchedule from 'pages/OverallSchedule/OverallSchedule';
+import BestMeetTime from 'pages/bestMeetTime/components/bestMeetTime/BestMeetTime';
+import OverallSchedule from 'pages/overallSchedule/OverallSchedule';
 import { styled } from 'styled-components';
 
 function ChooseBestTime() {
diff --git a/src/pages/BestMeetTime/components/bestMeetTime/AlternativeCard.tsx b/src/pages/BestMeetTime/components/bestMeetTime/AlternativeCard.tsx
index 91a52ba8..33d3d785 100644
--- a/src/pages/BestMeetTime/components/bestMeetTime/AlternativeCard.tsx
+++ b/src/pages/BestMeetTime/components/bestMeetTime/AlternativeCard.tsx
@@ -1,5 +1,5 @@
+import { BestDataProps } from 'pages/bestMeetTime/types/meetCardData';
 import Text from 'components/atomComponents/Text';
-import { BestDataProps } from 'pages/BestMeetTime/types/meetCardData';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
 
diff --git a/src/pages/BestMeetTime/components/bestMeetTime/BestMeetTime.tsx b/src/pages/BestMeetTime/components/bestMeetTime/BestMeetTime.tsx
index be177ff5..c5c20fa3 100644
--- a/src/pages/BestMeetTime/components/bestMeetTime/BestMeetTime.tsx
+++ b/src/pages/BestMeetTime/components/bestMeetTime/BestMeetTime.tsx
@@ -1,20 +1,19 @@
+import { DropdownWhite, DropupWhite } from 'components/Icon/icon';
 import React, { useState } from 'react';
 
+import AlternativeCard from 'pages/bestMeetTime/components/bestMeetTime/AlternativeCard';
+import BestTimeCard from 'pages/bestMeetTime/components/bestMeetTime/BestTimeCard';
+import BlankMeetCard from './BlankMeetCard';
 import Button from 'components/atomComponents/Button';
+import ConfirmModal from 'pages/bestMeetTime/components/bestMeetTime/confirmModal';
+import GetBestMeetimeListHooks from 'pages/bestMeetTime/hooks/getBestMeetimeList';
+import LoadingPage from 'pages/errorLoading/LoadingPage';
 import Text from 'components/atomComponents/Text';
-import { DropdownWhite, DropupWhite } from 'components/Icon/icon';
-import AlternativeCard from 'pages/BestMeetTime/components/bestMeetTime/AlternativeCard';
-import BestTimeCard from 'pages/BestMeetTime/components/bestMeetTime/BestTimeCard';
-import ConfirmModal from 'pages/BestMeetTime/components/bestMeetTime/confirmModal';
-import GetBestMeetimeListHooks from 'pages/BestMeetTime/hooks/getBestMeetimeList';
-import { whatisBestMeetime } from 'pages/BestMeetTime/utils/whatisBestMeetime';
-import LoadingPage from 'pages/ErrorLoading/LoadingPage';
-import { useParams } from 'react-router';
-import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
-
-import BlankMeetCard from './BlankMeetCard';
+import { useNavigate } from 'react-router-dom';
+import { useParams } from 'react-router';
+import { whatisBestMeetime } from 'pages/bestMeetTime/utils/whatisBestMeetime';
 
 function BestMeetTime() {
   const [isalternativeCardOpen, setIsalternativeCardOpen] = useState(false);
diff --git a/src/pages/BestMeetTime/components/bestMeetTime/BestTimeCard.tsx b/src/pages/BestMeetTime/components/bestMeetTime/BestTimeCard.tsx
index 8600d0bf..d1735869 100644
--- a/src/pages/BestMeetTime/components/bestMeetTime/BestTimeCard.tsx
+++ b/src/pages/BestMeetTime/components/bestMeetTime/BestTimeCard.tsx
@@ -1,8 +1,8 @@
+import { DropdownWhite, DropupWhite } from 'components/Icon/icon';
 import React, { useState } from 'react';
 
+import { BestDataProps } from 'pages/bestMeetTime/types/meetCardData';
 import Text from 'components/atomComponents/Text';
-import { DropdownWhite, DropupWhite } from 'components/Icon/icon';
-import { BestDataProps } from 'pages/BestMeetTime/types/meetCardData';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
 
diff --git a/src/pages/BestMeetTime/components/bestMeetTime/confirmModal.tsx b/src/pages/BestMeetTime/components/bestMeetTime/confirmModal.tsx
index c4bb9eef..a5a51203 100644
--- a/src/pages/BestMeetTime/components/bestMeetTime/confirmModal.tsx
+++ b/src/pages/BestMeetTime/components/bestMeetTime/confirmModal.tsx
@@ -1,13 +1,13 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 
-import Text from 'components/atomComponents/Text';
+import { BestMeetFinished } from 'pages/bestMeetTime/types/meetCardData';
 import { ExitIc } from 'components/Icon/icon';
-import { BestMeetFinished } from 'pages/BestMeetTime/types/meetCardData';
-import LoadingPage from 'pages/ErrorLoading/LoadingPage';
-import { useNavigate, useParams } from 'react-router-dom';
+import LoadingPage from 'pages/errorLoading/LoadingPage';
+import Text from 'components/atomComponents/Text';
+import { authClient } from 'utils/apis/axios';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
-import { authClient } from 'utils/apis/axios';
 
 interface ModalProps {
   setIsModalOpen: Dispatch<SetStateAction<boolean>>;
diff --git a/src/pages/OverallSchedule/OverallSchedule.tsx b/src/pages/OverallSchedule/OverallSchedule.tsx
index 114487aa..ec13e548 100644
--- a/src/pages/OverallSchedule/OverallSchedule.tsx
+++ b/src/pages/OverallSchedule/OverallSchedule.tsx
@@ -2,9 +2,9 @@ import React, { useEffect, useState } from 'react';
 
 import { availableDatesAtom, preferTimesAtom, timeSlotUserNameAtom } from 'atoms/atom';
 import Text from 'components/atomComponents/Text';
-import LoadingPage from 'pages/ErrorLoading/LoadingPage';
+import LoadingPage from 'pages/errorLoading/LoadingPage';
 import { useParams } from 'react-router-dom';
-import { useRecoilState,useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { OverallScheduleData } from 'src/types/overallScheduleType';
 import { styled } from 'styled-components';
 import { theme } from 'styles/theme';
diff --git a/src/pages/Test.tsx b/src/pages/Test.tsx
index 4e6c8213..a6378d68 100644
--- a/src/pages/Test.tsx
+++ b/src/pages/Test.tsx
@@ -1,5 +1,11 @@
+import SelectSchedule from './selectSchedule/SelectSchedule';
+
 function Test() {
-  return <div>Test</div>;
+  return (
+    <div>
+      <SelectSchedule />
+    </div>
+  );
 }
 
 export default Test;
diff --git a/src/pages/cueCard/components/Qcard.tsx b/src/pages/cueCard/components/Qcard.tsx
index 31cc77ab..f2d44085 100644
--- a/src/pages/cueCard/components/Qcard.tsx
+++ b/src/pages/cueCard/components/Qcard.tsx
@@ -1,14 +1,13 @@
-import { forwardRef, ForwardedRef } from 'react';
+import { ForwardedRef, forwardRef } from 'react';
+import { OfflinePlaceIc, OnlinePlaceIc, TimeIc } from 'components/Icon/icon';
 
+import GetQcardDataHooks from '../hooks/getQCardData';
+import LoadingPage from 'pages/errorLoading/LoadingPage';
 import Text from 'components/atomComponents/Text';
-import { OfflinePlaceIc, OnlinePlaceIc, TimeIc } from 'components/Icon/icon';
-import LoadingPage from 'pages/ErrorLoading/LoadingPage';
-import { useParams } from 'react-router';
-import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
-
-import GetQcardDataHooks from '../hooks/getQCardData';
+import { useNavigate } from 'react-router-dom';
+import { useParams } from 'react-router';
 
 const Qcard = forwardRef((_, ref: ForwardedRef<HTMLDivElement>) => {
   const { meetingId } = useParams();
diff --git a/src/pages/legacy/selectSchedule/SelectPriorityPage.tsx b/src/pages/legacy/selectSchedule/SelectPriorityPage.tsx
index ae84fa62..8a4f0358 100644
--- a/src/pages/legacy/selectSchedule/SelectPriorityPage.tsx
+++ b/src/pages/legacy/selectSchedule/SelectPriorityPage.tsx
@@ -1,18 +1,19 @@
 import React, { useEffect, useState } from 'react';
-import { availableDatesAtom, preferTimesAtom, scheduleAtom } from 'atoms/atom';
-import { useNavigate, useParams } from 'react-router-dom';
 
+import { availableDatesAtom, preferTimesAtom, scheduleAtom } from 'atoms/atom';
+import axios from 'axios';
 import Button from 'components/atomComponents/Button';
-import Header from 'components/moleculesComponents/Header';
-import PriorityDropdown from 'components/legacy/scheduleComponents/components/PriorityDropdown';
-import SelectModal from './SelectModal';
 import Text from 'components/atomComponents/Text';
+import PriorityDropdown from 'components/legacy/scheduleComponents/components/PriorityDropdown';
 import TimeTable from 'components/legacy/scheduleComponents/components/TimeTable';
-import { availableScheduleOptionApi } from 'utils/apis/availbleScheduleOptionApi';
-import axios from 'axios';
+import Header from 'components/moleculesComponents/Header';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
 import { theme } from 'styles/theme';
-import { useRecoilState } from 'recoil';
+import { availableScheduleOptionApi } from 'utils/apis/availbleScheduleOptionApi';
+
+import SelectModal from './SelectModal';
 
 const SelectSchedulePriority = () => {
   const [availableDates, setAvailableDates] = useRecoilState(availableDatesAtom);
diff --git a/src/pages/legacy/selectSchedule/SelectSchedulePage.tsx b/src/pages/legacy/selectSchedule/SelectSchedulePage.tsx
index 639e117e..5084ac55 100644
--- a/src/pages/legacy/selectSchedule/SelectSchedulePage.tsx
+++ b/src/pages/legacy/selectSchedule/SelectSchedulePage.tsx
@@ -102,7 +102,6 @@ function SelectSchedulePage() {
       priority: 0,
     };
     setScheduleList([...scheduleList, schedule]);
-    console.log(scheduleList);
   };
 
   const deleteDataList = (index: number) => {
diff --git a/src/pages/legacy/selectSchedule/components/TimeSelect.tsx b/src/pages/legacy/selectSchedule/components/TimeSelect.tsx
index 740ab053..5a9cd656 100644
--- a/src/pages/legacy/selectSchedule/components/TimeSelect.tsx
+++ b/src/pages/legacy/selectSchedule/components/TimeSelect.tsx
@@ -1,12 +1,14 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { ScheduleStates, TimeStates } from '../types/Schedule';
+
 
 import Text from 'components/atomComponents/Text';
-import TimeDropDown from './TimeDropDown';
 import getTimeSlots from 'components/legacy/scheduleComponents/utils/getTimeSlots';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
 
+import TimeDropDown from './TimeDropDown';
+import { ScheduleStates, TimeStates } from '../types/Schedule';
+
 interface PropTypes {
   text: string;
   id: number;
diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx
new file mode 100644
index 00000000..a85499db
--- /dev/null
+++ b/src/pages/selectSchedule/SelectSchedule.tsx
@@ -0,0 +1,5 @@
+function SelectSchedule() {
+  return <div>SelectSchedule</div>;
+}
+
+export default SelectSchedule;

From 9dd96f0e8da1a5079bdeeedaa3fb0c7953e8b483 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Fri, 21 Jun 2024 01:16:39 +0900
Subject: [PATCH 04/62] =?UTF-8?q?chore:=20=ED=95=84=EC=9A=94=EC=97=86?=
 =?UTF-8?q?=EB=8A=94=20=EC=BD=98=EC=86=94=EB=A1=9C=EA=B7=B8=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Router.tsx                                |  2 ++
 .../atomComponents/PasswordInput.tsx          |  1 -
 .../components/PriorityDropdown.tsx           | 14 ++++--------
 src/pages/OverallSchedule/OverallSchedule.tsx |  4 ----
 .../OverallSchedule/components/Column.tsx     |  7 +++---
 src/pages/OverallSchedule/components/Row.tsx  |  6 ++---
 src/pages/SteppingStone/SteppingLayout.tsx    |  8 -------
 .../legacy/selectSchedule/SelectModal.tsx     | 22 ++-----------------
 .../selectSchedule/components/DateSelect.tsx  |  1 -
 .../selectSchedule/utils/changeApiReq.ts      |  7 +-----
 src/utils/apis/overallScheduleApi.ts          |  2 --
 11 files changed, 15 insertions(+), 59 deletions(-)

diff --git a/src/Router.tsx b/src/Router.tsx
index d9c4c662..8536d068 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -8,6 +8,7 @@ import SelectPage from 'pages/legacy/selectSchedule/SelectSchedulePage';
 import LoginEntrance from 'pages/loginEntrance/LoginEntrance';
 import OnBoarding from 'pages/onBoarding/OnBoarding';
 import SteppingLayout from 'pages/steppingStone/SteppingLayout';
+import Test from 'pages/Test';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 const Router = () => {
@@ -36,6 +37,7 @@ const Router = () => {
         <Route path="*" element={<ErrorPage404 />} />
         <Route path="/error" element={<ErrorPage404 />} />
         <Route path="/select" element={<SelectPage />} />
+        <Route path="/test" element={<Test />} />
       </Routes>
     </BrowserRouter>
   );
diff --git a/src/components/atomComponents/PasswordInput.tsx b/src/components/atomComponents/PasswordInput.tsx
index 619782b9..20680980 100644
--- a/src/components/atomComponents/PasswordInput.tsx
+++ b/src/components/atomComponents/PasswordInput.tsx
@@ -16,7 +16,6 @@ function PasswordInput({ value, placeholder, passWordOnChange, page }: ValueProp
   const [inputType, setInputType] = useState(true);
 
   const changePasswordType = () => {
-    console.log(inputType);
     setInputType((prev) => !prev);
   };
   return (
diff --git a/src/components/legacy/scheduleComponents/components/PriorityDropdown.tsx b/src/components/legacy/scheduleComponents/components/PriorityDropdown.tsx
index 0478a770..4e154fb5 100644
--- a/src/components/legacy/scheduleComponents/components/PriorityDropdown.tsx
+++ b/src/components/legacy/scheduleComponents/components/PriorityDropdown.tsx
@@ -1,12 +1,12 @@
-import { Circle1Ic, Circle2Ic, Circle3Ic, DropDownIc, DropUpIc } from 'components/Icon/icon';
 import { useEffect, useState } from 'react';
 
-import { ScheduleStates } from 'pages/legacy/selectSchedule/types/Schedule';
-import Text from 'components/atomComponents/Text';
 import { scheduleAtom } from 'atoms/atom';
+import Text from 'components/atomComponents/Text';
+import { Circle1Ic, Circle2Ic, Circle3Ic, DropDownIc, DropUpIc } from 'components/Icon/icon';
+import { ScheduleStates } from 'pages/legacy/selectSchedule/types/Schedule';
+import { useRecoilState } from 'recoil';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
-import { useRecoilState } from 'recoil';
 
 function PriorityDropdown() {
   const [scheduleList, setScheduleList] = useRecoilState<ScheduleStates[]>(scheduleAtom);
@@ -81,12 +81,6 @@ function PriorityDropdown() {
     handleDropdown(i);
   };
 
-  // useEffect(
-  //   () => {
-  //     console.log(input_);
-  //   },
-  //   [input_],
-  // );
   return (
     <PriorityDropdownWrapper>
       {scheduleList.map(
diff --git a/src/pages/OverallSchedule/OverallSchedule.tsx b/src/pages/OverallSchedule/OverallSchedule.tsx
index ec13e548..f29f495f 100644
--- a/src/pages/OverallSchedule/OverallSchedule.tsx
+++ b/src/pages/OverallSchedule/OverallSchedule.tsx
@@ -44,7 +44,6 @@ const OverallSchedule = () => {
       const result = await overallScheduleApi(meetingId);
       const { data } = result.data;
       const uniqueData = [...new Set(data.totalUserNames)];
-      console.log(uniqueData);
       setOverallScheduleData(data);
       setMemberCount(data.memberCount);
       setTotalUserNames(uniqueData);
@@ -61,9 +60,6 @@ const OverallSchedule = () => {
   const formattedAvailableDateTimes =
   overallScheduleData && getFormattedAvailableDateTimes(overallScheduleData);
 
-console.log(timeSlotUserNames);
-console.log(formattedAvailableDateTimes);
-console.log(timeSlotUserNames);
   return (
     <OverallScheduleWrapper>
       {overallScheduleData ? (
diff --git a/src/pages/OverallSchedule/components/Column.tsx b/src/pages/OverallSchedule/components/Column.tsx
index f2ba41db..eefab406 100644
--- a/src/pages/OverallSchedule/components/Column.tsx
+++ b/src/pages/OverallSchedule/components/Column.tsx
@@ -1,11 +1,11 @@
 import { clickedTimeSlotAtom, timeSlotUserNameAtom } from 'atoms/atom';
-import { useRecoilState, useSetRecoilState } from 'recoil';
-
 import { ColumnProps } from 'components/legacy/scheduleComponents/types/AvailableScheduleType';
-import { filterUserNames } from '../utils/setUserNames';
+import { useRecoilState, useSetRecoilState } from 'recoil';
 import styled from 'styled-components';
 import { theme } from 'styles/theme';
 
+import { filterUserNames } from '../utils/setUserNames';
+
 const Column = (props: ColumnProps) => {
   const setTimeSlotUserName = useSetRecoilState(timeSlotUserNameAtom);
   const [clickedTimeSlot, setClickedTimeSlot] = useRecoilState(clickedTimeSlotAtom);
@@ -30,7 +30,6 @@ const Column = (props: ColumnProps) => {
   } = props;
 
   const handleSlotClick = () => {
-    console.log(filterUserNames(userNames));
     setTimeSlotUserName(userNames);
     setClickedTimeSlot(rowIdx + timeSlot);
   };
diff --git a/src/pages/OverallSchedule/components/Row.tsx b/src/pages/OverallSchedule/components/Row.tsx
index 6c29b7fc..cca09e29 100644
--- a/src/pages/OverallSchedule/components/Row.tsx
+++ b/src/pages/OverallSchedule/components/Row.tsx
@@ -1,10 +1,11 @@
-import Column from './Column';
 import Text from 'components/atomComponents/Text';
-import { filterUserNames } from '../utils/setUserNames';
 import getTimeSlots from 'components/legacy/scheduleComponents/utils/getTimeSlots';
 import styled from 'styled-components';
 import { theme } from 'styles/theme';
 
+import Column from './Column';
+import { filterUserNames } from '../utils/setUserNames';
+
 interface TimeSlot{
   time:string;
   userNames:string[];
@@ -53,7 +54,6 @@ const Row = (props: RowProps) => {
     if (objArray === undefined) return;
     const targetObj = objArray.find((obj)=> obj.time === targetTime);
     if(targetObj){
-      console.log(targetObj.userNames);
       const temp=filterUserNames(targetObj.userNames);
       return temp;
     }
diff --git a/src/pages/SteppingStone/SteppingLayout.tsx b/src/pages/SteppingStone/SteppingLayout.tsx
index f5d0a208..3c5182ce 100644
--- a/src/pages/SteppingStone/SteppingLayout.tsx
+++ b/src/pages/SteppingStone/SteppingLayout.tsx
@@ -48,14 +48,6 @@ function SteppingLayout({ steppingType }: SteppingProps) {
     };
   }, []);
 
-  // useEffect(() => {
-  //   history.pushState(null, '', location.href);
-  //   console.log(location.href);
-  //   window.onpopstate = function() {
-  //     history.go(1);
-  //   };
-  // }, []);
-
   return (
     <>
       <SteppingWrapper>
diff --git a/src/pages/legacy/selectSchedule/SelectModal.tsx b/src/pages/legacy/selectSchedule/SelectModal.tsx
index 5a0a6136..b8320c87 100644
--- a/src/pages/legacy/selectSchedule/SelectModal.tsx
+++ b/src/pages/legacy/selectSchedule/SelectModal.tsx
@@ -1,11 +1,11 @@
-import React, { Dispatch, useEffect, SetStateAction } from 'react';
+import React, { Dispatch, SetStateAction, useEffect } from 'react';
 
 import { scheduleAtom, userNameAtom } from 'atoms/atom';
 import { isAxiosError } from 'axios';
 import Text from 'components/atomComponents/Text';
 import { ExitIc } from 'components/Icon/icon';
 import { useNavigate, useParams } from 'react-router';
-import { useRecoilValue, useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
 import { hostAvailableApi, userAvailableApi } from 'utils/apis/createHostAvailableSchedule';
@@ -24,15 +24,12 @@ function SelectModal({ setShowModal }: ModalProps) {
   const navigate = useNavigate();
   const { auth, meetingId } = useParams();
   const updateScheduleType = transformHostScheduleType(scheduleList);
-  console.log(updateScheduleType);
   const updateMemberScheduleType = transformUserScheduleType(scheduleList, userName);
-  console.log(updateMemberScheduleType);
 
   const postHostAvailableApi = async () => {
     try {
       if (meetingId && updateScheduleType) {
         const { data } = await hostAvailableApi(meetingId, updateScheduleType);
-        console.log(data);
         if (data.code === 201) {
           setShowModal(false);
           navigate(`/${auth}/schedule-complete/${meetingId}`);
@@ -58,7 +55,6 @@ function SelectModal({ setShowModal }: ModalProps) {
     try {
       if (meetingId && updateMemberScheduleType) {
         const { data } = await userAvailableApi(meetingId, updateMemberScheduleType);
-        console.log(data);
         if (data.code === 201) {
           setShowModal(false);
           navigate(`/${auth}/schedule-complete/${meetingId}`);
@@ -69,7 +65,6 @@ function SelectModal({ setShowModal }: ModalProps) {
       }
     } catch (e) {
       if (isAxiosError(e) && e.response) {
-        console.log(e.response.data);
         if (e.response.status === 400) {
           alert(`${e.response.data.message}`);
         } else {
@@ -80,25 +75,12 @@ function SelectModal({ setShowModal }: ModalProps) {
     }
   };
 
-  useEffect(
-    () => {
-      console.log(scheduleList);
-    },
-    [scheduleList],
-  );
-
-  // console.log(transformedScheduleList);
   const finishConfirm = () => {
-    //여기에 api 연결하세요.
     if (auth === 'host') {
       postHostAvailableApi();
     } else if (auth === 'member') {
-      console.log(auth);
       postMemberAvailableApi();
     }
-
-    // setShowModal(false);
-    // navigate(`/${auth}/schedule-complete/${meetingId}`);
   };
   return (
     <ReturnModalWrpper>
diff --git a/src/pages/legacy/selectSchedule/components/DateSelect.tsx b/src/pages/legacy/selectSchedule/components/DateSelect.tsx
index ed7ccac3..cc9d7cce 100644
--- a/src/pages/legacy/selectSchedule/components/DateSelect.tsx
+++ b/src/pages/legacy/selectSchedule/components/DateSelect.tsx
@@ -19,7 +19,6 @@ function DateSelect({ id, handleDate, availableDates, scheduleList }: PropTypes)
 
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
-  console.log(id);
   useEffect(
     () => {
       const clickOutSide = (e: MouseEvent) => {
diff --git a/src/pages/legacy/selectSchedule/utils/changeApiReq.ts b/src/pages/legacy/selectSchedule/utils/changeApiReq.ts
index f23f1ebc..2aac57f0 100644
--- a/src/pages/legacy/selectSchedule/utils/changeApiReq.ts
+++ b/src/pages/legacy/selectSchedule/utils/changeApiReq.ts
@@ -9,12 +9,9 @@ export const transformHostScheduleType = (
   scheduleList: ScheduleStates[],
 ): (HostAvailableSchduleRequestType | null)[] => {
   return scheduleList.map((item) => {
-    // const regexResult = item.date.match(/(\d+)월 (\d+)일 \((\S+)\)/);
-    // console.log(regexResult);
-
     const matchedResult = item.date.match(/(\d+)월 (\d+)일 \((\S+)\)/);
     if (!matchedResult) {
-      return null; // Handle the case when there is no match for the date pattern
+      return null;
     }
     const [, month, day, dateOfWeek] = matchedResult;
 
@@ -37,8 +34,6 @@ export const transformUserScheduleType = (
   const availableTimes = scheduleList.map((item) => {
     const matchedResult = item.date.match(/(\d+)월 (\d+)일 \((\S+)\)/);
     if (!matchedResult) {
-      // Handle the case when there is no match for the date pattern
-      // For example, you can return an empty object or any default value you prefer.
       return {
         id: '',
         month: '',
diff --git a/src/utils/apis/overallScheduleApi.ts b/src/utils/apis/overallScheduleApi.ts
index 8d0c8377..9cff94bd 100644
--- a/src/utils/apis/overallScheduleApi.ts
+++ b/src/utils/apis/overallScheduleApi.ts
@@ -5,8 +5,6 @@ import { authClient, client } from './axios';
 
 /** 가능 시간 입력 선택지 조회 api */
 export const availbleScheduleOptionApi = (meetingId?: string) => {
-  const data= client.get<AvailableScheduleOptionResponse>(`/meeting/${meetingId}/schedule`);
-  console.log(data);
   return client.get<AvailableScheduleOptionResponse>(`/meeting/${meetingId}/schedule`);
 };
 

From 6a7b6bd517c1a66336479ffdf12118f7d4a3a7a7 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Fri, 21 Jun 2024 04:00:50 +0900
Subject: [PATCH 05/62] =?UTF-8?q?feat:=20=EC=8B=9C=EA=B0=84=ED=91=9C=20?=
 =?UTF-8?q?=EA=B8=B0=EB=B3=B8=20=ED=8B=80=20UI=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Test.tsx                            | 10 ++-
 src/pages/selectSchedule/SelectSchedule.tsx   |  8 +-
 .../components/timetable/Timetable.tsx        | 83 +++++++++++++++++++
 .../components/timetable/context.ts           | 26 ++++++
 .../components/timetable/parts/Column.tsx     | 27 ++++++
 .../components/timetable/parts/Slot.tsx       | 20 +++++
 .../components/timetable/utils.ts             | 43 ++++++++++
 7 files changed, 214 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/selectSchedule/components/timetable/Timetable.tsx
 create mode 100644 src/pages/selectSchedule/components/timetable/context.ts
 create mode 100644 src/pages/selectSchedule/components/timetable/parts/Column.tsx
 create mode 100644 src/pages/selectSchedule/components/timetable/parts/Slot.tsx
 create mode 100644 src/pages/selectSchedule/components/timetable/utils.ts

diff --git a/src/pages/Test.tsx b/src/pages/Test.tsx
index a6378d68..828db086 100644
--- a/src/pages/Test.tsx
+++ b/src/pages/Test.tsx
@@ -1,11 +1,17 @@
+import styled from 'styled-components';
+
 import SelectSchedule from './selectSchedule/SelectSchedule';
 
 function Test() {
   return (
-    <div>
+    <StyledTest>
       <SelectSchedule />
-    </div>
+    </StyledTest>
   );
 }
 
 export default Test;
+
+const StyledTest = styled.div`
+  padding: 5rem;
+`;
diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx
index a85499db..bef2dc9f 100644
--- a/src/pages/selectSchedule/SelectSchedule.tsx
+++ b/src/pages/selectSchedule/SelectSchedule.tsx
@@ -1,5 +1,11 @@
+import Timetable from './components/timetable/Timetable';
+
 function SelectSchedule() {
-  return <div>SelectSchedule</div>;
+  return (
+    <div>
+      <Timetable />
+    </div>
+  );
 }
 
 export default SelectSchedule;
diff --git a/src/pages/selectSchedule/components/timetable/Timetable.tsx b/src/pages/selectSchedule/components/timetable/Timetable.tsx
new file mode 100644
index 00000000..8eac990b
--- /dev/null
+++ b/src/pages/selectSchedule/components/timetable/Timetable.tsx
@@ -0,0 +1,83 @@
+import { useState } from 'react';
+
+import styled from 'styled-components';
+
+import { SelectedSlotsType, TimetableContext } from './context';
+import Column from './parts/Column';
+import { fillWeekDates, getAvailableTimes } from './utils';
+
+// api 연결 후 지울 것
+export type DateType = {
+  month: string | undefined;
+  day: string | undefined;
+  dayOfWeek: string | undefined;
+};
+
+const availableDates: DateType[] = [
+  {
+    month: '6',
+    day: '20',
+    dayOfWeek: '목',
+  },
+  {
+    month: '6',
+    day: '21',
+    dayOfWeek: '금',
+  },
+  {
+    month: '6',
+    day: '22',
+    dayOfWeek: '토',
+  },
+  {
+    month: '6',
+    day: '23',
+    dayOfWeek: '일',
+  },
+];
+
+const dates = fillWeekDates(availableDates);
+
+export type SlotType = {
+  startTime: string;
+  endTime: string;
+};
+
+const preferTimes: SlotType = {
+  startTime: '06:00',
+  endTime: '24:00',
+};
+
+const timeSlots = getAvailableTimes(preferTimes);
+
+function Timetable() {
+  const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
+  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotsType>({});
+  return (
+    <TimetableContext.Provider
+      value={{
+        startSlot,
+        selectedSlots,
+      }}
+    >
+      <StyledTimetable>
+        {dates.map((date) => (
+          <Column
+            key={Object.values(date).join('/')}
+            date={Object.values(date).join('/')}
+            timeSlots={timeSlots}
+          />
+        ))}
+      </StyledTimetable>
+    </TimetableContext.Provider>
+  );
+}
+
+export default Timetable;
+
+const StyledTimetable = styled.div`
+  display: flex;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.grey7};
+
+  border-left: 1px solid ${({ theme }) => theme.colors.grey7};
+`;
diff --git a/src/pages/selectSchedule/components/timetable/context.ts b/src/pages/selectSchedule/components/timetable/context.ts
new file mode 100644
index 00000000..55602a8a
--- /dev/null
+++ b/src/pages/selectSchedule/components/timetable/context.ts
@@ -0,0 +1,26 @@
+import { createContext, useContext } from 'react';
+
+export type SelectedSlotsType = {
+  [date: string]: {
+    startSlot: string;
+    endSlot: string;
+  };
+};
+
+type TimetableContextType = {
+  startSlot?: string;
+  selectedSlots: SelectedSlotsType;
+};
+
+export const TimetableContext = createContext<TimetableContextType>({
+  startSlot: undefined,
+  selectedSlots: {},
+});
+
+export function useTimetableContext() {
+  const context = useContext(TimetableContext);
+  if (context == null) {
+    throw new Error('TimetableContext Error');
+  }
+  return context;
+}
diff --git a/src/pages/selectSchedule/components/timetable/parts/Column.tsx b/src/pages/selectSchedule/components/timetable/parts/Column.tsx
new file mode 100644
index 00000000..df1f986b
--- /dev/null
+++ b/src/pages/selectSchedule/components/timetable/parts/Column.tsx
@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+import Slot from './Slot';
+
+interface ColumnProps {
+  date: string;
+  timeSlots: string[];
+}
+
+function Column({ date, timeSlots }: ColumnProps) {
+  return (
+    <StyledColumn>
+      {timeSlots.map((timeSlot) => (
+        <Slot key={`${date}/${timeSlot}`} slot={`${date}/${timeSlot}`} />
+      ))}
+    </StyledColumn>
+  );
+}
+
+export default Column;
+
+const StyledColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  border-right: 1px solid ${({ theme }) => theme.colors.grey7};
+`;
diff --git a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
new file mode 100644
index 00000000..28b39f90
--- /dev/null
+++ b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+interface SlotProps {
+  slot: string;
+}
+
+function Slot({ slot }: SlotProps) {
+  const [month, day, dayOfWeek, time] = slot.split('/');
+  const isHalf = time.endsWith(':30');
+  return <StyledSlot $borderStyle={isHalf ? 'dashed' : 'solid'} />;
+}
+
+export default Slot;
+
+const StyledSlot = styled.div<{ $borderStyle: string }>`
+  border-top: 1px ${({ $borderStyle }) => $borderStyle} ${({ theme }) => theme.colors.grey7};
+  width: 4.4rem;
+  height: 2rem;
+  color: white;
+`;
diff --git a/src/pages/selectSchedule/components/timetable/utils.ts b/src/pages/selectSchedule/components/timetable/utils.ts
new file mode 100644
index 00000000..ade5b1fc
--- /dev/null
+++ b/src/pages/selectSchedule/components/timetable/utils.ts
@@ -0,0 +1,43 @@
+import { DateType, SlotType } from './Timetable';
+
+/**
+ *
+ * @description 시작 시간(startTime)과 종료 시간(endTime) 사이에서 30분 간격으로 시간 슬롯을 생성하여 반환하는 함수입니다.
+ */
+
+export function getAvailableTimes(times: SlotType) {
+  function addMinutes(time: string, minutes: number) {
+    const [hour, minute] = time.split(':').map(Number);
+    const totalMinutes = hour * 60 + minute + minutes;
+    const newHour = String(Math.floor(totalMinutes / 60)).padStart(2, '0');
+    const newMinute = String(totalMinutes % 60).padStart(2, '0');
+    return `${newHour}:${newMinute}`;
+  }
+
+  function getTimeSlots(startTime: string, endTime: string): string[] {
+    const slots = [];
+    let curTime = startTime;
+    while (curTime < endTime) {
+      slots.push(curTime);
+      curTime = addMinutes(curTime, 30);
+    }
+    return slots;
+  }
+  return getTimeSlots(times.startTime, times.endTime);
+}
+
+/**
+ *
+ * @description 날짜 리스트의 길이가 7이 될 때까지 비어있는 날짜에 대해 undefined를 채우는 함수입니다.
+ */
+export function fillWeekDates(dates: DateType[]): DateType[] {
+  const filledDates = [...dates];
+  while (filledDates.length < 7) {
+    filledDates.push({
+      month: undefined,
+      day: undefined,
+      dayOfWeek: undefined,
+    });
+  }
+  return filledDates;
+}

From a6e26e5d236efe01bf46a518b54f7c01d326f82a Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Fri, 21 Jun 2024 04:26:36 +0900
Subject: [PATCH 06/62] =?UTF-8?q?feat:=207=EC=9D=BC=20=EB=AF=B8=EB=A7=8C?=
 =?UTF-8?q?=20=EC=84=A0=ED=83=9D=EC=97=90=20=EB=8C=80=ED=95=9C=20UI=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/timetable/Timetable.tsx        | 30 +++++++++++++++++--
 .../components/timetable/parts/Slot.tsx       |  1 -
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/pages/selectSchedule/components/timetable/Timetable.tsx b/src/pages/selectSchedule/components/timetable/Timetable.tsx
index 8eac990b..8c8ebca2 100644
--- a/src/pages/selectSchedule/components/timetable/Timetable.tsx
+++ b/src/pages/selectSchedule/components/timetable/Timetable.tsx
@@ -34,9 +34,24 @@ const availableDates: DateType[] = [
     day: '23',
     dayOfWeek: '일',
   },
+  {
+    month: '6',
+    day: '23',
+    dayOfWeek: '일',
+  },
+  {
+    month: '6',
+    day: '23',
+    dayOfWeek: '일',
+  },
+  {
+    month: '6',
+    day: '23',
+    dayOfWeek: '일',
+  },
 ];
 
-const dates = fillWeekDates(availableDates);
+const emptyDates = Array.from({ length: 7 - availableDates.length }, (_, i) => `empty${i + 1}`);
 
 export type SlotType = {
   startTime: string;
@@ -61,13 +76,14 @@ function Timetable() {
       }}
     >
       <StyledTimetable>
-        {dates.map((date) => (
+        {availableDates.map((date) => (
           <Column
             key={Object.values(date).join('/')}
             date={Object.values(date).join('/')}
             timeSlots={timeSlots}
           />
         ))}
+        {emptyDates && emptyDates.map((value) => <EmptyColumn key={value} />)}
       </StyledTimetable>
     </TimetableContext.Provider>
   );
@@ -78,6 +94,14 @@ export default Timetable;
 const StyledTimetable = styled.div`
   display: flex;
   border-bottom: 1px solid ${({ theme }) => theme.colors.grey7};
-
   border-left: 1px solid ${({ theme }) => theme.colors.grey7};
 `;
+
+const EmptyColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid ${({ theme }) => theme.colors.grey7};
+  border-right: 1px solid ${({ theme }) => theme.colors.grey7};
+  background-color: ${({ theme }) => theme.colors.grey9};
+  width: 4.4rem;
+`;
diff --git a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
index 28b39f90..b7d3de3e 100644
--- a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
+++ b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
@@ -16,5 +16,4 @@ const StyledSlot = styled.div<{ $borderStyle: string }>`
   border-top: 1px ${({ $borderStyle }) => $borderStyle} ${({ theme }) => theme.colors.grey7};
   width: 4.4rem;
   height: 2rem;
-  color: white;
 `;

From 827a0c9b680cd7c033390b261a158b8f81c7c44e Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Fri, 21 Jun 2024 05:28:59 +0900
Subject: [PATCH 07/62] =?UTF-8?q?feat:=20=EC=84=A0=ED=83=9D=EB=90=9C=20slo?=
 =?UTF-8?q?t=20=EA=B0=92=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EC=83=89?=
 =?UTF-8?q?=EC=83=81=20=ED=91=9C=EC=8B=9C=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/timetable/Timetable.tsx        | 31 +++++++++----------
 .../components/timetable/context.ts           |  8 +++--
 .../components/timetable/parts/Slot.tsx       | 19 ++++++++++--
 .../components/timetable/utils.ts             | 16 ----------
 4 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/src/pages/selectSchedule/components/timetable/Timetable.tsx b/src/pages/selectSchedule/components/timetable/Timetable.tsx
index 8c8ebca2..565f8133 100644
--- a/src/pages/selectSchedule/components/timetable/Timetable.tsx
+++ b/src/pages/selectSchedule/components/timetable/Timetable.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import { SelectedSlotsType, TimetableContext } from './context';
 import Column from './parts/Column';
-import { fillWeekDates, getAvailableTimes } from './utils';
+import { getAvailableTimes } from './utils';
 
 // api 연결 후 지울 것
 export type DateType = {
@@ -34,21 +34,6 @@ const availableDates: DateType[] = [
     day: '23',
     dayOfWeek: '일',
   },
-  {
-    month: '6',
-    day: '23',
-    dayOfWeek: '일',
-  },
-  {
-    month: '6',
-    day: '23',
-    dayOfWeek: '일',
-  },
-  {
-    month: '6',
-    day: '23',
-    dayOfWeek: '일',
-  },
 ];
 
 const emptyDates = Array.from({ length: 7 - availableDates.length }, (_, i) => `empty${i + 1}`);
@@ -67,12 +52,24 @@ const timeSlots = getAvailableTimes(preferTimes);
 
 function Timetable() {
   const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
-  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotsType>({});
+  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotsType>({
+    // 시간표 색칠을 테스트하기 위한 더미 값
+    '6/20/목': {
+      startSlot: '09:00',
+      endSlot: '13:00',
+    },
+    '6/21/금': {
+      startSlot: '15:00',
+      endSlot: '18:00',
+    },
+  });
   return (
     <TimetableContext.Provider
       value={{
         startSlot,
+        setStartSlot,
         selectedSlots,
+        setSelectedSlots,
       }}
     >
       <StyledTimetable>
diff --git a/src/pages/selectSchedule/components/timetable/context.ts b/src/pages/selectSchedule/components/timetable/context.ts
index 55602a8a..77cab8f7 100644
--- a/src/pages/selectSchedule/components/timetable/context.ts
+++ b/src/pages/selectSchedule/components/timetable/context.ts
@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import { ReactNode, createContext, useContext } from 'react';
 
 export type SelectedSlotsType = {
   [date: string]: {
@@ -8,13 +8,17 @@ export type SelectedSlotsType = {
 };
 
 type TimetableContextType = {
-  startSlot?: string;
+  startSlot?: ReactNode;
+  setStartSlot: (startSlot?: string) => void;
   selectedSlots: SelectedSlotsType;
+  setSelectedSlots: (selectedSlots: SelectedSlotsType) => void;
 };
 
 export const TimetableContext = createContext<TimetableContextType>({
   startSlot: undefined,
+  setStartSlot: () => undefined,
   selectedSlots: {},
+  setSelectedSlots: () => undefined,
 });
 
 export function useTimetableContext() {
diff --git a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
index b7d3de3e..4b04ba98 100644
--- a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
+++ b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
@@ -1,19 +1,34 @@
 import styled from 'styled-components';
 
+import { useTimetableContext } from '../context';
+
 interface SlotProps {
   slot: string;
 }
 
 function Slot({ slot }: SlotProps) {
+  const { selectedSlots } = useTimetableContext();
   const [month, day, dayOfWeek, time] = slot.split('/');
   const isHalf = time.endsWith(':30');
-  return <StyledSlot $borderStyle={isHalf ? 'dashed' : 'solid'} />;
+
+  const key = [month, day, dayOfWeek].join('/');
+
+  let isSelected = false;
+  if (key in selectedSlots) {
+    const { startSlot, endSlot } = selectedSlots[key];
+
+    isSelected = time >= startSlot && time <= endSlot;
+  }
+
+  return <StyledSlot $borderStyle={isHalf ? 'dashed' : 'solid'} $isSelected={isSelected} />;
 }
 
 export default Slot;
 
-const StyledSlot = styled.div<{ $borderStyle: string }>`
+const StyledSlot = styled.div<{ $borderStyle: string; $isSelected: boolean }>`
   border-top: 1px ${({ $borderStyle }) => $borderStyle} ${({ theme }) => theme.colors.grey7};
+  background-color: ${({ $isSelected, theme }) =>
+    $isSelected ? theme.colors.main1 : 'transparent'};
   width: 4.4rem;
   height: 2rem;
 `;
diff --git a/src/pages/selectSchedule/components/timetable/utils.ts b/src/pages/selectSchedule/components/timetable/utils.ts
index ade5b1fc..1e6ea496 100644
--- a/src/pages/selectSchedule/components/timetable/utils.ts
+++ b/src/pages/selectSchedule/components/timetable/utils.ts
@@ -25,19 +25,3 @@ export function getAvailableTimes(times: SlotType) {
   }
   return getTimeSlots(times.startTime, times.endTime);
 }
-
-/**
- *
- * @description 날짜 리스트의 길이가 7이 될 때까지 비어있는 날짜에 대해 undefined를 채우는 함수입니다.
- */
-export function fillWeekDates(dates: DateType[]): DateType[] {
-  const filledDates = [...dates];
-  while (filledDates.length < 7) {
-    filledDates.push({
-      month: undefined,
-      day: undefined,
-      dayOfWeek: undefined,
-    });
-  }
-  return filledDates;
-}

From 3e604c5158f6b6a0f1d8c0ed0b0ae25bac37b137 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Fri, 21 Jun 2024 22:41:15 +0900
Subject: [PATCH 08/62] =?UTF-8?q?fix:=20=EC=8A=A4=ED=83=80=EC=9D=BC?=
 =?UTF-8?q?=EB=A7=81=20=EC=A1=B0=EA=B1=B4=EB=B6=80=20=EA=B3=84=EC=82=B0=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/timetable/Timetable.tsx        |  6 +++++-
 .../components/timetable/parts/Column.tsx     | 16 ++++++++++++---
 .../components/timetable/parts/Slot.tsx       | 20 ++++---------------
 .../components/timetable/utils.ts             |  2 +-
 4 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/pages/selectSchedule/components/timetable/Timetable.tsx b/src/pages/selectSchedule/components/timetable/Timetable.tsx
index 565f8133..95af27bc 100644
--- a/src/pages/selectSchedule/components/timetable/Timetable.tsx
+++ b/src/pages/selectSchedule/components/timetable/Timetable.tsx
@@ -7,7 +7,7 @@ import Column from './parts/Column';
 import { getAvailableTimes } from './utils';
 
 // api 연결 후 지울 것
-export type DateType = {
+type DateType = {
   month: string | undefined;
   day: string | undefined;
   dayOfWeek: string | undefined;
@@ -62,6 +62,10 @@ function Timetable() {
       startSlot: '15:00',
       endSlot: '18:00',
     },
+    '6/22/토': {
+      startSlot: '12:00',
+      endSlot: '12:00',
+    },
   });
   return (
     <TimetableContext.Provider
diff --git a/src/pages/selectSchedule/components/timetable/parts/Column.tsx b/src/pages/selectSchedule/components/timetable/parts/Column.tsx
index df1f986b..37b97a60 100644
--- a/src/pages/selectSchedule/components/timetable/parts/Column.tsx
+++ b/src/pages/selectSchedule/components/timetable/parts/Column.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
 import Slot from './Slot';
+import { useTimetableContext } from '../context';
 
 interface ColumnProps {
   date: string;
@@ -8,11 +9,20 @@ interface ColumnProps {
 }
 
 function Column({ date, timeSlots }: ColumnProps) {
+  const { selectedSlots } = useTimetableContext();
+  const { startSlot, endSlot } = selectedSlots[date] ?? {};
+
   return (
     <StyledColumn>
-      {timeSlots.map((timeSlot) => (
-        <Slot key={`${date}/${timeSlot}`} slot={`${date}/${timeSlot}`} />
-      ))}
+      {timeSlots.map((timeSlot) => {
+        const isSelectedSlot = timeSlot >= startSlot && timeSlot <= endSlot;
+        return (
+        <Slot
+          key={`${date}/${timeSlot}`}
+          slot={`${date}/${timeSlot}`}
+          isSelectedSlot={isSelectedSlot}
+        />)
+      })}
     </StyledColumn>
   );
 }
diff --git a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
index 4b04ba98..0aeb0d54 100644
--- a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
+++ b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
@@ -1,26 +1,14 @@
 import styled from 'styled-components';
 
-import { useTimetableContext } from '../context';
-
 interface SlotProps {
   slot: string;
+  isSelectedSlot: boolean;
 }
 
-function Slot({ slot }: SlotProps) {
-  const { selectedSlots } = useTimetableContext();
-  const [month, day, dayOfWeek, time] = slot.split('/');
-  const isHalf = time.endsWith(':30');
-
-  const key = [month, day, dayOfWeek].join('/');
-
-  let isSelected = false;
-  if (key in selectedSlots) {
-    const { startSlot, endSlot } = selectedSlots[key];
-
-    isSelected = time >= startSlot && time <= endSlot;
-  }
+function Slot({ slot, isSelectedSlot }: SlotProps) {
+  const borderStyle = slot.endsWith(':30') ? 'dashed' : 'solid';
 
-  return <StyledSlot $borderStyle={isHalf ? 'dashed' : 'solid'} $isSelected={isSelected} />;
+  return <StyledSlot $borderStyle={borderStyle} $isSelected={isSelectedSlot} />;
 }
 
 export default Slot;
diff --git a/src/pages/selectSchedule/components/timetable/utils.ts b/src/pages/selectSchedule/components/timetable/utils.ts
index 1e6ea496..76cab6a5 100644
--- a/src/pages/selectSchedule/components/timetable/utils.ts
+++ b/src/pages/selectSchedule/components/timetable/utils.ts
@@ -1,4 +1,4 @@
-import { DateType, SlotType } from './Timetable';
+import { SlotType } from './Timetable';
 
 /**
  *

From 8f5b8b20e7b64b48a473688ac8525dc0f2b1220b Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Fri, 21 Jun 2024 23:16:43 +0900
Subject: [PATCH 09/62] =?UTF-8?q?feat:=20=ED=95=9C=20=EB=82=A0=EC=A7=9C?=
 =?UTF-8?q?=EC=97=90=20=EB=8C=80=ED=95=B4=20=EC=97=AC=EB=9F=AC=20Slot=20?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=EA=B0=80=20=EB=93=A4=EC=96=B4?=
 =?UTF-8?q?=EA=B0=80=EB=8F=84=EB=A1=9D=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?=
 =?UTF-8?q?=ED=98=95=EC=8B=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/timetable/Timetable.tsx        | 34 ++++++++++++-------
 .../components/timetable/context.ts           |  2 +-
 .../components/timetable/parts/Column.tsx     |  4 +--
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/pages/selectSchedule/components/timetable/Timetable.tsx b/src/pages/selectSchedule/components/timetable/Timetable.tsx
index 95af27bc..9f1a65c7 100644
--- a/src/pages/selectSchedule/components/timetable/Timetable.tsx
+++ b/src/pages/selectSchedule/components/timetable/Timetable.tsx
@@ -54,18 +54,28 @@ function Timetable() {
   const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
   const [selectedSlots, setSelectedSlots] = useState<SelectedSlotsType>({
     // 시간표 색칠을 테스트하기 위한 더미 값
-    '6/20/목': {
-      startSlot: '09:00',
-      endSlot: '13:00',
-    },
-    '6/21/금': {
-      startSlot: '15:00',
-      endSlot: '18:00',
-    },
-    '6/22/토': {
-      startSlot: '12:00',
-      endSlot: '12:00',
-    },
+    '6/20/목': [
+      {
+        startSlot: '09:00',
+        endSlot: '13:00',
+      },
+    ],
+    '6/21/금': [
+      {
+        startSlot: '15:00',
+        endSlot: '18:00',
+      },
+    ],
+    '6/22/토': [
+      {
+        startSlot: '12:00',
+        endSlot: '12:00',
+      },
+      {
+        startSlot: '17:30',
+        endSlot: '20:00',
+      },
+    ],
   });
   return (
     <TimetableContext.Provider
diff --git a/src/pages/selectSchedule/components/timetable/context.ts b/src/pages/selectSchedule/components/timetable/context.ts
index 77cab8f7..412d64ea 100644
--- a/src/pages/selectSchedule/components/timetable/context.ts
+++ b/src/pages/selectSchedule/components/timetable/context.ts
@@ -4,7 +4,7 @@ export type SelectedSlotsType = {
   [date: string]: {
     startSlot: string;
     endSlot: string;
-  };
+  }[];
 };
 
 type TimetableContextType = {
diff --git a/src/pages/selectSchedule/components/timetable/parts/Column.tsx b/src/pages/selectSchedule/components/timetable/parts/Column.tsx
index 37b97a60..fa307fca 100644
--- a/src/pages/selectSchedule/components/timetable/parts/Column.tsx
+++ b/src/pages/selectSchedule/components/timetable/parts/Column.tsx
@@ -10,12 +10,12 @@ interface ColumnProps {
 
 function Column({ date, timeSlots }: ColumnProps) {
   const { selectedSlots } = useTimetableContext();
-  const { startSlot, endSlot } = selectedSlots[date] ?? {};
+  const selectedSlotsPerDate = selectedSlots[date] ?? [];
 
   return (
     <StyledColumn>
       {timeSlots.map((timeSlot) => {
-        const isSelectedSlot = timeSlot >= startSlot && timeSlot <= endSlot;
+        const isSelectedSlot = selectedSlotsPerDate.some(({ startSlot, endSlot }) => timeSlot >= startSlot && timeSlot <= endSlot);
         return (
         <Slot
           key={`${date}/${timeSlot}`}

From 0a7dc8874e394e856aa6a8ce21ef7ff1851507a3 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Fri, 21 Jun 2024 23:45:13 +0900
Subject: [PATCH 10/62] =?UTF-8?q?feat:=20=EB=82=A0=EC=A7=9C=20=ED=83=80?=
 =?UTF-8?q?=EC=9D=B4=ED=8B=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/timetable/Timetable.tsx        | 10 ++--
 .../components/timetable/parts/DateTitle.tsx  | 46 +++++++++++++++++++
 2 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/selectSchedule/components/timetable/parts/DateTitle.tsx

diff --git a/src/pages/selectSchedule/components/timetable/Timetable.tsx b/src/pages/selectSchedule/components/timetable/Timetable.tsx
index 9f1a65c7..8df1034c 100644
--- a/src/pages/selectSchedule/components/timetable/Timetable.tsx
+++ b/src/pages/selectSchedule/components/timetable/Timetable.tsx
@@ -4,10 +4,11 @@ import styled from 'styled-components';
 
 import { SelectedSlotsType, TimetableContext } from './context';
 import Column from './parts/Column';
+import DateTitle from './parts/DateTitle';
 import { getAvailableTimes } from './utils';
 
 // api 연결 후 지울 것
-type DateType = {
+export type DateType = {
   month: string | undefined;
   day: string | undefined;
   dayOfWeek: string | undefined;
@@ -86,7 +87,8 @@ function Timetable() {
         setSelectedSlots,
       }}
     >
-      <StyledTimetable>
+      <DateTitle availableDates={availableDates} />
+      <Table>
         {availableDates.map((date) => (
           <Column
             key={Object.values(date).join('/')}
@@ -95,14 +97,14 @@ function Timetable() {
           />
         ))}
         {emptyDates && emptyDates.map((value) => <EmptyColumn key={value} />)}
-      </StyledTimetable>
+      </Table>
     </TimetableContext.Provider>
   );
 }
 
 export default Timetable;
 
-const StyledTimetable = styled.div`
+const Table = styled.div`
   display: flex;
   border-bottom: 1px solid ${({ theme }) => theme.colors.grey7};
   border-left: 1px solid ${({ theme }) => theme.colors.grey7};
diff --git a/src/pages/selectSchedule/components/timetable/parts/DateTitle.tsx b/src/pages/selectSchedule/components/timetable/parts/DateTitle.tsx
new file mode 100644
index 00000000..4ffbafb4
--- /dev/null
+++ b/src/pages/selectSchedule/components/timetable/parts/DateTitle.tsx
@@ -0,0 +1,46 @@
+import Text from 'components/atomComponents/Text';
+import styled from 'styled-components';
+import { theme } from 'styles/theme';
+
+import { DateType } from '../Timetable';
+
+interface DateTitleProps {
+  availableDates: DateType[];
+}
+
+function DateTitle({ availableDates }: DateTitleProps) {
+  return (
+    <DateTitleWrapper>
+      {availableDates.map((date) => {
+        const { month, day, dayOfWeek } = date;
+        return (
+          <Date key={[month, day, dayOfWeek].join('/')}>
+            <Text font={'body4'} color={theme.colors.grey6}>
+              {month ?? ''}/{day ?? ''}
+            </Text>
+            <Text font={'body4'} color={theme.colors.grey4}>
+              {dayOfWeek ?? ''}
+            </Text>
+          </Date>
+        );
+      })}
+    </DateTitleWrapper>
+  );
+}
+
+const DateTitleWrapper = styled.div`
+  display: flex;
+  gap: 1px;
+  margin-bottom:0.8rem;
+  padding-left: 1px;
+`;
+
+const Date = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.13rem;
+  align-items: center;
+  width: 4.4rem;
+`;
+
+export default DateTitle;

From df92469fc93164fc7553d9927e93baa404099a09 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Fri, 21 Jun 2024 23:48:14 +0900
Subject: [PATCH 11/62] =?UTF-8?q?fix:=20DateTitle=20->=20ColumnTitle=20?=
 =?UTF-8?q?=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/timetable/Timetable.tsx        | 24 ++++++++++---------
 .../parts/{DateTitle.tsx => ColumnTitle.tsx}  | 12 +++++-----
 2 files changed, 19 insertions(+), 17 deletions(-)
 rename src/pages/selectSchedule/components/timetable/parts/{DateTitle.tsx => ColumnTitle.tsx} (80%)

diff --git a/src/pages/selectSchedule/components/timetable/Timetable.tsx b/src/pages/selectSchedule/components/timetable/Timetable.tsx
index 8df1034c..53dfdb9d 100644
--- a/src/pages/selectSchedule/components/timetable/Timetable.tsx
+++ b/src/pages/selectSchedule/components/timetable/Timetable.tsx
@@ -87,17 +87,19 @@ function Timetable() {
         setSelectedSlots,
       }}
     >
-      <DateTitle availableDates={availableDates} />
-      <Table>
-        {availableDates.map((date) => (
-          <Column
-            key={Object.values(date).join('/')}
-            date={Object.values(date).join('/')}
-            timeSlots={timeSlots}
-          />
-        ))}
-        {emptyDates && emptyDates.map((value) => <EmptyColumn key={value} />)}
-      </Table>
+      <>
+        <DateTitle availableDates={availableDates} />
+        <Table>
+          {availableDates.map((date) => (
+            <Column
+              key={Object.values(date).join('/')}
+              date={Object.values(date).join('/')}
+              timeSlots={timeSlots}
+            />
+          ))}
+          {emptyDates && emptyDates.map((value) => <EmptyColumn key={value} />)}
+        </Table>
+      </>
     </TimetableContext.Provider>
   );
 }
diff --git a/src/pages/selectSchedule/components/timetable/parts/DateTitle.tsx b/src/pages/selectSchedule/components/timetable/parts/ColumnTitle.tsx
similarity index 80%
rename from src/pages/selectSchedule/components/timetable/parts/DateTitle.tsx
rename to src/pages/selectSchedule/components/timetable/parts/ColumnTitle.tsx
index 4ffbafb4..6c3090ef 100644
--- a/src/pages/selectSchedule/components/timetable/parts/DateTitle.tsx
+++ b/src/pages/selectSchedule/components/timetable/parts/ColumnTitle.tsx
@@ -4,13 +4,13 @@ import { theme } from 'styles/theme';
 
 import { DateType } from '../Timetable';
 
-interface DateTitleProps {
+interface ColumnTitleProps {
   availableDates: DateType[];
 }
 
-function DateTitle({ availableDates }: DateTitleProps) {
+function ColumnTitle({ availableDates }: ColumnTitleProps) {
   return (
-    <DateTitleWrapper>
+    <ColumnTitleWrapper>
       {availableDates.map((date) => {
         const { month, day, dayOfWeek } = date;
         return (
@@ -24,11 +24,11 @@ function DateTitle({ availableDates }: DateTitleProps) {
           </Date>
         );
       })}
-    </DateTitleWrapper>
+    </ColumnTitleWrapper>
   );
 }
 
-const DateTitleWrapper = styled.div`
+const ColumnTitleWrapper = styled.div`
   display: flex;
   gap: 1px;
   margin-bottom:0.8rem;
@@ -43,4 +43,4 @@ const Date = styled.div`
   width: 4.4rem;
 `;
 
-export default DateTitle;
+export default ColumnTitle;

From 31c429df2ce2cb23cc5528f21c5c3a682860a261 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 00:29:21 +0900
Subject: [PATCH 12/62] =?UTF-8?q?feat:=20SlotTitle=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/timetable/Timetable.tsx        | 43 +++++++++++++------
 .../timetable/parts/ColumnTitle.tsx           |  1 -
 .../components/timetable/parts/SlotTitle.tsx  | 38 ++++++++++++++++
 3 files changed, 67 insertions(+), 15 deletions(-)
 create mode 100644 src/pages/selectSchedule/components/timetable/parts/SlotTitle.tsx

diff --git a/src/pages/selectSchedule/components/timetable/Timetable.tsx b/src/pages/selectSchedule/components/timetable/Timetable.tsx
index 53dfdb9d..287f4434 100644
--- a/src/pages/selectSchedule/components/timetable/Timetable.tsx
+++ b/src/pages/selectSchedule/components/timetable/Timetable.tsx
@@ -4,7 +4,8 @@ import styled from 'styled-components';
 
 import { SelectedSlotsType, TimetableContext } from './context';
 import Column from './parts/Column';
-import DateTitle from './parts/DateTitle';
+import DateTitle from './parts/ColumnTitle';
+import SlotTitle from './parts/SlotTitle';
 import { getAvailableTimes } from './utils';
 
 // api 연결 후 지울 것
@@ -87,25 +88,39 @@ function Timetable() {
         setSelectedSlots,
       }}
     >
-      <>
-        <DateTitle availableDates={availableDates} />
-        <Table>
-          {availableDates.map((date) => (
-            <Column
-              key={Object.values(date).join('/')}
-              date={Object.values(date).join('/')}
-              timeSlots={timeSlots}
-            />
-          ))}
-          {emptyDates && emptyDates.map((value) => <EmptyColumn key={value} />)}
-        </Table>
-      </>
+      <TimetableWrapper>
+        <SlotTitle timeSlots={timeSlots} />
+        <TableWrapper>
+          <DateTitle availableDates={availableDates} />
+          <Table>
+            {availableDates.map((date) => (
+              <Column
+                key={Object.values(date).join('/')}
+                date={Object.values(date).join('/')}
+                timeSlots={timeSlots}
+              />
+            ))}
+            {emptyDates && emptyDates.map((value) => <EmptyColumn key={value} />)}
+          </Table>
+        </TableWrapper>
+      </TimetableWrapper>
     </TimetableContext.Provider>
   );
 }
 
 export default Timetable;
 
+const TimetableWrapper = styled.div`
+  display: flex;
+  gap: 0.75rem;
+`;
+
+const TableWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+`;
+
 const Table = styled.div`
   display: flex;
   border-bottom: 1px solid ${({ theme }) => theme.colors.grey7};
diff --git a/src/pages/selectSchedule/components/timetable/parts/ColumnTitle.tsx b/src/pages/selectSchedule/components/timetable/parts/ColumnTitle.tsx
index 6c3090ef..0f22c570 100644
--- a/src/pages/selectSchedule/components/timetable/parts/ColumnTitle.tsx
+++ b/src/pages/selectSchedule/components/timetable/parts/ColumnTitle.tsx
@@ -31,7 +31,6 @@ function ColumnTitle({ availableDates }: ColumnTitleProps) {
 const ColumnTitleWrapper = styled.div`
   display: flex;
   gap: 1px;
-  margin-bottom:0.8rem;
   padding-left: 1px;
 `;
 
diff --git a/src/pages/selectSchedule/components/timetable/parts/SlotTitle.tsx b/src/pages/selectSchedule/components/timetable/parts/SlotTitle.tsx
new file mode 100644
index 00000000..2f95ff63
--- /dev/null
+++ b/src/pages/selectSchedule/components/timetable/parts/SlotTitle.tsx
@@ -0,0 +1,38 @@
+import Text from 'components/atomComponents/Text';
+import styled from 'styled-components';
+import { theme } from 'styles/theme';
+
+interface SlotTitleProps {
+  timeSlots: string[];
+}
+
+function SlotTitle({ timeSlots }: SlotTitleProps) {
+  const parsedTimeSlots = timeSlots
+    .filter((slot) => !slot.endsWith('30'))
+    .map((slot) => parseInt(slot.split(':')[0]));
+  parsedTimeSlots.push(24);
+
+  return (
+    <SlotTitleWrapper>
+      {parsedTimeSlots.map((slot) => (
+        <>
+          <Text font="body4" color={theme.colors.grey5} key={slot}>
+            {slot}
+          </Text>
+          <Text font="body4" color={theme.colors.grey5} key={slot}>
+            {''}
+          </Text>
+        </>
+      ))}
+    </SlotTitleWrapper>
+  );
+}
+
+export default SlotTitle;
+
+const SlotTitleWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+  margin-top: 3.3rem;
+`;

From a307688f064ed70f42b47c49c1f3b7b5b1cbffcd Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 00:45:16 +0900
Subject: [PATCH 13/62] =?UTF-8?q?fix:=20SlotTitle=20key=20=EB=AC=B8?=
 =?UTF-8?q?=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/timetable/Timetable.tsx        | 26 +------------------
 .../components/timetable/parts/Slot.tsx       |  6 ++++-
 .../components/timetable/parts/SlotTitle.tsx  | 11 +++++---
 3 files changed, 13 insertions(+), 30 deletions(-)

diff --git a/src/pages/selectSchedule/components/timetable/Timetable.tsx b/src/pages/selectSchedule/components/timetable/Timetable.tsx
index 287f4434..d5559065 100644
--- a/src/pages/selectSchedule/components/timetable/Timetable.tsx
+++ b/src/pages/selectSchedule/components/timetable/Timetable.tsx
@@ -54,31 +54,7 @@ const timeSlots = getAvailableTimes(preferTimes);
 
 function Timetable() {
   const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
-  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotsType>({
-    // 시간표 색칠을 테스트하기 위한 더미 값
-    '6/20/목': [
-      {
-        startSlot: '09:00',
-        endSlot: '13:00',
-      },
-    ],
-    '6/21/금': [
-      {
-        startSlot: '15:00',
-        endSlot: '18:00',
-      },
-    ],
-    '6/22/토': [
-      {
-        startSlot: '12:00',
-        endSlot: '12:00',
-      },
-      {
-        startSlot: '17:30',
-        endSlot: '20:00',
-      },
-    ],
-  });
+  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotsType>({});
   return (
     <TimetableContext.Provider
       value={{
diff --git a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
index 0aeb0d54..b9ac0bbb 100644
--- a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
+++ b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
@@ -1,13 +1,17 @@
 import styled from 'styled-components';
 
+import { useTimetableContext } from '../context';
+
 interface SlotProps {
   slot: string;
   isSelectedSlot: boolean;
 }
 
 function Slot({ slot, isSelectedSlot }: SlotProps) {
-  const borderStyle = slot.endsWith(':30') ? 'dashed' : 'solid';
+  const { startSlot, setStartSlot, selectedSlots } = useTimetableContext();
+  console.log(startSlot);
 
+  const borderStyle = slot.endsWith(':30') ? 'dashed' : 'solid';
   return <StyledSlot $borderStyle={borderStyle} $isSelected={isSelectedSlot} />;
 }
 
diff --git a/src/pages/selectSchedule/components/timetable/parts/SlotTitle.tsx b/src/pages/selectSchedule/components/timetable/parts/SlotTitle.tsx
index 2f95ff63..70d8c88c 100644
--- a/src/pages/selectSchedule/components/timetable/parts/SlotTitle.tsx
+++ b/src/pages/selectSchedule/components/timetable/parts/SlotTitle.tsx
@@ -1,3 +1,5 @@
+import { Fragment } from 'react';
+
 import Text from 'components/atomComponents/Text';
 import styled from 'styled-components';
 import { theme } from 'styles/theme';
@@ -11,18 +13,19 @@ function SlotTitle({ timeSlots }: SlotTitleProps) {
     .filter((slot) => !slot.endsWith('30'))
     .map((slot) => parseInt(slot.split(':')[0]));
   parsedTimeSlots.push(24);
+  console.log(parsedTimeSlots);
 
   return (
     <SlotTitleWrapper>
       {parsedTimeSlots.map((slot) => (
-        <>
-          <Text font="body4" color={theme.colors.grey5} key={slot}>
+        <Fragment key={slot}>
+          <Text font="body4" color={theme.colors.grey5} key={`${slot}-fill`}>
             {slot}
           </Text>
-          <Text font="body4" color={theme.colors.grey5} key={slot}>
+          <Text font="body4" color={theme.colors.grey5} key={`${slot}-empty`}>
             {''}
           </Text>
-        </>
+        </Fragment>
       ))}
     </SlotTitleWrapper>
   );

From 385ae88e4a39aa4bd561f0e5b89e01c9d13bde18 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 01:16:11 +0900
Subject: [PATCH 14/62] =?UTF-8?q?fix:=20selectedSlot=20=EA=B0=9D=EC=B2=B4?=
 =?UTF-8?q?=20=ED=98=95=ED=83=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/timetable/Timetable.tsx        | 18 ++++++++++++-
 .../components/timetable/context.ts           | 13 ++++-----
 .../components/timetable/parts/Column.tsx     | 13 +++++----
 .../components/timetable/parts/Slot.tsx       | 27 ++++++++++++++++---
 .../components/timetable/parts/SlotTitle.tsx  |  1 -
 5 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/src/pages/selectSchedule/components/timetable/Timetable.tsx b/src/pages/selectSchedule/components/timetable/Timetable.tsx
index d5559065..4d1f1447 100644
--- a/src/pages/selectSchedule/components/timetable/Timetable.tsx
+++ b/src/pages/selectSchedule/components/timetable/Timetable.tsx
@@ -54,7 +54,23 @@ const timeSlots = getAvailableTimes(preferTimes);
 
 function Timetable() {
   const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
-  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotsType>({});
+  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotsType>({
+    0: {
+      date: '6/20/목',
+      startSlot: '09:00',
+      endSlot: '15:00',
+    },
+    1: {
+      date: '6/20/목',
+      startSlot: '19:00',
+      endSlot: '23:00',
+    },
+    2: {
+      date: '6/21/금',
+      startSlot: '09:00',
+      endSlot: '15:00',
+    },
+  });
   return (
     <TimetableContext.Provider
       value={{
diff --git a/src/pages/selectSchedule/components/timetable/context.ts b/src/pages/selectSchedule/components/timetable/context.ts
index 412d64ea..94d14cf6 100644
--- a/src/pages/selectSchedule/components/timetable/context.ts
+++ b/src/pages/selectSchedule/components/timetable/context.ts
@@ -1,16 +1,17 @@
-import { ReactNode, createContext, useContext } from 'react';
+import { createContext, useContext } from 'react';
 
-export type SelectedSlotsType = {
-  [date: string]: {
+export type SelectedSlotType = {
+  [key: number]: {
+    date: string;
     startSlot: string;
     endSlot: string;
-  }[];
+  };
 };
 
 type TimetableContextType = {
-  startSlot?: ReactNode;
+  startSlot?: string;
   setStartSlot: (startSlot?: string) => void;
-  selectedSlots: SelectedSlotsType;
+  selectedSlots: SelectedSlotType;
   setSelectedSlots: (selectedSlots: SelectedSlotsType) => void;
 };
 
diff --git a/src/pages/selectSchedule/components/timetable/parts/Column.tsx b/src/pages/selectSchedule/components/timetable/parts/Column.tsx
index fa307fca..ee91745e 100644
--- a/src/pages/selectSchedule/components/timetable/parts/Column.tsx
+++ b/src/pages/selectSchedule/components/timetable/parts/Column.tsx
@@ -10,18 +10,17 @@ interface ColumnProps {
 
 function Column({ date, timeSlots }: ColumnProps) {
   const { selectedSlots } = useTimetableContext();
-  const selectedSlotsPerDate = selectedSlots[date] ?? [];
+  const selectedSlotsPerDate = Object.values(selectedSlots).filter((slot) => slot.date === date);
 
   return (
     <StyledColumn>
       {timeSlots.map((timeSlot) => {
-        const isSelectedSlot = selectedSlotsPerDate.some(({ startSlot, endSlot }) => timeSlot >= startSlot && timeSlot <= endSlot);
+        const isSelected = selectedSlotsPerDate.some(
+          ({ startSlot, endSlot }) => timeSlot >= startSlot && timeSlot <= endSlot,
+        );
         return (
-        <Slot
-          key={`${date}/${timeSlot}`}
-          slot={`${date}/${timeSlot}`}
-          isSelectedSlot={isSelectedSlot}
-        />)
+          <Slot key={`${date}/${timeSlot}`} slot={`${date}/${timeSlot}`} isSelected={isSelected} />
+        );
       })}
     </StyledColumn>
   );
diff --git a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
index b9ac0bbb..fbc4c968 100644
--- a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
+++ b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
@@ -4,15 +4,33 @@ import { useTimetableContext } from '../context';
 
 interface SlotProps {
   slot: string;
-  isSelectedSlot: boolean;
+  isSelected: boolean;
 }
 
-function Slot({ slot, isSelectedSlot }: SlotProps) {
+function Slot({ slot, isSelected }: SlotProps) {
   const { startSlot, setStartSlot, selectedSlots } = useTimetableContext();
-  console.log(startSlot);
+
+  const onClickSlot = (targetSlot: string) => {
+    if (isSelected) {
+      const date = slot.substring(0, slot.lastIndexOf('/'));
+      const updatedSlots = selectedSlots[date].filter(
+        (slot) => !(targetSlot >= slot.startSlot && targetSlot <= slot.endSlot),
+      );
+      if (selectedSlots[date].length === 0) {
+        delete selectedSlots[date];
+      }
+      console.log(updatedSlots);
+    }
+  };
 
   const borderStyle = slot.endsWith(':30') ? 'dashed' : 'solid';
-  return <StyledSlot $borderStyle={borderStyle} $isSelected={isSelectedSlot} />;
+  return (
+    <StyledSlot
+      $borderStyle={borderStyle}
+      $isSelected={isSelected}
+      onClick={() => onClickSlot(slot)}
+    />
+  );
 }
 
 export default Slot;
@@ -21,6 +39,7 @@ const StyledSlot = styled.div<{ $borderStyle: string; $isSelected: boolean }>`
   border-top: 1px ${({ $borderStyle }) => $borderStyle} ${({ theme }) => theme.colors.grey7};
   background-color: ${({ $isSelected, theme }) =>
     $isSelected ? theme.colors.main1 : 'transparent'};
+  cursor: pointer;
   width: 4.4rem;
   height: 2rem;
 `;
diff --git a/src/pages/selectSchedule/components/timetable/parts/SlotTitle.tsx b/src/pages/selectSchedule/components/timetable/parts/SlotTitle.tsx
index 70d8c88c..3d01fcc6 100644
--- a/src/pages/selectSchedule/components/timetable/parts/SlotTitle.tsx
+++ b/src/pages/selectSchedule/components/timetable/parts/SlotTitle.tsx
@@ -13,7 +13,6 @@ function SlotTitle({ timeSlots }: SlotTitleProps) {
     .filter((slot) => !slot.endsWith('30'))
     .map((slot) => parseInt(slot.split(':')[0]));
   parsedTimeSlots.push(24);
-  console.log(parsedTimeSlots);
 
   return (
     <SlotTitleWrapper>

From 920566c9ea411419839f37519d69410f6023a05d Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 01:32:56 +0900
Subject: [PATCH 15/62] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=EB=90=9C=20=EB=B8=94=EB=9F=AD=20=ED=81=B4=EB=A6=AD?=
 =?UTF-8?q?=EC=8B=9C=20=EC=82=AD=EC=A0=9C=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/timetable/parts/Column.tsx     | 17 +++++++++++----
 .../components/timetable/parts/Slot.tsx       | 21 +++++++------------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/pages/selectSchedule/components/timetable/parts/Column.tsx b/src/pages/selectSchedule/components/timetable/parts/Column.tsx
index ee91745e..1a6af5be 100644
--- a/src/pages/selectSchedule/components/timetable/parts/Column.tsx
+++ b/src/pages/selectSchedule/components/timetable/parts/Column.tsx
@@ -10,16 +10,25 @@ interface ColumnProps {
 
 function Column({ date, timeSlots }: ColumnProps) {
   const { selectedSlots } = useTimetableContext();
-  const selectedSlotsPerDate = Object.values(selectedSlots).filter((slot) => slot.date === date);
+  const selectedSlotsPerDate = Object.entries(selectedSlots).filter(
+    ([, slot]) => slot.date === date,
+  );
 
   return (
     <StyledColumn>
       {timeSlots.map((timeSlot) => {
-        const isSelected = selectedSlotsPerDate.some(
-          ({ startSlot, endSlot }) => timeSlot >= startSlot && timeSlot <= endSlot,
+        const belongingEntry = selectedSlotsPerDate.find(
+          ([, { startSlot, endSlot }]) => timeSlot >= startSlot && timeSlot <= endSlot,
         );
+
+        const selectedEntryId = belongingEntry ? parseInt(belongingEntry[0]) : undefined;
+
         return (
-          <Slot key={`${date}/${timeSlot}`} slot={`${date}/${timeSlot}`} isSelected={isSelected} />
+          <Slot
+            key={`${date}/${timeSlot}`}
+            slot={`${date}/${timeSlot}`}
+            selectedEntryId={selectedEntryId}
+          />
         );
       })}
     </StyledColumn>
diff --git a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
index fbc4c968..f2b85acb 100644
--- a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
+++ b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
@@ -4,22 +4,17 @@ import { useTimetableContext } from '../context';
 
 interface SlotProps {
   slot: string;
-  isSelected: boolean;
+  selectedEntryId?: number;
 }
 
-function Slot({ slot, isSelected }: SlotProps) {
-  const { startSlot, setStartSlot, selectedSlots } = useTimetableContext();
+function Slot({ slot, selectedEntryId }: SlotProps) {
+  const { startSlot, setStartSlot, selectedSlots, setSelectedSlots } = useTimetableContext();
 
   const onClickSlot = (targetSlot: string) => {
-    if (isSelected) {
-      const date = slot.substring(0, slot.lastIndexOf('/'));
-      const updatedSlots = selectedSlots[date].filter(
-        (slot) => !(targetSlot >= slot.startSlot && targetSlot <= slot.endSlot),
-      );
-      if (selectedSlots[date].length === 0) {
-        delete selectedSlots[date];
-      }
-      console.log(updatedSlots);
+    if (selectedEntryId !== undefined) {
+      const newSelectedSlots = { ...selectedSlots };
+      delete newSelectedSlots[selectedEntryId];
+      setSelectedSlots(newSelectedSlots);
     }
   };
 
@@ -27,7 +22,7 @@ function Slot({ slot, isSelected }: SlotProps) {
   return (
     <StyledSlot
       $borderStyle={borderStyle}
-      $isSelected={isSelected}
+      $isSelected={selectedEntryId !== undefined}
       onClick={() => onClickSlot(slot)}
     />
   );

From cbaefedf285af4c89849e19733d19202e3b8de6b Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 01:47:43 +0900
Subject: [PATCH 16/62] =?UTF-8?q?feat:=20=ED=83=AD=ED=88=AC=ED=83=AD?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B8=94=EB=9F=AD=20=EC=83=9D=EC=84=B1=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/timetable/parts/Slot.tsx       | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
index f2b85acb..2323645c 100644
--- a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
+++ b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
@@ -15,6 +15,27 @@ function Slot({ slot, selectedEntryId }: SlotProps) {
       const newSelectedSlots = { ...selectedSlots };
       delete newSelectedSlots[selectedEntryId];
       setSelectedSlots(newSelectedSlots);
+      setStartSlot(undefined);
+    } else {
+      if (startSlot === undefined) {
+        setStartSlot(targetSlot);
+      } else {
+        const dateOfStartSlot = startSlot.substring(0, startSlot.lastIndexOf('/'));
+        const dateOfTargetSlot = targetSlot.substring(0, targetSlot.lastIndexOf('/'));
+        if (dateOfStartSlot === dateOfTargetSlot) {
+          const newSelectedSlot = {
+            date: dateOfStartSlot,
+            startSlot: startSlot.substring(startSlot.lastIndexOf('/') + 1),
+            endSlot: targetSlot.substring(targetSlot.lastIndexOf('/') + 1),
+          };
+          const keys = Object.keys(selectedSlots).map(Number);
+          console.log(keys);
+          const newKey = keys.length ? Math.max(...keys) + 1 : 0;
+          selectedSlots[newKey] = newSelectedSlot;
+          console.log(selectedSlots);
+        }
+        setStartSlot(undefined);
+      }
     }
   };
 

From 25c59cb25c50866e94c17f3a618efa04da7f8eff Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 02:08:41 +0900
Subject: [PATCH 17/62] =?UTF-8?q?feat:=20=EC=84=A0=ED=83=9D=EC=8B=9C?=
 =?UTF-8?q?=EC=9E=91=EC=8B=9C=20=EC=A0=90=EC=84=A0=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/timetable/Timetable.tsx        | 18 +--------
 .../components/timetable/parts/Slot.tsx       | 40 ++++++++++++++-----
 2 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/src/pages/selectSchedule/components/timetable/Timetable.tsx b/src/pages/selectSchedule/components/timetable/Timetable.tsx
index 4d1f1447..d5559065 100644
--- a/src/pages/selectSchedule/components/timetable/Timetable.tsx
+++ b/src/pages/selectSchedule/components/timetable/Timetable.tsx
@@ -54,23 +54,7 @@ const timeSlots = getAvailableTimes(preferTimes);
 
 function Timetable() {
   const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
-  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotsType>({
-    0: {
-      date: '6/20/목',
-      startSlot: '09:00',
-      endSlot: '15:00',
-    },
-    1: {
-      date: '6/20/목',
-      startSlot: '19:00',
-      endSlot: '23:00',
-    },
-    2: {
-      date: '6/21/금',
-      startSlot: '09:00',
-      endSlot: '15:00',
-    },
-  });
+  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotsType>({});
   return (
     <TimetableContext.Provider
       value={{
diff --git a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
index 2323645c..581ccf8b 100644
--- a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
+++ b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
@@ -29,10 +29,8 @@ function Slot({ slot, selectedEntryId }: SlotProps) {
             endSlot: targetSlot.substring(targetSlot.lastIndexOf('/') + 1),
           };
           const keys = Object.keys(selectedSlots).map(Number);
-          console.log(keys);
           const newKey = keys.length ? Math.max(...keys) + 1 : 0;
           selectedSlots[newKey] = newSelectedSlot;
-          console.log(selectedSlots);
         }
         setStartSlot(undefined);
       }
@@ -40,22 +38,42 @@ function Slot({ slot, selectedEntryId }: SlotProps) {
   };
 
   const borderStyle = slot.endsWith(':30') ? 'dashed' : 'solid';
-  return (
-    <StyledSlot
-      $borderStyle={borderStyle}
-      $isSelected={selectedEntryId !== undefined}
-      onClick={() => onClickSlot(slot)}
-    />
-  );
+
+  if (slot === startSlot) {
+    return (
+      <SelectingSlot
+        $borderStyle={borderStyle}
+        $isSelected={selectedEntryId !== undefined}
+        onClick={() => onClickSlot(slot)}
+      />
+    );
+  } else {
+    return (
+      <DefaultSlot
+        $borderStyle={borderStyle}
+        $isSelected={selectedEntryId !== undefined}
+        onClick={() => onClickSlot(slot)}
+      />
+    );
+  }
 }
 
 export default Slot;
 
-const StyledSlot = styled.div<{ $borderStyle: string; $isSelected: boolean }>`
+const DefaultSlot = styled.div<{ $borderStyle: string; $isSelected: boolean }>`
   border-top: 1px ${({ $borderStyle }) => $borderStyle} ${({ theme }) => theme.colors.grey7};
   background-color: ${({ $isSelected, theme }) =>
     $isSelected ? theme.colors.main1 : 'transparent'};
   cursor: pointer;
   width: 4.4rem;
-  height: 2rem;
+  height: 2.2rem;
+`;
+
+const SelectingSlot = styled.div<{ $borderStyle: string; $isSelected: boolean }>`
+  border: 1px dashed ${({ theme }) => theme.colors.main5};
+  background-color: ${({ $isSelected, theme }) =>
+    $isSelected ? theme.colors.main1 : 'transparent'};
+  cursor: pointer;
+  width: 4.4rem;
+  height: 2.2rem;
 `;

From 8d80601b47ecb1c8af8061d1d31e380d6b329baa Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 02:10:05 +0900
Subject: [PATCH 18/62] =?UTF-8?q?fix:=20SlotTitle=20gap=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../selectSchedule/components/timetable/parts/SlotTitle.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/selectSchedule/components/timetable/parts/SlotTitle.tsx b/src/pages/selectSchedule/components/timetable/parts/SlotTitle.tsx
index 3d01fcc6..963c63b4 100644
--- a/src/pages/selectSchedule/components/timetable/parts/SlotTitle.tsx
+++ b/src/pages/selectSchedule/components/timetable/parts/SlotTitle.tsx
@@ -35,6 +35,6 @@ export default SlotTitle;
 const SlotTitleWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 1.2rem;
+  gap: 1.4rem;
   margin-top: 3.3rem;
 `;

From 0065d682dafd72716a6b344e5eb43ef9a7d01a52 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 02:25:07 +0900
Subject: [PATCH 19/62] =?UTF-8?q?feat:=20=EC=84=A0=ED=83=9D=EC=9D=84=20?=
 =?UTF-8?q?=EC=8B=9C=EC=9E=91=ED=95=9C=20=EC=83=81=ED=83=9C=EB=A1=9C=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=20=EC=84=A0=ED=83=9D=EB=90=9C=20=EB=B8=94?=
 =?UTF-8?q?=EB=9F=AD=EC=9D=84=20=EB=88=84=EB=A5=B4=EB=A9=B4=20=EB=B0=94?=
 =?UTF-8?q?=EB=A1=9C=20=EC=82=AD=EC=A0=9C=ED=95=98=EC=A7=80=20=EC=95=8A?=
 =?UTF-8?q?=EA=B3=A0=20=EC=84=A0=ED=83=9D=EC=83=81=ED=83=9C=20=EC=A4=91?=
 =?UTF-8?q?=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/timetable/parts/Slot.tsx       | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
index 581ccf8b..c533a088 100644
--- a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
+++ b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
@@ -12,9 +12,11 @@ function Slot({ slot, selectedEntryId }: SlotProps) {
 
   const onClickSlot = (targetSlot: string) => {
     if (selectedEntryId !== undefined) {
-      const newSelectedSlots = { ...selectedSlots };
-      delete newSelectedSlots[selectedEntryId];
-      setSelectedSlots(newSelectedSlots);
+      if (startSlot === undefined) {
+        const newSelectedSlots = { ...selectedSlots };
+        delete newSelectedSlots[selectedEntryId];
+        setSelectedSlots(newSelectedSlots);
+      }
       setStartSlot(undefined);
     } else {
       if (startSlot === undefined) {
@@ -38,23 +40,16 @@ function Slot({ slot, selectedEntryId }: SlotProps) {
   };
 
   const borderStyle = slot.endsWith(':30') ? 'dashed' : 'solid';
+  const styledSlotProps = {
+    $borderStyle: borderStyle,
+    $isSelected: selectedEntryId !== undefined,
+    onClick: () => onClickSlot(slot),
+  };
 
   if (slot === startSlot) {
-    return (
-      <SelectingSlot
-        $borderStyle={borderStyle}
-        $isSelected={selectedEntryId !== undefined}
-        onClick={() => onClickSlot(slot)}
-      />
-    );
+    return <SelectingSlot {...styledSlotProps} />;
   } else {
-    return (
-      <DefaultSlot
-        $borderStyle={borderStyle}
-        $isSelected={selectedEntryId !== undefined}
-        onClick={() => onClickSlot(slot)}
-      />
-    );
+    return <DefaultSlot {...styledSlotProps} />;
   }
 }
 

From d1479004496cd9dc6ca52f3dd09d2113adf4edea Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 02:49:11 +0900
Subject: [PATCH 20/62] =?UTF-8?q?refactor:=20Slot=20=EC=84=A0=ED=83=9D=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=EC=9D=84=20custom=20hook=EC=9C=BC=EB=A1=9C?=
 =?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

---
 .../timetable/hooks/useSlotSelection.ts       | 47 +++++++++++++++++++
 .../components/timetable/parts/Slot.tsx       | 35 ++------------
 2 files changed, 50 insertions(+), 32 deletions(-)
 create mode 100644 src/pages/selectSchedule/components/timetable/hooks/useSlotSelection.ts

diff --git a/src/pages/selectSchedule/components/timetable/hooks/useSlotSelection.ts b/src/pages/selectSchedule/components/timetable/hooks/useSlotSelection.ts
new file mode 100644
index 00000000..f86e1fd4
--- /dev/null
+++ b/src/pages/selectSchedule/components/timetable/hooks/useSlotSelection.ts
@@ -0,0 +1,47 @@
+import { useTimetableContext } from '../context'
+
+const useSlotSeletion = () => {
+    const {startSlot, setStartSlot, selectedSlots, setSelectedSlots} = useTimetableContext();
+
+    const handleSelectSlot = (targetSlot: string) => {
+        setStartSlot(targetSlot);
+    }
+
+    const handleCompleteSlot = (targetSlot: string) => {
+        const dateOfStartSlot = startSlot?.substring(0, startSlot.lastIndexOf('/'));
+        const dateOfTargetSlot = targetSlot.substring(0, targetSlot.lastIndexOf('/'))
+        if (dateOfStartSlot === dateOfTargetSlot){
+            const newSelectedSlot = {
+                date:dateOfStartSlot,
+                startSlot:startSlot?.substring(startSlot.lastIndexOf('/')+1),
+                endSlot:targetSlot.substring(targetSlot.lastIndexOf('/')+1)
+            }
+
+            const keys = Object.keys(selectedSlots).map(Number)
+            const newKey = keys.length ? Math.max(...keys) + 1 : 0;
+            setSelectedSlots({...selectedSlots, [newKey]:newSelectedSlot})
+        }
+        setStartSlot(undefined);
+    }
+
+    const handleDeleteSlot = (selectedEntryId: number) => {
+        const newSelectedSlots = {...selectedSlots};
+        delete newSelectedSlots[selectedEntryId];
+        setSelectedSlots(newSelectedSlots);
+        setStartSlot(undefined)
+    }
+
+    const onClickSlot = (targetSlot:string, selectedEntryId?:number)=>{
+        if (selectedEntryId !== undefined){
+            handleDeleteSlot(selectedEntryId);
+        } else if (startSlot !== undefined){
+            handleCompleteSlot(targetSlot)
+        } else {
+            handleSelectSlot(targetSlot)
+        }
+    }
+
+    return {startSlot, onClickSlot}
+}
+
+export default useSlotSeletion
\ No newline at end of file
diff --git a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
index c533a088..fd2dea06 100644
--- a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
+++ b/src/pages/selectSchedule/components/timetable/parts/Slot.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { useTimetableContext } from '../context';
+import useSlotSeletion from '../hooks/useSlotSelection';
 
 interface SlotProps {
   slot: string;
@@ -8,42 +8,13 @@ interface SlotProps {
 }
 
 function Slot({ slot, selectedEntryId }: SlotProps) {
-  const { startSlot, setStartSlot, selectedSlots, setSelectedSlots } = useTimetableContext();
-
-  const onClickSlot = (targetSlot: string) => {
-    if (selectedEntryId !== undefined) {
-      if (startSlot === undefined) {
-        const newSelectedSlots = { ...selectedSlots };
-        delete newSelectedSlots[selectedEntryId];
-        setSelectedSlots(newSelectedSlots);
-      }
-      setStartSlot(undefined);
-    } else {
-      if (startSlot === undefined) {
-        setStartSlot(targetSlot);
-      } else {
-        const dateOfStartSlot = startSlot.substring(0, startSlot.lastIndexOf('/'));
-        const dateOfTargetSlot = targetSlot.substring(0, targetSlot.lastIndexOf('/'));
-        if (dateOfStartSlot === dateOfTargetSlot) {
-          const newSelectedSlot = {
-            date: dateOfStartSlot,
-            startSlot: startSlot.substring(startSlot.lastIndexOf('/') + 1),
-            endSlot: targetSlot.substring(targetSlot.lastIndexOf('/') + 1),
-          };
-          const keys = Object.keys(selectedSlots).map(Number);
-          const newKey = keys.length ? Math.max(...keys) + 1 : 0;
-          selectedSlots[newKey] = newSelectedSlot;
-        }
-        setStartSlot(undefined);
-      }
-    }
-  };
+  const { startSlot, onClickSlot } = useSlotSeletion();
 
   const borderStyle = slot.endsWith(':30') ? 'dashed' : 'solid';
   const styledSlotProps = {
     $borderStyle: borderStyle,
     $isSelected: selectedEntryId !== undefined,
-    onClick: () => onClickSlot(slot),
+    onClick: () => onClickSlot(slot, selectedEntryId),
   };
 
   if (slot === startSlot) {

From 55831c40b3f822c737f693903b5728f0906d1839 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 03:18:09 +0900
Subject: [PATCH 21/62] =?UTF-8?q?refactor:=20Column=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A5=BC=20=EC=BB=B4=ED=8F=AC=EC=A7=80?=
 =?UTF-8?q?=EC=85=98=20=ED=8C=A8=ED=84=B4=EC=9C=BC=EB=A1=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/timetable/Timetable.tsx        | 17 +++++----
 .../timetable/hooks/useSlotSelection.ts       |  6 ++--
 .../components/timetable/parts/Column.tsx     | 35 +++---------------
 .../timetable/parts/SelectionSlots.tsx        | 36 +++++++++++++++++++
 4 files changed, 55 insertions(+), 39 deletions(-)
 create mode 100644 src/pages/selectSchedule/components/timetable/parts/SelectionSlots.tsx

diff --git a/src/pages/selectSchedule/components/timetable/Timetable.tsx b/src/pages/selectSchedule/components/timetable/Timetable.tsx
index d5559065..4fc8b627 100644
--- a/src/pages/selectSchedule/components/timetable/Timetable.tsx
+++ b/src/pages/selectSchedule/components/timetable/Timetable.tsx
@@ -2,9 +2,10 @@ import { useState } from 'react';
 
 import styled from 'styled-components';
 
-import { SelectedSlotsType, TimetableContext } from './context';
+import { SelectedSlotType, TimetableContext } from './context';
 import Column from './parts/Column';
 import DateTitle from './parts/ColumnTitle';
+import SelectionSlots from './parts/SelectionSlots';
 import SlotTitle from './parts/SlotTitle';
 import { getAvailableTimes } from './utils';
 
@@ -54,7 +55,7 @@ const timeSlots = getAvailableTimes(preferTimes);
 
 function Timetable() {
   const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
-  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotsType>({});
+  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({});
   return (
     <TimetableContext.Provider
       value={{
@@ -70,11 +71,13 @@ function Timetable() {
           <DateTitle availableDates={availableDates} />
           <Table>
             {availableDates.map((date) => (
-              <Column
-                key={Object.values(date).join('/')}
-                date={Object.values(date).join('/')}
-                timeSlots={timeSlots}
-              />
+              <Column key={Object.values(date).join('/')}>
+                <SelectionSlots
+                  date={Object.values(date).join('/')}
+                  timeSlots={timeSlots}
+                  selectedSlots={selectedSlots}
+                />
+              </Column>
             ))}
             {emptyDates && emptyDates.map((value) => <EmptyColumn key={value} />)}
           </Table>
diff --git a/src/pages/selectSchedule/components/timetable/hooks/useSlotSelection.ts b/src/pages/selectSchedule/components/timetable/hooks/useSlotSelection.ts
index f86e1fd4..6b171a69 100644
--- a/src/pages/selectSchedule/components/timetable/hooks/useSlotSelection.ts
+++ b/src/pages/selectSchedule/components/timetable/hooks/useSlotSelection.ts
@@ -28,12 +28,14 @@ const useSlotSeletion = () => {
         const newSelectedSlots = {...selectedSlots};
         delete newSelectedSlots[selectedEntryId];
         setSelectedSlots(newSelectedSlots);
-        setStartSlot(undefined)
     }
 
     const onClickSlot = (targetSlot:string, selectedEntryId?:number)=>{
         if (selectedEntryId !== undefined){
-            handleDeleteSlot(selectedEntryId);
+            if (startSlot === undefined){
+                handleDeleteSlot(selectedEntryId);
+            }
+            setStartSlot(undefined)
         } else if (startSlot !== undefined){
             handleCompleteSlot(targetSlot)
         } else {
diff --git a/src/pages/selectSchedule/components/timetable/parts/Column.tsx b/src/pages/selectSchedule/components/timetable/parts/Column.tsx
index 1a6af5be..fcc1ea11 100644
--- a/src/pages/selectSchedule/components/timetable/parts/Column.tsx
+++ b/src/pages/selectSchedule/components/timetable/parts/Column.tsx
@@ -1,38 +1,13 @@
-import styled from 'styled-components';
+import { ReactNode } from 'react';
 
-import Slot from './Slot';
-import { useTimetableContext } from '../context';
+import styled from 'styled-components';
 
 interface ColumnProps {
-  date: string;
-  timeSlots: string[];
+  children: ReactNode;
 }
 
-function Column({ date, timeSlots }: ColumnProps) {
-  const { selectedSlots } = useTimetableContext();
-  const selectedSlotsPerDate = Object.entries(selectedSlots).filter(
-    ([, slot]) => slot.date === date,
-  );
-
-  return (
-    <StyledColumn>
-      {timeSlots.map((timeSlot) => {
-        const belongingEntry = selectedSlotsPerDate.find(
-          ([, { startSlot, endSlot }]) => timeSlot >= startSlot && timeSlot <= endSlot,
-        );
-
-        const selectedEntryId = belongingEntry ? parseInt(belongingEntry[0]) : undefined;
-
-        return (
-          <Slot
-            key={`${date}/${timeSlot}`}
-            slot={`${date}/${timeSlot}`}
-            selectedEntryId={selectedEntryId}
-          />
-        );
-      })}
-    </StyledColumn>
-  );
+function Column({ children }: ColumnProps) {
+  return <StyledColumn>{children}</StyledColumn>;
 }
 
 export default Column;
diff --git a/src/pages/selectSchedule/components/timetable/parts/SelectionSlots.tsx b/src/pages/selectSchedule/components/timetable/parts/SelectionSlots.tsx
new file mode 100644
index 00000000..d4854cad
--- /dev/null
+++ b/src/pages/selectSchedule/components/timetable/parts/SelectionSlots.tsx
@@ -0,0 +1,36 @@
+import Slot from './Slot';
+import { SelectedSlotType } from '../context';
+
+interface SelectionSlotsProps {
+  date: string;
+  timeSlots: string[];
+  selectedSlots: SelectedSlotType;
+}
+
+function SelectionSlots({ date, timeSlots, selectedSlots }: SelectionSlotsProps) {
+  const selectedSlotsPerDate = Object.entries(selectedSlots).filter(
+    ([, slot]) => slot.date === date,
+  );
+
+  return (
+    <>
+      {timeSlots.map((timeSlot) => {
+        const belongingEntry = selectedSlotsPerDate.find(
+          ([, { startSlot, endSlot }]) => timeSlot >= startSlot && timeSlot <= endSlot,
+        );
+
+        const selectedEntryId = belongingEntry ? parseInt(belongingEntry[0]) : undefined;
+
+        return (
+          <Slot
+            key={`${date}/${timeSlot}`}
+            slot={`${date}/${timeSlot}`}
+            selectedEntryId={selectedEntryId}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+export default SelectionSlots;

From 34905e34a35e7982f5daaa1393d824e236f58d77 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 04:38:57 +0900
Subject: [PATCH 22/62] =?UTF-8?q?refactor:=20HOC=20=ED=8C=A8=ED=84=B4?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../timetableComponents/Timetable.tsx         |  67 ++++++++++
 .../timetableComponents}/context.ts           |   0
 .../hooks/useSlotSelection.ts                 |   0
 .../timetableComponents}/parts/Column.tsx     |   4 +-
 .../parts/ColumnTitle.tsx                     |   3 +-
 .../timetableComponents}/parts/Slot.tsx       |   0
 .../timetableComponents}/parts/SlotTitle.tsx  |   0
 .../timetableComponents}/utils.ts             |   0
 src/pages/selectSchedule/SelectSchedule.tsx   |  67 +++++++++-
 .../{timetable/parts => }/SelectionSlots.tsx  |   8 +-
 .../components/timetable/Timetable.tsx        | 116 ------------------
 11 files changed, 137 insertions(+), 128 deletions(-)
 create mode 100644 src/components/timetableComponents/Timetable.tsx
 rename src/{pages/selectSchedule/components/timetable => components/timetableComponents}/context.ts (100%)
 rename src/{pages/selectSchedule/components/timetable => components/timetableComponents}/hooks/useSlotSelection.ts (100%)
 rename src/{pages/selectSchedule/components/timetable => components/timetableComponents}/parts/Column.tsx (78%)
 rename src/{pages/selectSchedule/components/timetable => components/timetableComponents}/parts/ColumnTitle.tsx (99%)
 rename src/{pages/selectSchedule/components/timetable => components/timetableComponents}/parts/Slot.tsx (100%)
 rename src/{pages/selectSchedule/components/timetable => components/timetableComponents}/parts/SlotTitle.tsx (100%)
 rename src/{pages/selectSchedule/components/timetable => components/timetableComponents}/utils.ts (100%)
 rename src/pages/selectSchedule/components/{timetable/parts => }/SelectionSlots.tsx (72%)
 delete mode 100644 src/pages/selectSchedule/components/timetable/Timetable.tsx

diff --git a/src/components/timetableComponents/Timetable.tsx b/src/components/timetableComponents/Timetable.tsx
new file mode 100644
index 00000000..bde346a3
--- /dev/null
+++ b/src/components/timetableComponents/Timetable.tsx
@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+
+import { DateType } from 'pages/selectSchedule/SelectSchedule';
+import styled from 'styled-components';
+
+import Column from './parts/Column';
+import DateTitle from './parts/ColumnTitle';
+import SlotTitle from './parts/SlotTitle';
+
+interface RenderProps {
+  date: string;
+  timeSlots: string[];
+}
+
+interface TimetableProps {
+  timeSlots: string[];
+  availableDates: DateType[];
+  children: (props: RenderProps) => ReactNode;
+}
+
+function Timetable({ timeSlots, availableDates, children }: TimetableProps) {
+  const emptyDates = Array.from({ length: 7 - availableDates.length }, (_, i) => `empty${i + 1}`);
+
+  return (
+    <TimetableWrapper>
+      <SlotTitle timeSlots={timeSlots} />
+      <TableWrapper>
+        <DateTitle availableDates={availableDates} />
+        <Table>
+          {availableDates.map((date) => {
+            const dateKey = Object.values(date).join('/');
+            return <Column key={dateKey}>{children({ date: dateKey, timeSlots })}</Column>;
+          })}
+          {emptyDates && emptyDates.map((value) => <EmptyColumn key={value} />)}
+        </Table>
+      </TableWrapper>
+    </TimetableWrapper>
+  );
+}
+
+export default Timetable;
+
+const TimetableWrapper = styled.div`
+  display: flex;
+  gap: 0.75rem;
+`;
+
+const TableWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+`;
+
+const Table = styled.div`
+  display: flex;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.grey7};
+  border-left: 1px solid ${({ theme }) => theme.colors.grey7};
+`;
+
+const EmptyColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid ${({ theme }) => theme.colors.grey7};
+  border-right: 1px solid ${({ theme }) => theme.colors.grey7};
+  background-color: ${({ theme }) => theme.colors.grey9};
+  width: 4.4rem;
+`;
diff --git a/src/pages/selectSchedule/components/timetable/context.ts b/src/components/timetableComponents/context.ts
similarity index 100%
rename from src/pages/selectSchedule/components/timetable/context.ts
rename to src/components/timetableComponents/context.ts
diff --git a/src/pages/selectSchedule/components/timetable/hooks/useSlotSelection.ts b/src/components/timetableComponents/hooks/useSlotSelection.ts
similarity index 100%
rename from src/pages/selectSchedule/components/timetable/hooks/useSlotSelection.ts
rename to src/components/timetableComponents/hooks/useSlotSelection.ts
diff --git a/src/pages/selectSchedule/components/timetable/parts/Column.tsx b/src/components/timetableComponents/parts/Column.tsx
similarity index 78%
rename from src/pages/selectSchedule/components/timetable/parts/Column.tsx
rename to src/components/timetableComponents/parts/Column.tsx
index fcc1ea11..894d8da6 100644
--- a/src/pages/selectSchedule/components/timetable/parts/Column.tsx
+++ b/src/components/timetableComponents/parts/Column.tsx
@@ -7,12 +7,12 @@ interface ColumnProps {
 }
 
 function Column({ children }: ColumnProps) {
-  return <StyledColumn>{children}</StyledColumn>;
+  return <ColumnWrapper>{children}</ColumnWrapper>;
 }
 
 export default Column;
 
-const StyledColumn = styled.div`
+const ColumnWrapper = styled.div`
   display: flex;
   flex-direction: column;
 
diff --git a/src/pages/selectSchedule/components/timetable/parts/ColumnTitle.tsx b/src/components/timetableComponents/parts/ColumnTitle.tsx
similarity index 99%
rename from src/pages/selectSchedule/components/timetable/parts/ColumnTitle.tsx
rename to src/components/timetableComponents/parts/ColumnTitle.tsx
index 0f22c570..c6bf61dd 100644
--- a/src/pages/selectSchedule/components/timetable/parts/ColumnTitle.tsx
+++ b/src/components/timetableComponents/parts/ColumnTitle.tsx
@@ -1,9 +1,8 @@
+import { DateType } from '../Timetable';
 import Text from 'components/atomComponents/Text';
 import styled from 'styled-components';
 import { theme } from 'styles/theme';
 
-import { DateType } from '../Timetable';
-
 interface ColumnTitleProps {
   availableDates: DateType[];
 }
diff --git a/src/pages/selectSchedule/components/timetable/parts/Slot.tsx b/src/components/timetableComponents/parts/Slot.tsx
similarity index 100%
rename from src/pages/selectSchedule/components/timetable/parts/Slot.tsx
rename to src/components/timetableComponents/parts/Slot.tsx
diff --git a/src/pages/selectSchedule/components/timetable/parts/SlotTitle.tsx b/src/components/timetableComponents/parts/SlotTitle.tsx
similarity index 100%
rename from src/pages/selectSchedule/components/timetable/parts/SlotTitle.tsx
rename to src/components/timetableComponents/parts/SlotTitle.tsx
diff --git a/src/pages/selectSchedule/components/timetable/utils.ts b/src/components/timetableComponents/utils.ts
similarity index 100%
rename from src/pages/selectSchedule/components/timetable/utils.ts
rename to src/components/timetableComponents/utils.ts
diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx
index bef2dc9f..4712222f 100644
--- a/src/pages/selectSchedule/SelectSchedule.tsx
+++ b/src/pages/selectSchedule/SelectSchedule.tsx
@@ -1,10 +1,69 @@
-import Timetable from './components/timetable/Timetable';
+import { useState } from 'react';
+
+import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context';
+import { getAvailableTimes } from 'components/timetableComponents/utils';
+
+import SelectionSlots from './components/SelectionSlots';
+import Timetable from '../../components/timetableComponents/Timetable';
+
+// api 연결 후 지울 것
+export type DateType = {
+  month: string | undefined;
+  day: string | undefined;
+  dayOfWeek: string | undefined;
+};
+
+const availableDates: DateType[] = [
+  {
+    month: '6',
+    day: '20',
+    dayOfWeek: '목',
+  },
+  {
+    month: '6',
+    day: '21',
+    dayOfWeek: '금',
+  },
+  {
+    month: '6',
+    day: '22',
+    dayOfWeek: '토',
+  },
+  {
+    month: '6',
+    day: '23',
+    dayOfWeek: '일',
+  },
+];
+
+export type SlotType = {
+  startTime: string;
+  endTime: string;
+};
+
+const preferTimes: SlotType = {
+  startTime: '06:00',
+  endTime: '24:00',
+};
+
+const timeSlots = getAvailableTimes(preferTimes);
 
 function SelectSchedule() {
+  const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
+  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({});
   return (
-    <div>
-      <Timetable />
-    </div>
+    <TimetableContext.Provider
+      value={{
+        startSlot,
+        setStartSlot,
+        selectedSlots,
+        setSelectedSlots,
+      }}
+    >
+      <Timetable timeSlots={timeSlots} availableDates={availableDates}>
+        {({ date, timeSlots }) => <SelectionSlots date={date} timeSlots={timeSlots} />}
+      </Timetable>
+    </TimetableContext.Provider>
   );
 }
 
diff --git a/src/pages/selectSchedule/components/timetable/parts/SelectionSlots.tsx b/src/pages/selectSchedule/components/SelectionSlots.tsx
similarity index 72%
rename from src/pages/selectSchedule/components/timetable/parts/SelectionSlots.tsx
rename to src/pages/selectSchedule/components/SelectionSlots.tsx
index d4854cad..3e23acaa 100644
--- a/src/pages/selectSchedule/components/timetable/parts/SelectionSlots.tsx
+++ b/src/pages/selectSchedule/components/SelectionSlots.tsx
@@ -1,13 +1,13 @@
-import Slot from './Slot';
-import { SelectedSlotType } from '../context';
+import { useTimetableContext } from '../../../components/timetableComponents/context';
+import Slot from '../../../components/timetableComponents/parts/Slot';
 
 interface SelectionSlotsProps {
   date: string;
   timeSlots: string[];
-  selectedSlots: SelectedSlotType;
 }
 
-function SelectionSlots({ date, timeSlots, selectedSlots }: SelectionSlotsProps) {
+function SelectionSlots({ date, timeSlots }: SelectionSlotsProps) {
+  const { selectedSlots } = useTimetableContext();
   const selectedSlotsPerDate = Object.entries(selectedSlots).filter(
     ([, slot]) => slot.date === date,
   );
diff --git a/src/pages/selectSchedule/components/timetable/Timetable.tsx b/src/pages/selectSchedule/components/timetable/Timetable.tsx
deleted file mode 100644
index 4fc8b627..00000000
--- a/src/pages/selectSchedule/components/timetable/Timetable.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { useState } from 'react';
-
-import styled from 'styled-components';
-
-import { SelectedSlotType, TimetableContext } from './context';
-import Column from './parts/Column';
-import DateTitle from './parts/ColumnTitle';
-import SelectionSlots from './parts/SelectionSlots';
-import SlotTitle from './parts/SlotTitle';
-import { getAvailableTimes } from './utils';
-
-// api 연결 후 지울 것
-export type DateType = {
-  month: string | undefined;
-  day: string | undefined;
-  dayOfWeek: string | undefined;
-};
-
-const availableDates: DateType[] = [
-  {
-    month: '6',
-    day: '20',
-    dayOfWeek: '목',
-  },
-  {
-    month: '6',
-    day: '21',
-    dayOfWeek: '금',
-  },
-  {
-    month: '6',
-    day: '22',
-    dayOfWeek: '토',
-  },
-  {
-    month: '6',
-    day: '23',
-    dayOfWeek: '일',
-  },
-];
-
-const emptyDates = Array.from({ length: 7 - availableDates.length }, (_, i) => `empty${i + 1}`);
-
-export type SlotType = {
-  startTime: string;
-  endTime: string;
-};
-
-const preferTimes: SlotType = {
-  startTime: '06:00',
-  endTime: '24:00',
-};
-
-const timeSlots = getAvailableTimes(preferTimes);
-
-function Timetable() {
-  const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
-  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({});
-  return (
-    <TimetableContext.Provider
-      value={{
-        startSlot,
-        setStartSlot,
-        selectedSlots,
-        setSelectedSlots,
-      }}
-    >
-      <TimetableWrapper>
-        <SlotTitle timeSlots={timeSlots} />
-        <TableWrapper>
-          <DateTitle availableDates={availableDates} />
-          <Table>
-            {availableDates.map((date) => (
-              <Column key={Object.values(date).join('/')}>
-                <SelectionSlots
-                  date={Object.values(date).join('/')}
-                  timeSlots={timeSlots}
-                  selectedSlots={selectedSlots}
-                />
-              </Column>
-            ))}
-            {emptyDates && emptyDates.map((value) => <EmptyColumn key={value} />)}
-          </Table>
-        </TableWrapper>
-      </TimetableWrapper>
-    </TimetableContext.Provider>
-  );
-}
-
-export default Timetable;
-
-const TimetableWrapper = styled.div`
-  display: flex;
-  gap: 0.75rem;
-`;
-
-const TableWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.8rem;
-`;
-
-const Table = styled.div`
-  display: flex;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.grey7};
-  border-left: 1px solid ${({ theme }) => theme.colors.grey7};
-`;
-
-const EmptyColumn = styled.div`
-  display: flex;
-  flex-direction: column;
-  border-top: 1px solid ${({ theme }) => theme.colors.grey7};
-  border-right: 1px solid ${({ theme }) => theme.colors.grey7};
-  background-color: ${({ theme }) => theme.colors.grey9};
-  width: 4.4rem;
-`;

From 091854a01b5cf0a52874f485133dffcbdc3a0744 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 17:45:45 +0900
Subject: [PATCH 23/62] =?UTF-8?q?refactor:=20Slot=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20?=
 =?UTF-8?q?=EC=A1=B0=EA=B1=B4=EB=B6=80=EB=A1=9C=EC=A7=81=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../timetableComponents/parts/Slot.tsx        | 45 +++++++++----------
 1 file changed, 21 insertions(+), 24 deletions(-)

diff --git a/src/components/timetableComponents/parts/Slot.tsx b/src/components/timetableComponents/parts/Slot.tsx
index fd2dea06..92578188 100644
--- a/src/components/timetableComponents/parts/Slot.tsx
+++ b/src/components/timetableComponents/parts/Slot.tsx
@@ -1,7 +1,6 @@
+import useSlotSeletion from 'pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection';
 import styled from 'styled-components';
 
-import useSlotSeletion from '../hooks/useSlotSelection';
-
 interface SlotProps {
   slot: string;
   selectedEntryId?: number;
@@ -11,32 +10,30 @@ function Slot({ slot, selectedEntryId }: SlotProps) {
   const { startSlot, onClickSlot } = useSlotSeletion();
 
   const borderStyle = slot.endsWith(':30') ? 'dashed' : 'solid';
-  const styledSlotProps = {
-    $borderStyle: borderStyle,
-    $isSelected: selectedEntryId !== undefined,
-    onClick: () => onClickSlot(slot, selectedEntryId),
-  };
-
-  if (slot === startSlot) {
-    return <SelectingSlot {...styledSlotProps} />;
-  } else {
-    return <DefaultSlot {...styledSlotProps} />;
-  }
+  const isSelected = selectedEntryId !== undefined;
+  const isStartSlot = slot === startSlot;
+
+  return (
+    <DefaultSlot
+      $borderStyle={borderStyle}
+      $isSelected={isSelected}
+      $isStartSlot={isStartSlot}
+      onClick={() => onClickSlot(slot, selectedEntryId)}
+    />
+  );
 }
 
 export default Slot;
 
-const DefaultSlot = styled.div<{ $borderStyle: string; $isSelected: boolean }>`
-  border-top: 1px ${({ $borderStyle }) => $borderStyle} ${({ theme }) => theme.colors.grey7};
-  background-color: ${({ $isSelected, theme }) =>
-    $isSelected ? theme.colors.main1 : 'transparent'};
-  cursor: pointer;
-  width: 4.4rem;
-  height: 2.2rem;
-`;
-
-const SelectingSlot = styled.div<{ $borderStyle: string; $isSelected: boolean }>`
-  border: 1px dashed ${({ theme }) => theme.colors.main5};
+const DefaultSlot = styled.div<{
+  $borderStyle: string;
+  $isSelected: boolean;
+  $isStartSlot: boolean;
+}>`
+  ${({ $isStartSlot, $borderStyle, theme }) =>
+    $isStartSlot
+      ? `border: 1px dashed ${theme.colors.main5};`
+      : `border-top: 1px ${$borderStyle} ${theme.colors.grey7};`}
   background-color: ${({ $isSelected, theme }) =>
     $isSelected ? theme.colors.main1 : 'transparent'};
   cursor: pointer;

From c1c2f15bf4e3e8b7895aa69601a63e68b0708c33 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 17:49:11 +0900
Subject: [PATCH 24/62] =?UTF-8?q?feat:=20selectTimeSlot=EA=B3=BC=20selectP?=
 =?UTF-8?q?riority=EB=A5=BC=20=ED=95=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=95=84=EB=9E=98=EC=84=9C=20=EA=B4=80=EB=A6=AC?=
 =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EA=B5=AC=EC=A1=B0=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/Router.tsx                                | 16 ++++--
 .../timetableComponents/Timetable.tsx         |  9 +--
 .../timetableComponents/parts/ColumnTitle.tsx |  3 +-
 src/components/timetableComponents/types.ts   | 10 ++++
 .../components/SteppingBtnSection.tsx         |  2 +-
 src/pages/Test.tsx                            | 17 ------
 src/pages/selectSchedule/SelectSchedule.tsx   | 35 ++++++++----
 .../selectPriority/SelectPriority.tsx         | 56 +++++++++++++++++++
 .../components/PrioritySlots.tsx              | 36 ++++++++++++
 .../components/SelectionSlots.tsx             |  4 +-
 .../selectTimeSlot}/hooks/useSlotSelection.ts |  2 +-
 11 files changed, 145 insertions(+), 45 deletions(-)
 create mode 100644 src/components/timetableComponents/types.ts
 delete mode 100644 src/pages/Test.tsx
 create mode 100644 src/pages/selectSchedule/selectPriority/SelectPriority.tsx
 create mode 100644 src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx
 rename src/pages/selectSchedule/{ => selectTimeSlot}/components/SelectionSlots.tsx (83%)
 rename src/{components/timetableComponents => pages/selectSchedule/selectTimeSlot}/hooks/useSlotSelection.ts (95%)

diff --git a/src/Router.tsx b/src/Router.tsx
index 8536d068..4bf814dd 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -7,8 +7,8 @@ import SelectSchedulePriority from 'pages/legacy/selectSchedule/SelectPriorityPa
 import SelectPage from 'pages/legacy/selectSchedule/SelectSchedulePage';
 import LoginEntrance from 'pages/loginEntrance/LoginEntrance';
 import OnBoarding from 'pages/onBoarding/OnBoarding';
+import SelectSchedule from 'pages/selectSchedule/SelectSchedule';
 import SteppingLayout from 'pages/steppingStone/SteppingLayout';
-import Test from 'pages/Test';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 const Router = () => {
@@ -18,8 +18,16 @@ const Router = () => {
         <Route path="/" element={<OnBoarding />} />
         <Route path="/meet/create" element={<CreateMeeting />} />
         <Route path="/meet/complete" element={<SteppingLayout steppingType={'meetComplete'} />} />
-        <Route path="/:auth/schedule/:meetingId" element={<SelectPage />} />
-        <Route path="/:auth/priority/:meetingId" element={<SelectSchedulePriority />} />
+        {/* <Route path="/:auth/schedule/:meetingId" element={<SelectPage />} />
+        <Route path="/:auth/priority/:meetingId" element={<SelectSchedulePriority />} /> */}
+        <Route
+          path="/:auth/select-timeslot/:meetingId"
+          element={<SelectSchedule step="selectTimeSlot" />}
+        />
+        <Route
+          path="/:auth/select-priority/:meetingId"
+          element={<SelectSchedule step="selectPriority" />}
+        />
         <Route
           path="/host/schedule-complete/:meetingId"
           element={<SteppingLayout steppingType={'hostScheduleComplete'} />}
@@ -36,8 +44,6 @@ const Router = () => {
         <Route path="/loadingpage" element={<LoadingPage />} />
         <Route path="*" element={<ErrorPage404 />} />
         <Route path="/error" element={<ErrorPage404 />} />
-        <Route path="/select" element={<SelectPage />} />
-        <Route path="/test" element={<Test />} />
       </Routes>
     </BrowserRouter>
   );
diff --git a/src/components/timetableComponents/Timetable.tsx b/src/components/timetableComponents/Timetable.tsx
index bde346a3..a9565fd7 100644
--- a/src/components/timetableComponents/Timetable.tsx
+++ b/src/components/timetableComponents/Timetable.tsx
@@ -1,21 +1,16 @@
 import { ReactNode } from 'react';
 
-import { DateType } from 'pages/selectSchedule/SelectSchedule';
 import styled from 'styled-components';
 
 import Column from './parts/Column';
 import DateTitle from './parts/ColumnTitle';
 import SlotTitle from './parts/SlotTitle';
-
-interface RenderProps {
-  date: string;
-  timeSlots: string[];
-}
+import { DateType, TimetableStructure } from './types';
 
 interface TimetableProps {
   timeSlots: string[];
   availableDates: DateType[];
-  children: (props: RenderProps) => ReactNode;
+  children: (props: TimetableStructure) => ReactNode;
 }
 
 function Timetable({ timeSlots, availableDates, children }: TimetableProps) {
diff --git a/src/components/timetableComponents/parts/ColumnTitle.tsx b/src/components/timetableComponents/parts/ColumnTitle.tsx
index c6bf61dd..74dd699a 100644
--- a/src/components/timetableComponents/parts/ColumnTitle.tsx
+++ b/src/components/timetableComponents/parts/ColumnTitle.tsx
@@ -1,8 +1,9 @@
-import { DateType } from '../Timetable';
 import Text from 'components/atomComponents/Text';
 import styled from 'styled-components';
 import { theme } from 'styles/theme';
 
+import { DateType } from '../types';
+
 interface ColumnTitleProps {
   availableDates: DateType[];
 }
diff --git a/src/components/timetableComponents/types.ts b/src/components/timetableComponents/types.ts
new file mode 100644
index 00000000..f323eb22
--- /dev/null
+++ b/src/components/timetableComponents/types.ts
@@ -0,0 +1,10 @@
+export interface TimetableStructure {
+  date: string;
+  timeSlots: string[];
+}
+
+export type DateType = {
+  month: string | undefined;
+  day: string | undefined;
+  dayOfWeek: string | undefined;
+};
diff --git a/src/pages/SteppingStone/components/SteppingBtnSection.tsx b/src/pages/SteppingStone/components/SteppingBtnSection.tsx
index b44ede21..c93d0dae 100644
--- a/src/pages/SteppingStone/components/SteppingBtnSection.tsx
+++ b/src/pages/SteppingStone/components/SteppingBtnSection.tsx
@@ -46,7 +46,7 @@ function SteppingBtnSection({ steppingType }: SteppingProps) {
                 </BottomSheetModal>
                 <ModalOverlay $isModalOpen={isModalOpen} >
                 </ModalOverlay>
-                <Link to={`/host/schedule/${meetInfo.meetingId}`}>
+                <Link to={`/host/select-timeslot/${meetInfo.meetingId}`}>
                   <Button typeState={'primaryActive'}>
                     <Text font={'button2'}>나의 가능시간 입력</Text>
                   </Button>
diff --git a/src/pages/Test.tsx b/src/pages/Test.tsx
deleted file mode 100644
index 828db086..00000000
--- a/src/pages/Test.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-
-import SelectSchedule from './selectSchedule/SelectSchedule';
-
-function Test() {
-  return (
-    <StyledTest>
-      <SelectSchedule />
-    </StyledTest>
-  );
-}
-
-export default Test;
-
-const StyledTest = styled.div`
-  padding: 5rem;
-`;
diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx
index 4712222f..1b8a6e46 100644
--- a/src/pages/selectSchedule/SelectSchedule.tsx
+++ b/src/pages/selectSchedule/SelectSchedule.tsx
@@ -1,17 +1,13 @@
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 
 import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context';
+import Timetable from 'components/timetableComponents/Timetable';
+import { DateType, TimetableStructure } from 'components/timetableComponents/types';
 import { getAvailableTimes } from 'components/timetableComponents/utils';
 
-import SelectionSlots from './components/SelectionSlots';
-import Timetable from '../../components/timetableComponents/Timetable';
+import SelectionSlots from './selectTimeSlot/components/SelectionSlots';
 
-// api 연결 후 지울 것
-export type DateType = {
-  month: string | undefined;
-  day: string | undefined;
-  dayOfWeek: string | undefined;
-};
+/***** api 연결 후 지울 것*****/
 
 const availableDates: DateType[] = [
   {
@@ -47,10 +43,27 @@ const preferTimes: SlotType = {
 };
 
 const timeSlots = getAvailableTimes(preferTimes);
+/***** api 연결 후 지울 것*****/
+
+interface SelectScheduleProps {
+  step: 'selectTimeSlot' | 'selectPriority';
+}
 
-function SelectSchedule() {
+type StepSlotsType = {
+  [key in SelectScheduleProps['step']]: (props: TimetableStructure) => ReactNode
+};
+
+function SelectSchedule({ step }: SelectScheduleProps) {
   const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
   const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({});
+
+  const stepSlots: StepSlotsType = {
+    selectTimeSlot: ({ date, timeSlots }: TimetableStructure) => (
+      <SelectionSlots date={date} timeSlots={timeSlots} />
+    ),
+    selectPriority: ({ date, timeSlots }: TimetableStructure) => <div>priority</div>,
+  };
+
   return (
     <TimetableContext.Provider
       value={{
@@ -61,7 +74,7 @@ function SelectSchedule() {
       }}
     >
       <Timetable timeSlots={timeSlots} availableDates={availableDates}>
-        {({ date, timeSlots }) => <SelectionSlots date={date} timeSlots={timeSlots} />}
+        {stepSlots[step]}
       </Timetable>
     </TimetableContext.Provider>
   );
diff --git a/src/pages/selectSchedule/selectPriority/SelectPriority.tsx b/src/pages/selectSchedule/selectPriority/SelectPriority.tsx
new file mode 100644
index 00000000..5cf58b7a
--- /dev/null
+++ b/src/pages/selectSchedule/selectPriority/SelectPriority.tsx
@@ -0,0 +1,56 @@
+import { TimetableContext } from 'components/timetableComponents/context';
+import { getAvailableTimes } from 'components/timetableComponents/utils';
+
+import Timetable from '../../../components/timetableComponents/Timetable';
+
+// api 연결 후 지울 것
+export type DateType = {
+  month: string | undefined;
+  day: string | undefined;
+  dayOfWeek: string | undefined;
+};
+
+const availableDates: DateType[] = [
+  {
+    month: '6',
+    day: '20',
+    dayOfWeek: '목',
+  },
+  {
+    month: '6',
+    day: '21',
+    dayOfWeek: '금',
+  },
+  {
+    month: '6',
+    day: '22',
+    dayOfWeek: '토',
+  },
+  {
+    month: '6',
+    day: '23',
+    dayOfWeek: '일',
+  },
+];
+
+export type SlotType = {
+  startTime: string;
+  endTime: string;
+};
+
+const preferTimes: SlotType = {
+  startTime: '06:00',
+  endTime: '24:00',
+};
+
+const timeSlots = getAvailableTimes(preferTimes);
+
+function SelectPriority() {
+  return (
+    <Timetable timeSlots={timeSlots} availableDates={availableDates}>
+      {/* {({ date, timeSlots }) => <SelectionSlots date={date} timeSlots={timeSlots} />} */}
+    </Timetable>
+  );
+}
+
+export default SelectPriority;
diff --git a/src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx b/src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx
new file mode 100644
index 00000000..9b70f2d3
--- /dev/null
+++ b/src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx
@@ -0,0 +1,36 @@
+import { useTimetableContext } from '../../../../components/timetableComponents/context';
+import Slot from '../../../../components/timetableComponents/parts/Slot';
+
+interface SelectionSlotsProps {
+  date: string;
+  timeSlots: string[];
+}
+
+function PrioritySlots({ date, timeSlots }: SelectionSlotsProps) {
+  const { selectedSlots } = useTimetableContext();
+  const selectedSlotsPerDate = Object.entries(selectedSlots).filter(
+    ([, slot]) => slot.date === date,
+  );
+
+  return (
+    <>
+      {timeSlots.map((timeSlot) => {
+        const belongingEntry = selectedSlotsPerDate.find(
+          ([, { startSlot, endSlot }]) => timeSlot >= startSlot && timeSlot <= endSlot,
+        );
+
+        const selectedEntryId = belongingEntry ? parseInt(belongingEntry[0]) : undefined;
+
+        return (
+          <Slot
+            key={`${date}/${timeSlot}`}
+            slot={`${date}/${timeSlot}`}
+            selectedEntryId={selectedEntryId}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+export default PrioritySlots;
diff --git a/src/pages/selectSchedule/components/SelectionSlots.tsx b/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx
similarity index 83%
rename from src/pages/selectSchedule/components/SelectionSlots.tsx
rename to src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx
index 3e23acaa..3d1e9948 100644
--- a/src/pages/selectSchedule/components/SelectionSlots.tsx
+++ b/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx
@@ -1,5 +1,5 @@
-import { useTimetableContext } from '../../../components/timetableComponents/context';
-import Slot from '../../../components/timetableComponents/parts/Slot';
+import { useTimetableContext } from '../../../../components/timetableComponents/context';
+import Slot from '../../../../components/timetableComponents/parts/Slot';
 
 interface SelectionSlotsProps {
   date: string;
diff --git a/src/components/timetableComponents/hooks/useSlotSelection.ts b/src/pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection.ts
similarity index 95%
rename from src/components/timetableComponents/hooks/useSlotSelection.ts
rename to src/pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection.ts
index 6b171a69..8ef879b0 100644
--- a/src/components/timetableComponents/hooks/useSlotSelection.ts
+++ b/src/pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection.ts
@@ -1,4 +1,4 @@
-import { useTimetableContext } from '../context'
+import { useTimetableContext } from '../../../../components/timetableComponents/context'
 
 const useSlotSeletion = () => {
     const {startSlot, setStartSlot, selectedSlots, setSelectedSlots} = useTimetableContext();

From 89f2b92a9efeb62a5b950de3955dd572691adeed Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 18:16:37 +0900
Subject: [PATCH 25/62] =?UTF-8?q?refactor:=20Slot=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EC=9D=98=EC=A1=B4=EC=84=B1=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../timetableComponents/parts/Slot.tsx        | 34 +++++--------------
 .../components/SelectionSlots.tsx             | 30 ++++++++++++++--
 2 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/components/timetableComponents/parts/Slot.tsx b/src/components/timetableComponents/parts/Slot.tsx
index 92578188..07dd00f1 100644
--- a/src/components/timetableComponents/parts/Slot.tsx
+++ b/src/components/timetableComponents/parts/Slot.tsx
@@ -1,41 +1,25 @@
-import useSlotSeletion from 'pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection';
 import styled from 'styled-components';
 
 interface SlotProps {
-  slot: string;
-  selectedEntryId?: number;
+  slotId: string;
+  slotStyle?: string;
+  onClick?: () => void;
 }
 
-function Slot({ slot, selectedEntryId }: SlotProps) {
-  const { startSlot, onClickSlot } = useSlotSeletion();
+function Slot({ slotId, slotStyle, onClick }: SlotProps) {
+  const borderStyle = slotId.endsWith(':30') ? 'dashed' : 'solid';
 
-  const borderStyle = slot.endsWith(':30') ? 'dashed' : 'solid';
-  const isSelected = selectedEntryId !== undefined;
-  const isStartSlot = slot === startSlot;
-
-  return (
-    <DefaultSlot
-      $borderStyle={borderStyle}
-      $isSelected={isSelected}
-      $isStartSlot={isStartSlot}
-      onClick={() => onClickSlot(slot, selectedEntryId)}
-    />
-  );
+  return <DefaultSlot $borderStyle={borderStyle} $slotStyle={slotStyle} onClick={onClick} />;
 }
 
 export default Slot;
 
 const DefaultSlot = styled.div<{
   $borderStyle: string;
-  $isSelected: boolean;
-  $isStartSlot: boolean;
+  $slotStyle?: string;
 }>`
-  ${({ $isStartSlot, $borderStyle, theme }) =>
-    $isStartSlot
-      ? `border: 1px dashed ${theme.colors.main5};`
-      : `border-top: 1px ${$borderStyle} ${theme.colors.grey7};`}
-  background-color: ${({ $isSelected, theme }) =>
-    $isSelected ? theme.colors.main1 : 'transparent'};
+  ${({ $slotStyle }) => $slotStyle};
+  border-top-style: ${({ $borderStyle }) => $borderStyle};
   cursor: pointer;
   width: 4.4rem;
   height: 2.2rem;
diff --git a/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx b/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx
index 3d1e9948..23c57bef 100644
--- a/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx
+++ b/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx
@@ -1,5 +1,8 @@
+import { theme } from 'styles/theme';
+
 import { useTimetableContext } from '../../../../components/timetableComponents/context';
 import Slot from '../../../../components/timetableComponents/parts/Slot';
+import useSlotSeletion from '../hooks/useSlotSelection';
 
 interface SelectionSlotsProps {
   date: string;
@@ -12,6 +15,23 @@ function SelectionSlots({ date, timeSlots }: SelectionSlotsProps) {
     ([, slot]) => slot.date === date,
   );
 
+  const { startSlot, onClickSlot } = useSlotSeletion();
+
+  const getTimeSlotStyle = (slotId: string, selectedEntryId?: number) => {
+    const isStartSlot = slotId === startSlot;
+    const isSelectedSlot = selectedEntryId !== undefined;
+
+    return `
+      ${
+        isStartSlot
+          ? `border: 1px dashed ${theme.colors.main5}`
+          : `border-top: 1px solid ${theme.colors.grey7}`
+      };
+      ${
+        isSelectedSlot ? `background-color: ${theme.colors.main1}` : `background-color: transparent`
+      };
+    `;
+  };
   return (
     <>
       {timeSlots.map((timeSlot) => {
@@ -21,11 +41,15 @@ function SelectionSlots({ date, timeSlots }: SelectionSlotsProps) {
 
         const selectedEntryId = belongingEntry ? parseInt(belongingEntry[0]) : undefined;
 
+        const slotId = `${date}/${timeSlot}`;
+
+        const slotStyle = getTimeSlotStyle(slotId, selectedEntryId);
         return (
           <Slot
-            key={`${date}/${timeSlot}`}
-            slot={`${date}/${timeSlot}`}
-            selectedEntryId={selectedEntryId}
+            key={slotId}
+            slotId={slotId}
+            slotStyle={slotStyle}
+            onClick={() => onClickSlot(slotId, selectedEntryId)}
           />
         );
       })}

From e67160c27e07348f884edb116538c610c82dbcb8 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 18:22:26 +0900
Subject: [PATCH 26/62] =?UTF-8?q?fix:=20Column=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=82=AD=EC=A0=9C=ED=95=98=EA=B3=A0=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A7=8C=20=EB=82=A8=EA=B9=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../timetableComponents/Timetable.tsx         |  8 +++++++-
 .../timetableComponents/parts/Column.tsx      | 20 -------------------
 .../components/SelectionSlots.tsx             |  6 ++----
 3 files changed, 9 insertions(+), 25 deletions(-)
 delete mode 100644 src/components/timetableComponents/parts/Column.tsx

diff --git a/src/components/timetableComponents/Timetable.tsx b/src/components/timetableComponents/Timetable.tsx
index a9565fd7..c4896ea9 100644
--- a/src/components/timetableComponents/Timetable.tsx
+++ b/src/components/timetableComponents/Timetable.tsx
@@ -2,7 +2,6 @@ import { ReactNode } from 'react';
 
 import styled from 'styled-components';
 
-import Column from './parts/Column';
 import DateTitle from './parts/ColumnTitle';
 import SlotTitle from './parts/SlotTitle';
 import { DateType, TimetableStructure } from './types';
@@ -52,6 +51,13 @@ const Table = styled.div`
   border-left: 1px solid ${({ theme }) => theme.colors.grey7};
 `;
 
+const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  border-right: 1px solid ${({ theme }) => theme.colors.grey7};
+`;
+
 const EmptyColumn = styled.div`
   display: flex;
   flex-direction: column;
diff --git a/src/components/timetableComponents/parts/Column.tsx b/src/components/timetableComponents/parts/Column.tsx
deleted file mode 100644
index 894d8da6..00000000
--- a/src/components/timetableComponents/parts/Column.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ReactNode } from 'react';
-
-import styled from 'styled-components';
-
-interface ColumnProps {
-  children: ReactNode;
-}
-
-function Column({ children }: ColumnProps) {
-  return <ColumnWrapper>{children}</ColumnWrapper>;
-}
-
-export default Column;
-
-const ColumnWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  border-right: 1px solid ${({ theme }) => theme.colors.grey7};
-`;
diff --git a/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx b/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx
index 23c57bef..561a3c86 100644
--- a/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx
+++ b/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx
@@ -32,23 +32,21 @@ function SelectionSlots({ date, timeSlots }: SelectionSlotsProps) {
       };
     `;
   };
+
   return (
     <>
       {timeSlots.map((timeSlot) => {
         const belongingEntry = selectedSlotsPerDate.find(
           ([, { startSlot, endSlot }]) => timeSlot >= startSlot && timeSlot <= endSlot,
         );
-
         const selectedEntryId = belongingEntry ? parseInt(belongingEntry[0]) : undefined;
-
         const slotId = `${date}/${timeSlot}`;
 
-        const slotStyle = getTimeSlotStyle(slotId, selectedEntryId);
         return (
           <Slot
             key={slotId}
             slotId={slotId}
-            slotStyle={slotStyle}
+            slotStyle={getTimeSlotStyle(slotId, selectedEntryId)}
             onClick={() => onClickSlot(slotId, selectedEntryId)}
           />
         );

From 4d5f2e0b00e2fdb411d638690c2108dddd10bc4e Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 18:55:17 +0900
Subject: [PATCH 27/62] =?UTF-8?q?feat:=20=EC=9A=B0=EC=84=A0=EC=88=9C?=
 =?UTF-8?q?=EC=9C=84=20=EC=8B=9C=EA=B0=84=ED=91=9C=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=EB=A7=81=20=EB=A1=9C=EC=A7=81=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/timetableComponents/context.ts |  1 +
 .../timetableComponents/parts/Slot.tsx        |  3 +-
 src/pages/selectSchedule/SelectSchedule.tsx   | 14 ++++++++--
 .../components/PrioritySlots.tsx              | 28 ++++++++++++++++---
 .../components/SelectionSlots.tsx             |  1 +
 .../selectTimeSlot/hooks/useSlotSelection.ts  |  3 +-
 6 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/components/timetableComponents/context.ts b/src/components/timetableComponents/context.ts
index 94d14cf6..0d1dad0d 100644
--- a/src/components/timetableComponents/context.ts
+++ b/src/components/timetableComponents/context.ts
@@ -5,6 +5,7 @@ export type SelectedSlotType = {
     date: string;
     startSlot: string;
     endSlot: string;
+    priority: 0 | 1 | 2 | 3;
   };
 };
 
diff --git a/src/components/timetableComponents/parts/Slot.tsx b/src/components/timetableComponents/parts/Slot.tsx
index 07dd00f1..d39aaf8c 100644
--- a/src/components/timetableComponents/parts/Slot.tsx
+++ b/src/components/timetableComponents/parts/Slot.tsx
@@ -18,9 +18,10 @@ const DefaultSlot = styled.div<{
   $borderStyle: string;
   $slotStyle?: string;
 }>`
+  border-top: 1px solid ${({ theme }) => theme.colors.grey7};
   ${({ $slotStyle }) => $slotStyle};
   border-top-style: ${({ $borderStyle }) => $borderStyle};
-  cursor: pointer;
+
   width: 4.4rem;
   height: 2.2rem;
 `;
diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx
index 1b8a6e46..aed0016d 100644
--- a/src/pages/selectSchedule/SelectSchedule.tsx
+++ b/src/pages/selectSchedule/SelectSchedule.tsx
@@ -5,6 +5,7 @@ import Timetable from 'components/timetableComponents/Timetable';
 import { DateType, TimetableStructure } from 'components/timetableComponents/types';
 import { getAvailableTimes } from 'components/timetableComponents/utils';
 
+import PrioritySlots from './selectPriority/components/PrioritySlots';
 import SelectionSlots from './selectTimeSlot/components/SelectionSlots';
 
 /***** api 연결 후 지울 것*****/
@@ -55,13 +56,22 @@ type StepSlotsType = {
 
 function SelectSchedule({ step }: SelectScheduleProps) {
   const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
-  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({});
+  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({
+    0: {
+      date: '6/20/목',
+      startSlot: '15:00',
+      endSlot: '20:00',
+      priority: 1,
+    },
+  });
 
   const stepSlots: StepSlotsType = {
     selectTimeSlot: ({ date, timeSlots }: TimetableStructure) => (
       <SelectionSlots date={date} timeSlots={timeSlots} />
     ),
-    selectPriority: ({ date, timeSlots }: TimetableStructure) => <div>priority</div>,
+    selectPriority: ({ date, timeSlots }: TimetableStructure) => (
+      <PrioritySlots date={date} timeSlots={timeSlots} />
+    ),
   };
 
   return (
diff --git a/src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx b/src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx
index 9b70f2d3..43fc564e 100644
--- a/src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx
+++ b/src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx
@@ -1,3 +1,5 @@
+import { theme } from 'styles/theme';
+
 import { useTimetableContext } from '../../../../components/timetableComponents/context';
 import Slot from '../../../../components/timetableComponents/parts/Slot';
 
@@ -12,20 +14,38 @@ function PrioritySlots({ date, timeSlots }: SelectionSlotsProps) {
     ([, slot]) => slot.date === date,
   );
 
+  const getPrioritySlotStyle = (selectedEntryId?: number, priority?: number) => {
+    const isSelectedSlot = selectedEntryId !== undefined;
+    const slotColor =
+      priority === 1
+        ? theme.colors.main1
+        : priority === 2
+          ? theme.colors.main2
+          : priority === 3
+            ? theme.colors.main3
+            : theme.colors.grey6;
+
+    return `
+        ${isSelectedSlot ? `background-color:${slotColor}` : `background-color: transparent`}
+    `;
+  };
+
   return (
     <>
       {timeSlots.map((timeSlot) => {
         const belongingEntry = selectedSlotsPerDate.find(
           ([, { startSlot, endSlot }]) => timeSlot >= startSlot && timeSlot <= endSlot,
         );
-
         const selectedEntryId = belongingEntry ? parseInt(belongingEntry[0]) : undefined;
+        const slotId = `${date}/${timeSlot}`;
+        const priority =
+          selectedEntryId !== undefined ? selectedSlots[selectedEntryId].priority : 0;
 
         return (
           <Slot
-            key={`${date}/${timeSlot}`}
-            slot={`${date}/${timeSlot}`}
-            selectedEntryId={selectedEntryId}
+            key={slotId}
+            slotId={slotId}
+            slotStyle={getPrioritySlotStyle(selectedEntryId, priority)}
           />
         );
       })}
diff --git a/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx b/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx
index 561a3c86..93b0699f 100644
--- a/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx
+++ b/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx
@@ -22,6 +22,7 @@ function SelectionSlots({ date, timeSlots }: SelectionSlotsProps) {
     const isSelectedSlot = selectedEntryId !== undefined;
 
     return `
+      cursor:pointer;
       ${
         isStartSlot
           ? `border: 1px dashed ${theme.colors.main5}`
diff --git a/src/pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection.ts b/src/pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection.ts
index 8ef879b0..ee404e48 100644
--- a/src/pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection.ts
+++ b/src/pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection.ts
@@ -14,7 +14,8 @@ const useSlotSeletion = () => {
             const newSelectedSlot = {
                 date:dateOfStartSlot,
                 startSlot:startSlot?.substring(startSlot.lastIndexOf('/')+1),
-                endSlot:targetSlot.substring(targetSlot.lastIndexOf('/')+1)
+                endSlot:targetSlot.substring(targetSlot.lastIndexOf('/')+1),
+                priority:0,
             }
 
             const keys = Object.keys(selectedSlots).map(Number)

From 500b1e52d97af41534aeead4bdbbb93d7ad7cc19 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 19:10:40 +0900
Subject: [PATCH 28/62] =?UTF-8?q?fix:=20select=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EB=A5=BC=20=ED=8D=BC=EB=84=90=20=ED=98=95=ED=83=9C?=
 =?UTF-8?q?=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/Router.tsx                                |  9 +--
 src/pages/selectSchedule/SelectSchedule.tsx   | 21 ++++---
 .../{components => }/PrioritySlots.tsx        |  5 +-
 .../selectPriority/SelectPriority.tsx         | 56 -------------------
 .../{components => }/SelectionSlots.tsx       |  6 +-
 5 files changed, 18 insertions(+), 79 deletions(-)
 rename src/pages/selectSchedule/selectPriority/{components => }/PrioritySlots.tsx (90%)
 delete mode 100644 src/pages/selectSchedule/selectPriority/SelectPriority.tsx
 rename src/pages/selectSchedule/selectTimeSlot/{components => }/SelectionSlots.tsx (87%)

diff --git a/src/Router.tsx b/src/Router.tsx
index 4bf814dd..2c3b3a27 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -20,14 +20,7 @@ const Router = () => {
         <Route path="/meet/complete" element={<SteppingLayout steppingType={'meetComplete'} />} />
         {/* <Route path="/:auth/schedule/:meetingId" element={<SelectPage />} />
         <Route path="/:auth/priority/:meetingId" element={<SelectSchedulePriority />} /> */}
-        <Route
-          path="/:auth/select-timeslot/:meetingId"
-          element={<SelectSchedule step="selectTimeSlot" />}
-        />
-        <Route
-          path="/:auth/select-priority/:meetingId"
-          element={<SelectSchedule step="selectPriority" />}
-        />
+        <Route path="/:auth/select/:meetingId" element={<SelectSchedule />} />
         <Route
           path="/host/schedule-complete/:meetingId"
           element={<SteppingLayout steppingType={'hostScheduleComplete'} />}
diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx
index aed0016d..6733ebfe 100644
--- a/src/pages/selectSchedule/SelectSchedule.tsx
+++ b/src/pages/selectSchedule/SelectSchedule.tsx
@@ -5,8 +5,8 @@ import Timetable from 'components/timetableComponents/Timetable';
 import { DateType, TimetableStructure } from 'components/timetableComponents/types';
 import { getAvailableTimes } from 'components/timetableComponents/utils';
 
-import PrioritySlots from './selectPriority/components/PrioritySlots';
-import SelectionSlots from './selectTimeSlot/components/SelectionSlots';
+import PrioritySlots from './selectPriority/PrioritySlots';
+import SelectionSlots from './selectTimeSlot/SelectionSlots';
 
 /***** api 연결 후 지울 것*****/
 
@@ -46,15 +46,12 @@ const preferTimes: SlotType = {
 const timeSlots = getAvailableTimes(preferTimes);
 /***** api 연결 후 지울 것*****/
 
-interface SelectScheduleProps {
-  step: 'selectTimeSlot' | 'selectPriority';
-}
+type Step = 'selectTimeSlot' | 'selectPriority';
 
-type StepSlotsType = {
-  [key in SelectScheduleProps['step']]: (props: TimetableStructure) => ReactNode
-};
+type StepSlotsType = { [key in Step]: (props: TimetableStructure) => ReactNode };
 
-function SelectSchedule({ step }: SelectScheduleProps) {
+function SelectSchedule() {
+  const [step, setStep] = useState<Step>('selectPriority');
   const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
   const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({
     0: {
@@ -86,6 +83,12 @@ function SelectSchedule({ step }: SelectScheduleProps) {
       <Timetable timeSlots={timeSlots} availableDates={availableDates}>
         {stepSlots[step]}
       </Timetable>
+      <button style={{ color: 'white' }} onClick={() => setStep('selectPriority')}>
+        다음으로
+      </button>
+      <button style={{ color: 'white' }} onClick={() => setStep('selectTimeSlot')}>
+        이전으로
+      </button>
     </TimetableContext.Provider>
   );
 }
diff --git a/src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx b/src/pages/selectSchedule/selectPriority/PrioritySlots.tsx
similarity index 90%
rename from src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx
rename to src/pages/selectSchedule/selectPriority/PrioritySlots.tsx
index 43fc564e..d9f59935 100644
--- a/src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx
+++ b/src/pages/selectSchedule/selectPriority/PrioritySlots.tsx
@@ -1,7 +1,6 @@
+import Slot from '../../../components/timetableComponents/parts/Slot';
 import { theme } from 'styles/theme';
-
-import { useTimetableContext } from '../../../../components/timetableComponents/context';
-import Slot from '../../../../components/timetableComponents/parts/Slot';
+import { useTimetableContext } from '../../../components/timetableComponents/context';
 
 interface SelectionSlotsProps {
   date: string;
diff --git a/src/pages/selectSchedule/selectPriority/SelectPriority.tsx b/src/pages/selectSchedule/selectPriority/SelectPriority.tsx
deleted file mode 100644
index 5cf58b7a..00000000
--- a/src/pages/selectSchedule/selectPriority/SelectPriority.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { TimetableContext } from 'components/timetableComponents/context';
-import { getAvailableTimes } from 'components/timetableComponents/utils';
-
-import Timetable from '../../../components/timetableComponents/Timetable';
-
-// api 연결 후 지울 것
-export type DateType = {
-  month: string | undefined;
-  day: string | undefined;
-  dayOfWeek: string | undefined;
-};
-
-const availableDates: DateType[] = [
-  {
-    month: '6',
-    day: '20',
-    dayOfWeek: '목',
-  },
-  {
-    month: '6',
-    day: '21',
-    dayOfWeek: '금',
-  },
-  {
-    month: '6',
-    day: '22',
-    dayOfWeek: '토',
-  },
-  {
-    month: '6',
-    day: '23',
-    dayOfWeek: '일',
-  },
-];
-
-export type SlotType = {
-  startTime: string;
-  endTime: string;
-};
-
-const preferTimes: SlotType = {
-  startTime: '06:00',
-  endTime: '24:00',
-};
-
-const timeSlots = getAvailableTimes(preferTimes);
-
-function SelectPriority() {
-  return (
-    <Timetable timeSlots={timeSlots} availableDates={availableDates}>
-      {/* {({ date, timeSlots }) => <SelectionSlots date={date} timeSlots={timeSlots} />} */}
-    </Timetable>
-  );
-}
-
-export default SelectPriority;
diff --git a/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx b/src/pages/selectSchedule/selectTimeSlot/SelectionSlots.tsx
similarity index 87%
rename from src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx
rename to src/pages/selectSchedule/selectTimeSlot/SelectionSlots.tsx
index 93b0699f..89b0cfdd 100644
--- a/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx
+++ b/src/pages/selectSchedule/selectTimeSlot/SelectionSlots.tsx
@@ -1,8 +1,8 @@
 import { theme } from 'styles/theme';
 
-import { useTimetableContext } from '../../../../components/timetableComponents/context';
-import Slot from '../../../../components/timetableComponents/parts/Slot';
-import useSlotSeletion from '../hooks/useSlotSelection';
+import useSlotSeletion from './hooks/useSlotSelection';
+import { useTimetableContext } from '../../../components/timetableComponents/context';
+import Slot from '../../../components/timetableComponents/parts/Slot';
 
 interface SelectionSlotsProps {
   date: string;

From 838eed3460905658060927565f3cf4d8ff504a7c Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 21:49:31 +0900
Subject: [PATCH 29/62] =?UTF-8?q?feat:=20Header=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/moleculesComponents/Header.tsx |  47 ++++----
 .../timetableComponents/parts/Slot.tsx        |   2 +-
 src/components/timetableComponents/utils.ts   |   5 +-
 .../components/SteppingBtnSection.tsx         |   2 +-
 src/pages/selectSchedule/SelectSchedule.tsx   | 103 +++---------------
 .../components/SelectScheduleTable.tsx        |  92 ++++++++++++++++
 .../selectPriority/PrioritySlots.tsx          |   5 +-
 .../selectTimeSlot/SelectionSlots.tsx         |   9 +-
 .../selectTimeSlot/hooks/useSlotSelection.ts  |   2 +-
 src/pages/selectSchedule/types.ts             |   1 +
 src/pages/selectSchedule/utils.ts             |  37 +++++++
 11 files changed, 187 insertions(+), 118 deletions(-)
 create mode 100644 src/pages/selectSchedule/components/SelectScheduleTable.tsx
 rename src/pages/selectSchedule/{ => components}/selectPriority/PrioritySlots.tsx (90%)
 rename src/pages/selectSchedule/{ => components}/selectTimeSlot/SelectionSlots.tsx (83%)
 rename src/pages/selectSchedule/{ => components}/selectTimeSlot/hooks/useSlotSelection.ts (94%)
 create mode 100644 src/pages/selectSchedule/types.ts
 create mode 100644 src/pages/selectSchedule/utils.ts

diff --git a/src/components/moleculesComponents/Header.tsx b/src/components/moleculesComponents/Header.tsx
index 10528811..0fbfa93e 100644
--- a/src/components/moleculesComponents/Header.tsx
+++ b/src/components/moleculesComponents/Header.tsx
@@ -1,30 +1,26 @@
-import { BackIc, ExitIc, HambergerIc, LinkIc, MainLogoIc } from 'components/Icon/icon';
 import { Dispatch, SetStateAction, useState } from 'react';
 
-import CopyToClipboard from 'react-copy-to-clipboard';
-import Navigation from './Navigation';
 import Text from 'components/atomComponents/Text';
-import { notify } from 'utils/toast/copyLink';
+import { BackIc, ExitIc, HambergerIc, LinkIc, MainLogoIc } from 'components/Icon/icon';
+import { Step as SelectScheduleStep } from 'pages/selectSchedule/types';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { useParams } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
-import { useNavigate } from 'react-router-dom';
-import { useParams } from 'react-router';
+import { notify } from 'utils/toast/copyLink';
+
+import Navigation from './Navigation';
+
 
 interface HeaderProps {
   position: string;
-  setStep?: Dispatch<SetStateAction<number>>;
+  setFunnelStep?: Dispatch<SetStateAction<number>>;
+  setSelectScheduleStep?: Dispatch<SetStateAction<SelectScheduleStep>>;
 }
 
-function Header({ position, setStep }: HeaderProps) {
+function Header({ position, setFunnelStep, setSelectScheduleStep }: HeaderProps) {
   const navigationOptions = [
-    // {
-    //   title: '공지사항',
-    //   url: '',
-    // },
-    // {
-    //   title: 'ASAP family',
-    //   url: '',
-    // },
     {
       title: '약속 생성하기',
       url: '/meet/create',
@@ -38,8 +34,8 @@ function Header({ position, setStep }: HeaderProps) {
   const navigate = useNavigate();
   const [isNaviOpen, setIsNaviOpen] = useState(false);
   const backToFunnel = () => {
-    if (setStep !== undefined) {
-      setStep((prev) => {
+    if (setFunnelStep !== undefined) {
+      setFunnelStep((prev) => {
         if (prev === 0) {
           navigate('/');
           return prev;
@@ -48,6 +44,19 @@ function Header({ position, setStep }: HeaderProps) {
       });
     }
   };
+  const backToSelectSchedule = () =>{
+    if (setSelectScheduleStep !== undefined){
+      setSelectScheduleStep((prev:SelectScheduleStep)=>{
+        if (prev === 'selectTimeSlot'){
+          window.history.back()
+          return prev;
+        } else if (prev === 'selectPriority'){
+          return 'selectTimeSlot'
+        }
+        return prev;
+      })
+    }
+  }
 
   const { meetingId } = useParams();
   return (
@@ -78,7 +87,7 @@ function Header({ position, setStep }: HeaderProps) {
               </CopyToClipboard>
             </ConfirmIconSection>
           ) : position === 'schedule' ? (
-            <ConfirmIconSection onClick={() => window.history.back()}>
+            <ConfirmIconSection onClick={backToSelectSchedule}>
               <IconSection>
                 <BackIc />
               </IconSection>
diff --git a/src/components/timetableComponents/parts/Slot.tsx b/src/components/timetableComponents/parts/Slot.tsx
index d39aaf8c..e1706e5a 100644
--- a/src/components/timetableComponents/parts/Slot.tsx
+++ b/src/components/timetableComponents/parts/Slot.tsx
@@ -19,8 +19,8 @@ const DefaultSlot = styled.div<{
   $slotStyle?: string;
 }>`
   border-top: 1px solid ${({ theme }) => theme.colors.grey7};
-  ${({ $slotStyle }) => $slotStyle};
   border-top-style: ${({ $borderStyle }) => $borderStyle};
+  ${({ $slotStyle }) => $slotStyle};
 
   width: 4.4rem;
   height: 2.2rem;
diff --git a/src/components/timetableComponents/utils.ts b/src/components/timetableComponents/utils.ts
index 76cab6a5..c27449cd 100644
--- a/src/components/timetableComponents/utils.ts
+++ b/src/components/timetableComponents/utils.ts
@@ -1,8 +1,7 @@
-import { SlotType } from './Timetable';
-
+import { SlotType } from 'pages/selectSchedule/components/SelectScheduleTable';
 /**
  *
- * @description 시작 시간(startTime)과 종료 시간(endTime) 사이에서 30분 간격으로 시간 슬롯을 생성하여 반환하는 함수입니다.
+ * @desc 시작 시간(startTime)과 종료 시간(endTime) 사이에서 30분 간격으로 시간 슬롯을 생성하여 반환하는 함수입니다.
  */
 
 export function getAvailableTimes(times: SlotType) {
diff --git a/src/pages/SteppingStone/components/SteppingBtnSection.tsx b/src/pages/SteppingStone/components/SteppingBtnSection.tsx
index c93d0dae..2107e84e 100644
--- a/src/pages/SteppingStone/components/SteppingBtnSection.tsx
+++ b/src/pages/SteppingStone/components/SteppingBtnSection.tsx
@@ -46,7 +46,7 @@ function SteppingBtnSection({ steppingType }: SteppingProps) {
                 </BottomSheetModal>
                 <ModalOverlay $isModalOpen={isModalOpen} >
                 </ModalOverlay>
-                <Link to={`/host/select-timeslot/${meetInfo.meetingId}`}>
+                <Link to={`/host/select/${meetInfo.meetingId}`}>
                   <Button typeState={'primaryActive'}>
                     <Text font={'button2'}>나의 가능시간 입력</Text>
                   </Button>
diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx
index 6733ebfe..5e7972df 100644
--- a/src/pages/selectSchedule/SelectSchedule.tsx
+++ b/src/pages/selectSchedule/SelectSchedule.tsx
@@ -1,96 +1,27 @@
-import { ReactNode, useState } from 'react';
+import { useState } from 'react';
 
-import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context';
-import Timetable from 'components/timetableComponents/Timetable';
-import { DateType, TimetableStructure } from 'components/timetableComponents/types';
-import { getAvailableTimes } from 'components/timetableComponents/utils';
+import Header from 'components/moleculesComponents/Header';
+import styled from 'styled-components';
 
-import PrioritySlots from './selectPriority/PrioritySlots';
-import SelectionSlots from './selectTimeSlot/SelectionSlots';
-
-/***** api 연결 후 지울 것*****/
-
-const availableDates: DateType[] = [
-  {
-    month: '6',
-    day: '20',
-    dayOfWeek: '목',
-  },
-  {
-    month: '6',
-    day: '21',
-    dayOfWeek: '금',
-  },
-  {
-    month: '6',
-    day: '22',
-    dayOfWeek: '토',
-  },
-  {
-    month: '6',
-    day: '23',
-    dayOfWeek: '일',
-  },
-];
-
-export type SlotType = {
-  startTime: string;
-  endTime: string;
-};
-
-const preferTimes: SlotType = {
-  startTime: '06:00',
-  endTime: '24:00',
-};
-
-const timeSlots = getAvailableTimes(preferTimes);
-/***** api 연결 후 지울 것*****/
-
-type Step = 'selectTimeSlot' | 'selectPriority';
-
-type StepSlotsType = { [key in Step]: (props: TimetableStructure) => ReactNode };
+import SelectScheduleTable from './components/SelectScheduleTable';
+import { Step } from './types';
 
 function SelectSchedule() {
-  const [step, setStep] = useState<Step>('selectPriority');
-  const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
-  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({
-    0: {
-      date: '6/20/목',
-      startSlot: '15:00',
-      endSlot: '20:00',
-      priority: 1,
-    },
-  });
-
-  const stepSlots: StepSlotsType = {
-    selectTimeSlot: ({ date, timeSlots }: TimetableStructure) => (
-      <SelectionSlots date={date} timeSlots={timeSlots} />
-    ),
-    selectPriority: ({ date, timeSlots }: TimetableStructure) => (
-      <PrioritySlots date={date} timeSlots={timeSlots} />
-    ),
-  };
+  const [step, setStep] = useState<Step>('selectTimeSlot');
 
   return (
-    <TimetableContext.Provider
-      value={{
-        startSlot,
-        setStartSlot,
-        selectedSlots,
-        setSelectedSlots,
-      }}
-    >
-      <Timetable timeSlots={timeSlots} availableDates={availableDates}>
-        {stepSlots[step]}
-      </Timetable>
-      <button style={{ color: 'white' }} onClick={() => setStep('selectPriority')}>
-        다음으로
-      </button>
-      <button style={{ color: 'white' }} onClick={() => setStep('selectTimeSlot')}>
-        이전으로
-      </button>
-    </TimetableContext.Provider>
+    <SelectScheduleWrapper>
+      <Header position="schedule" setSelectScheduleStep={setStep} />
+      <SelectScheduleTable step={step} />
+    </SelectScheduleWrapper>
   );
 }
 
 export default SelectSchedule;
+
+const SelectScheduleWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
new file mode 100644
index 00000000..a71a9e1a
--- /dev/null
+++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
@@ -0,0 +1,92 @@
+import { ReactNode, useState } from 'react';
+
+import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context';
+import Timetable from 'components/timetableComponents/Timetable';
+import { DateType, TimetableStructure } from 'components/timetableComponents/types';
+import { getAvailableTimes } from 'components/timetableComponents/utils';
+
+import PrioritySlots from './selectPriority/PrioritySlots';
+import SelectionSlots from './selectTimeSlot/SelectionSlots';
+import { Step } from '../types';
+
+/***** api 연결 후 지울 것*****/
+
+const availableDates: DateType[] = [
+  {
+    month: '6',
+    day: '20',
+    dayOfWeek: '목',
+  },
+  {
+    month: '6',
+    day: '21',
+    dayOfWeek: '금',
+  },
+  {
+    month: '6',
+    day: '22',
+    dayOfWeek: '토',
+  },
+  {
+    month: '6',
+    day: '23',
+    dayOfWeek: '일',
+  },
+];
+
+export type SlotType = {
+  startTime: string;
+  endTime: string;
+};
+
+const preferTimes: SlotType = {
+  startTime: '06:00',
+  endTime: '24:00',
+};
+
+const timeSlots = getAvailableTimes(preferTimes);
+/***** api 연결 후 지울 것*****/
+
+type StepSlotsType = { [key in Step]: (props: TimetableStructure) => ReactNode };
+
+interface SelectScheduleTableProps {
+  step: Step;
+}
+
+function SelectScheduleTable({ step }: SelectScheduleTableProps) {
+  const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
+  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({
+    0: {
+      date: '6/20/목',
+      startSlot: '15:00',
+      endSlot: '20:00',
+      priority: 1,
+    },
+  });
+
+  const stepSlots: StepSlotsType = {
+    selectTimeSlot: ({ date, timeSlots }: TimetableStructure) => (
+      <SelectionSlots date={date} timeSlots={timeSlots} />
+    ),
+    selectPriority: ({ date, timeSlots }: TimetableStructure) => (
+      <PrioritySlots date={date} timeSlots={timeSlots} />
+    ),
+  };
+
+  return (
+    <TimetableContext.Provider
+      value={{
+        startSlot,
+        setStartSlot,
+        selectedSlots,
+        setSelectedSlots,
+      }}
+    >
+      <Timetable timeSlots={timeSlots} availableDates={availableDates}>
+        {stepSlots[step]}
+      </Timetable>
+    </TimetableContext.Provider>
+  );
+}
+
+export default SelectScheduleTable;
diff --git a/src/pages/selectSchedule/selectPriority/PrioritySlots.tsx b/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx
similarity index 90%
rename from src/pages/selectSchedule/selectPriority/PrioritySlots.tsx
rename to src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx
index d9f59935..43fc564e 100644
--- a/src/pages/selectSchedule/selectPriority/PrioritySlots.tsx
+++ b/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx
@@ -1,6 +1,7 @@
-import Slot from '../../../components/timetableComponents/parts/Slot';
 import { theme } from 'styles/theme';
-import { useTimetableContext } from '../../../components/timetableComponents/context';
+
+import { useTimetableContext } from '../../../../components/timetableComponents/context';
+import Slot from '../../../../components/timetableComponents/parts/Slot';
 
 interface SelectionSlotsProps {
   date: string;
diff --git a/src/pages/selectSchedule/selectTimeSlot/SelectionSlots.tsx b/src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx
similarity index 83%
rename from src/pages/selectSchedule/selectTimeSlot/SelectionSlots.tsx
rename to src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx
index 89b0cfdd..3f3eb67a 100644
--- a/src/pages/selectSchedule/selectTimeSlot/SelectionSlots.tsx
+++ b/src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx
@@ -1,8 +1,8 @@
 import { theme } from 'styles/theme';
 
 import useSlotSeletion from './hooks/useSlotSelection';
-import { useTimetableContext } from '../../../components/timetableComponents/context';
-import Slot from '../../../components/timetableComponents/parts/Slot';
+import { useTimetableContext } from '../../../../components/timetableComponents/context';
+import Slot from '../../../../components/timetableComponents/parts/Slot';
 
 interface SelectionSlotsProps {
   date: string;
@@ -24,9 +24,8 @@ function SelectionSlots({ date, timeSlots }: SelectionSlotsProps) {
     return `
       cursor:pointer;
       ${
-        isStartSlot
-          ? `border: 1px dashed ${theme.colors.main5}`
-          : `border-top: 1px solid ${theme.colors.grey7}`
+        isStartSlot && `border: 1px dashed ${theme.colors.main5}`
+        // : `border-top: 1px solid ${theme.colors.grey7}`
       };
       ${
         isSelectedSlot ? `background-color: ${theme.colors.main1}` : `background-color: transparent`
diff --git a/src/pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection.ts b/src/pages/selectSchedule/components/selectTimeSlot/hooks/useSlotSelection.ts
similarity index 94%
rename from src/pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection.ts
rename to src/pages/selectSchedule/components/selectTimeSlot/hooks/useSlotSelection.ts
index ee404e48..b4810c9e 100644
--- a/src/pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection.ts
+++ b/src/pages/selectSchedule/components/selectTimeSlot/hooks/useSlotSelection.ts
@@ -1,4 +1,4 @@
-import { useTimetableContext } from '../../../../components/timetableComponents/context'
+import { useTimetableContext } from '../../../../../components/timetableComponents/context'
 
 const useSlotSeletion = () => {
     const {startSlot, setStartSlot, selectedSlots, setSelectedSlots} = useTimetableContext();
diff --git a/src/pages/selectSchedule/types.ts b/src/pages/selectSchedule/types.ts
new file mode 100644
index 00000000..2f263aa5
--- /dev/null
+++ b/src/pages/selectSchedule/types.ts
@@ -0,0 +1 @@
+export type Step = 'selectTimeSlot' | 'selectPriority';
diff --git a/src/pages/selectSchedule/utils.ts b/src/pages/selectSchedule/utils.ts
new file mode 100644
index 00000000..b54da7cf
--- /dev/null
+++ b/src/pages/selectSchedule/utils.ts
@@ -0,0 +1,37 @@
+/**
+ *
+ * @desc 영어로 표현된 회의 진행 시간을 한글로 변환하는 함수
+ */
+export const formatDuration = (duration: string): string => {
+  switch (duration) {
+    case 'HALF':
+      return '30분';
+    case 'HOUR':
+      return '1시간';
+    case 'HOUR_HALF':
+      return '1시간 30분';
+    case 'TWO_HOUR':
+      return '2시간';
+    case 'TWO_HOUR_HALF':
+      return '2시간 30분';
+    case 'THREE_HOUR':
+      return '3시간';
+    default:
+      return 'UNDEFINED';
+  }
+};
+
+/**
+ *
+ * @desc 영어로 표현된 회의 장소를 한글로 변환하는 함수
+ */
+export const formatPlace = (place: string) => {
+  switch (place) {
+    case 'ONLINE':
+      return '온라인';
+    case 'OFFLINE':
+      return '오프라인';
+    case 'UNDEFINED':
+      return undefined;
+  }
+};

From 2d39522b1c6d15fd6e4f71b5730ffebbaee84f34 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 22:26:30 +0900
Subject: [PATCH 30/62] =?UTF-8?q?feat:=20=EA=B0=80=EB=8A=A5=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=84=20=EC=9E=85=EB=A0=A5=20=EC=84=A4=EB=AA=85=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../timetableComponents/Timetable.tsx         |  4 +-
 src/components/timetableComponents/types.ts   | 15 +++-
 src/pages/selectSchedule/SelectSchedule.tsx   | 47 ++++++++++-
 .../selectSchedule/components/Description.tsx | 84 +++++++++++++++++++
 .../components/SelectScheduleTable.tsx        | 55 ++----------
 src/pages/selectSchedule/types.ts             |  3 +
 6 files changed, 153 insertions(+), 55 deletions(-)
 create mode 100644 src/pages/selectSchedule/components/Description.tsx

diff --git a/src/components/timetableComponents/Timetable.tsx b/src/components/timetableComponents/Timetable.tsx
index c4896ea9..c0f634c6 100644
--- a/src/components/timetableComponents/Timetable.tsx
+++ b/src/components/timetableComponents/Timetable.tsx
@@ -4,12 +4,12 @@ import styled from 'styled-components';
 
 import DateTitle from './parts/ColumnTitle';
 import SlotTitle from './parts/SlotTitle';
-import { DateType, TimetableStructure } from './types';
+import { ColumnStructure, DateType } from './types';
 
 interface TimetableProps {
   timeSlots: string[];
   availableDates: DateType[];
-  children: (props: TimetableStructure) => ReactNode;
+  children: (props: ColumnStructure) => ReactNode;
 }
 
 function Timetable({ timeSlots, availableDates, children }: TimetableProps) {
diff --git a/src/components/timetableComponents/types.ts b/src/components/timetableComponents/types.ts
index f323eb22..a3242267 100644
--- a/src/components/timetableComponents/types.ts
+++ b/src/components/timetableComponents/types.ts
@@ -1,10 +1,17 @@
-export interface TimetableStructure {
-  date: string;
+interface BaseStructure {
   timeSlots: string[];
 }
 
-export type DateType = {
+export interface TimetableStructure extends BaseStructure {
+  availableDates: DateType[];
+}
+
+export interface ColumnStructure extends BaseStructure {
+  date: string;
+}
+
+export interface DateType {
   month: string | undefined;
   day: string | undefined;
   dayOfWeek: string | undefined;
-};
+}
diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx
index 5e7972df..24a97109 100644
--- a/src/pages/selectSchedule/SelectSchedule.tsx
+++ b/src/pages/selectSchedule/SelectSchedule.tsx
@@ -1,18 +1,63 @@
 import { useState } from 'react';
 
 import Header from 'components/moleculesComponents/Header';
+import { DateType } from 'components/timetableComponents/types';
+import { getAvailableTimes } from 'components/timetableComponents/utils';
 import styled from 'styled-components';
 
+import Description from './components/Description';
 import SelectScheduleTable from './components/SelectScheduleTable';
 import { Step } from './types';
 
+/***** api 연결 후 지울 것*****/
+
+const availableDates: DateType[] = [
+  {
+    month: '6',
+    day: '20',
+    dayOfWeek: '목',
+  },
+  {
+    month: '6',
+    day: '21',
+    dayOfWeek: '금',
+  },
+  {
+    month: '6',
+    day: '22',
+    dayOfWeek: '토',
+  },
+  {
+    month: '6',
+    day: '23',
+    dayOfWeek: '일',
+  },
+];
+
+export type SlotType = {
+  startTime: string;
+  endTime: string;
+};
+
+const preferTimes: SlotType = {
+  startTime: '06:00',
+  endTime: '24:00',
+};
+
+const timeSlots = getAvailableTimes(preferTimes);
+const duration = 'HALF';
+const place = 'ONLINE';
+const placeDetail = '구글미트';
+/***** api 연결 후 지울 것*****/
+
 function SelectSchedule() {
   const [step, setStep] = useState<Step>('selectTimeSlot');
 
   return (
     <SelectScheduleWrapper>
       <Header position="schedule" setSelectScheduleStep={setStep} />
-      <SelectScheduleTable step={step} />
+      <Description duration={duration} place={place} placeDetail={placeDetail} />
+      <SelectScheduleTable step={step} timeSlots={timeSlots} availableDates={availableDates} />
     </SelectScheduleWrapper>
   );
 }
diff --git a/src/pages/selectSchedule/components/Description.tsx b/src/pages/selectSchedule/components/Description.tsx
new file mode 100644
index 00000000..63c434d7
--- /dev/null
+++ b/src/pages/selectSchedule/components/Description.tsx
@@ -0,0 +1,84 @@
+import { formatDuration, formatPlace } from '../utils';
+
+import Text from 'components/atomComponents/Text';
+import styled from 'styled-components';
+import { theme } from 'styles/theme';
+
+interface DescriptionProps {
+  duration: string;
+  place: string;
+  placeDetail: string;
+}
+
+function Description({ duration: durationOg, place: placeOg, placeDetail }: DescriptionProps) {
+  const duration = formatDuration(durationOg);
+  const place = formatPlace(placeOg);
+  return (
+    <DescriptionWrapper>
+      <Texts>
+        {place ? (
+          <>
+            <OneLine>
+              <Text font="body1" color={theme.colors.grey1}>
+                회의는&nbsp;
+              </Text>
+              <Text font="body1" color={theme.colors.sub1}>
+                {duration}&nbsp;
+              </Text>
+              <Text font="body1" color={theme.colors.grey1}>
+                {'동안'}
+              </Text>
+            </OneLine>
+            <OneLine>
+              <Text font="body1" color={theme.colors.sub1}>
+                {place}
+              </Text>
+              {placeDetail && (
+                <Text font="body1" color={theme.colors.sub1}>
+                  {`(${placeDetail})`}
+                </Text>
+              )}
+              <Text font="body1" color={theme.colors.grey1}>
+                {'으로 진행될 예정이에요!'}
+              </Text>
+            </OneLine>
+          </>
+        ) : (
+          <OneLine>
+            <Text font="body1" color={theme.colors.grey1}>
+              회의는&nbsp;
+            </Text>
+            <Text font="body1" color={theme.colors.sub1}>
+              {duration}&nbsp;
+            </Text>
+            <Text font="body1" color={theme.colors.grey1}>
+              {'동안 진행될 예정이에요!'}
+            </Text>
+          </OneLine>
+        )}
+      </Texts>
+    </DescriptionWrapper>
+  );
+}
+
+export default Description;
+
+const DescriptionWrapper = styled.div`
+  display: flex;
+  position: relative;
+  margin-top: 2rem;
+`;
+
+const Texts = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 0.8rem;
+  background-color: ${theme.colors.grey9};
+  padding: 1.5rem 2.4rem;
+  width: 33.5rem;
+`;
+const OneLine = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+`;
diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
index a71a9e1a..4ddc2460 100644
--- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx
+++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
@@ -1,59 +1,18 @@
-import { ReactNode, useState } from 'react';
+import { useState } from 'react';
 
 import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context';
 import Timetable from 'components/timetableComponents/Timetable';
-import { DateType, TimetableStructure } from 'components/timetableComponents/types';
-import { getAvailableTimes } from 'components/timetableComponents/utils';
+import { ColumnStructure, TimetableStructure } from 'components/timetableComponents/types';
 
 import PrioritySlots from './selectPriority/PrioritySlots';
 import SelectionSlots from './selectTimeSlot/SelectionSlots';
-import { Step } from '../types';
+import { Step, StepSlotsType } from '../types';
 
-/***** api 연결 후 지울 것*****/
-
-const availableDates: DateType[] = [
-  {
-    month: '6',
-    day: '20',
-    dayOfWeek: '목',
-  },
-  {
-    month: '6',
-    day: '21',
-    dayOfWeek: '금',
-  },
-  {
-    month: '6',
-    day: '22',
-    dayOfWeek: '토',
-  },
-  {
-    month: '6',
-    day: '23',
-    dayOfWeek: '일',
-  },
-];
-
-export type SlotType = {
-  startTime: string;
-  endTime: string;
-};
-
-const preferTimes: SlotType = {
-  startTime: '06:00',
-  endTime: '24:00',
-};
-
-const timeSlots = getAvailableTimes(preferTimes);
-/***** api 연결 후 지울 것*****/
-
-type StepSlotsType = { [key in Step]: (props: TimetableStructure) => ReactNode };
-
-interface SelectScheduleTableProps {
+interface SelectScheduleTableProps extends TimetableStructure {
   step: Step;
 }
 
-function SelectScheduleTable({ step }: SelectScheduleTableProps) {
+function SelectScheduleTable({ step, timeSlots, availableDates }: SelectScheduleTableProps) {
   const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
   const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({
     0: {
@@ -65,10 +24,10 @@ function SelectScheduleTable({ step }: SelectScheduleTableProps) {
   });
 
   const stepSlots: StepSlotsType = {
-    selectTimeSlot: ({ date, timeSlots }: TimetableStructure) => (
+    selectTimeSlot: ({ date, timeSlots }: ColumnStructure) => (
       <SelectionSlots date={date} timeSlots={timeSlots} />
     ),
-    selectPriority: ({ date, timeSlots }: TimetableStructure) => (
+    selectPriority: ({ date, timeSlots }: ColumnStructure) => (
       <PrioritySlots date={date} timeSlots={timeSlots} />
     ),
   };
diff --git a/src/pages/selectSchedule/types.ts b/src/pages/selectSchedule/types.ts
index 2f263aa5..de4c32c8 100644
--- a/src/pages/selectSchedule/types.ts
+++ b/src/pages/selectSchedule/types.ts
@@ -1 +1,4 @@
+import { ColumnStructure } from 'components/timetableComponents/types';
+
 export type Step = 'selectTimeSlot' | 'selectPriority';
+export type StepSlotsType = { [key in Step]: (props: ColumnStructure) => ReactNode };

From 02324c969912e57197849e4e2a8ec79f3586c364 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 22:49:06 +0900
Subject: [PATCH 31/62] =?UTF-8?q?feat:=20=EA=B0=80=EB=8A=A5=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=84,=20=EC=9A=B0=EC=84=A0=EC=88=9C=EC=9C=84=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=EC=97=90=20=ED=83=80=EC=9D=B4=ED=8B=80=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

---
 .../moleculesComponents/TitleComponents.tsx   | 21 ++++++----
 src/pages/createMeeting/CreateMeeting.tsx     |  7 ++--
 src/pages/selectSchedule/SelectSchedule.tsx   | 42 ++++++++++++++-----
 .../selectSchedule/components/Description.tsx |  4 +-
 src/pages/selectSchedule/components/Title.tsx | 11 +++++
 5 files changed, 61 insertions(+), 24 deletions(-)
 create mode 100644 src/pages/selectSchedule/components/Title.tsx

diff --git a/src/components/moleculesComponents/TitleComponents.tsx b/src/components/moleculesComponents/TitleComponents.tsx
index 4a532931..66ff3363 100644
--- a/src/components/moleculesComponents/TitleComponents.tsx
+++ b/src/components/moleculesComponents/TitleComponents.tsx
@@ -4,30 +4,35 @@ import { theme } from 'styles/theme';
 
 interface TextProps {
   main: string;
-  sub: string;
+  sub?: string;
+  padding?: string;
 }
 
-function TitleComponents({ main, sub }: TextProps) {
+const defaultPadding = `4.4rem 0 4.2rem 0`;
+function TitleComponents({ main, sub, padding = defaultPadding }: TextProps) {
   return (
-    <TitleWrapper>
+    <TitleWrapper $padding={padding}>
       <Text font={'head2'} color={`${theme.colors.white}`}>
         {main}
       </Text>
-      <Text font={'body3'} color={`${theme.colors.grey4}`}>
-        {sub}
-      </Text>
+      {sub && (
+        <Text font={'body3'} color={`${theme.colors.grey4}`}>
+          {sub}
+        </Text>
+      )}
     </TitleWrapper>
   );
 }
 
 export default TitleComponents;
 
-const TitleWrapper = styled.div`
+const TitleWrapper = styled.div<{ $padding: string }>`
   display: flex;
   position: relative;
   flex-direction: column;
   gap: 1.2rem;
 
-  padding: 4.4rem 0 4.2rem 0;
+  padding: ${({ $padding }) => $padding};
+
   width: 100%;
 `;
diff --git a/src/pages/createMeeting/CreateMeeting.tsx b/src/pages/createMeeting/CreateMeeting.tsx
index 5759f390..bcde5d43 100644
--- a/src/pages/createMeeting/CreateMeeting.tsx
+++ b/src/pages/createMeeting/CreateMeeting.tsx
@@ -1,12 +1,11 @@
 import { useEffect, useState } from 'react';
 
 import Header from 'components/moleculesComponents/Header';
+import { MeetingInfo } from './types/useFunnelInterface';
 import ReturnBodyComponent from 'pages/createMeeting/components/ReturnBodyComponent';
 import ReturnTitleComponent from 'pages/createMeeting/components/ReturnTitleComponent';
-import styled from 'styled-components/macro';
-
 import { funnelStep } from './data/meetingInfoData';
-import { MeetingInfo } from './types/useFunnelInterface';
+import styled from 'styled-components/macro';
 
 const initialMeetingInfo: MeetingInfo = {
   title: '',
@@ -27,7 +26,7 @@ function CreateMeeting() {
   return (
     <>
       <CreateMeetingWrapper>
-        <Header position={'createMeeting'} setStep={setStep} />
+        <Header position={'createMeeting'} setFunnelStep={setStep} />
         <ReturnTitleComponent step={currentStep} />
         <ReturnBodyComponent
           currentStep={currentStep}
diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx
index 24a97109..4ff8c7cb 100644
--- a/src/pages/selectSchedule/SelectSchedule.tsx
+++ b/src/pages/selectSchedule/SelectSchedule.tsx
@@ -1,13 +1,12 @@
-import { useState } from 'react';
-
-import Header from 'components/moleculesComponents/Header';
 import { DateType } from 'components/timetableComponents/types';
-import { getAvailableTimes } from 'components/timetableComponents/utils';
-import styled from 'styled-components';
-
 import Description from './components/Description';
+import Header from 'components/moleculesComponents/Header';
 import SelectScheduleTable from './components/SelectScheduleTable';
 import { Step } from './types';
+import TitleComponents from 'components/moleculesComponents/TitleComponents';
+import { getAvailableTimes } from 'components/timetableComponents/utils';
+import styled from 'styled-components';
+import { useState } from 'react';
 
 /***** api 연결 후 지울 것*****/
 
@@ -46,17 +45,40 @@ const preferTimes: SlotType = {
 
 const timeSlots = getAvailableTimes(preferTimes);
 const duration = 'HALF';
-const place = 'ONLINE';
-const placeDetail = '구글미트';
+const place = 'OFFLINE';
+const placeDetail = undefined;
 /***** api 연결 후 지울 것*****/
 
 function SelectSchedule() {
-  const [step, setStep] = useState<Step>('selectTimeSlot');
+  const [step, setStep] = useState<Step>('selectPriority');
+
+  interface TitlesType {
+    [key: string]: {
+      main: string;
+      sub?: string;
+    };
+  }
+  const titles: TitlesType = {
+    selectTimeSlot: {
+      main: '가능한 시간대를 등록해주세요',
+      sub: '시작시간과 종료시간을 터치하여 블럭을 생성해주세요',
+    },
+    selectPriority: {
+      main: '우선순위를 입력해주세요',
+    },
+  };
 
   return (
     <SelectScheduleWrapper>
       <Header position="schedule" setSelectScheduleStep={setStep} />
-      <Description duration={duration} place={place} placeDetail={placeDetail} />
+      {step === 'selectTimeSlot' && (
+        <Description duration={duration} place={place} placeDetail={placeDetail} />
+      )}
+      <TitleComponents
+        main={titles[step].main}
+        sub={titles[step].sub}
+        padding={step === 'selectTimeSlot' ? `0 0 2.6rem` : `4.4rem 0 3.2rem 0`}
+      />
       <SelectScheduleTable step={step} timeSlots={timeSlots} availableDates={availableDates} />
     </SelectScheduleWrapper>
   );
diff --git a/src/pages/selectSchedule/components/Description.tsx b/src/pages/selectSchedule/components/Description.tsx
index 63c434d7..e87e25fe 100644
--- a/src/pages/selectSchedule/components/Description.tsx
+++ b/src/pages/selectSchedule/components/Description.tsx
@@ -7,7 +7,7 @@ import { theme } from 'styles/theme';
 interface DescriptionProps {
   duration: string;
   place: string;
-  placeDetail: string;
+  placeDetail?: string;
 }
 
 function Description({ duration: durationOg, place: placeOg, placeDetail }: DescriptionProps) {
@@ -66,7 +66,7 @@ export default Description;
 const DescriptionWrapper = styled.div`
   display: flex;
   position: relative;
-  margin-top: 2rem;
+  margin: 2rem 0;
 `;
 
 const Texts = styled.div`
diff --git a/src/pages/selectSchedule/components/Title.tsx b/src/pages/selectSchedule/components/Title.tsx
new file mode 100644
index 00000000..ee954399
--- /dev/null
+++ b/src/pages/selectSchedule/components/Title.tsx
@@ -0,0 +1,11 @@
+import TitleComponents from 'components/moleculesComponents/TitleComponents';
+
+interface TitleProps {
+  mainText: string;
+  subText: string;
+}
+function Title({ mainText, subText }: TitleProps) {
+  return <TitleComponents main={mainText} sub={subText} />;
+}
+
+export default Title;

From d09d4e817b2ad93c8d3afc8f56752b443503e66c Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 22 Jun 2024 23:47:22 +0900
Subject: [PATCH 32/62] =?UTF-8?q?feat:=20=EB=A6=AC=ED=8C=A9=ED=86=A0?=
 =?UTF-8?q?=EB=A7=81=ED=95=9C=20=EC=8B=9C=EA=B0=84=ED=91=9C=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20=EC=9A=B0=EC=84=A0?=
 =?UTF-8?q?=EC=88=9C=EC=9C=84=20=EC=84=A0=ED=83=9D=20=EB=93=9C=EB=A1=AD?=
 =?UTF-8?q?=EB=8B=A4=EC=9A=B4=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/timetableComponents/context.ts |  17 +-
 .../components/SelectScheduleTable.tsx        |  25 +-
 .../selectPriority/PriorityDropdown.tsx       | 258 ++++++++++++++++++
 .../selectPriority/PrioritySlots.tsx          |   3 +-
 4 files changed, 287 insertions(+), 16 deletions(-)
 create mode 100644 src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx

diff --git a/src/components/timetableComponents/context.ts b/src/components/timetableComponents/context.ts
index 0d1dad0d..d6eb8a77 100644
--- a/src/components/timetableComponents/context.ts
+++ b/src/components/timetableComponents/context.ts
@@ -1,13 +1,14 @@
 import { createContext, useContext } from 'react';
 
-export type SelectedSlotType = {
-  [key: number]: {
-    date: string;
-    startSlot: string;
-    endSlot: string;
-    priority: 0 | 1 | 2 | 3;
-  };
-};
+export interface SlotInfoType {
+  date: string;
+  startSlot: string;
+  endSlot: string;
+  priority: 0 | 1 | 2 | 3;
+}
+export interface SelectedSlotType {
+  [key: number]: SlotInfoType;
+}
 
 type TimetableContextType = {
   startSlot?: string;
diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
index 4ddc2460..aaf55f87 100644
--- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx
+++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
@@ -1,12 +1,12 @@
-import { useState } from 'react';
-
-import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context';
-import Timetable from 'components/timetableComponents/Timetable';
 import { ColumnStructure, TimetableStructure } from 'components/timetableComponents/types';
+import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context';
+import { Step, StepSlotsType } from '../types';
 
+import PriorityDropdown from './selectPriority/PriorityDropdown';
 import PrioritySlots from './selectPriority/PrioritySlots';
 import SelectionSlots from './selectTimeSlot/SelectionSlots';
-import { Step, StepSlotsType } from '../types';
+import Timetable from 'components/timetableComponents/Timetable';
+import { useState } from 'react';
 
 interface SelectScheduleTableProps extends TimetableStructure {
   step: Step;
@@ -19,7 +19,19 @@ function SelectScheduleTable({ step, timeSlots, availableDates }: SelectSchedule
       date: '6/20/목',
       startSlot: '15:00',
       endSlot: '20:00',
-      priority: 1,
+      priority: 0,
+    },
+    1: {
+      date: '6/20/목',
+      startSlot: '21:00',
+      endSlot: '22:30',
+      priority: 0,
+    },
+    3: {
+      date: '6/21/금',
+      startSlot: '15:00',
+      endSlot: '20:00',
+      priority: 0,
     },
   });
 
@@ -44,6 +56,7 @@ function SelectScheduleTable({ step, timeSlots, availableDates }: SelectSchedule
       <Timetable timeSlots={timeSlots} availableDates={availableDates}>
         {stepSlots[step]}
       </Timetable>
+      {step === 'selectPriority' && <PriorityDropdown />}
     </TimetableContext.Provider>
   );
 }
diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
new file mode 100644
index 00000000..dc7f6b3e
--- /dev/null
+++ b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
@@ -0,0 +1,258 @@
+import { Circle1Ic, Circle2Ic, Circle3Ic, DropDownIc, DropUpIc } from 'components/Icon/icon';
+import {
+  SelectedSlotType,
+  SlotInfoType,
+  useTimetableContext,
+} from 'components/timetableComponents/context';
+
+import Text from 'components/atomComponents/Text';
+import styled from 'styled-components/macro';
+import { theme } from 'styles/theme';
+import { useState } from 'react';
+
+/**
+ *
+ * @desc 기존의 우선순위 Dropdown 컴포넌트를 그대로 가져와서, 따로 리팩토링 없이 새로운 시간표 컴포넌트에 맞게 적용되도록 수정한 컴포넌트입니다.
+ */
+
+function PriorityDropdown() {
+  const { selectedSlots, setSelectedSlots } = useTimetableContext();
+  console.log(selectedSlots);
+  const [timeSelect, setTimeSelect] = useState([false, false, false]);
+  const [input_, setInput] = useState<string[]>(['', '', '']);
+  const handleDropdown = (i: number) => {
+    if (!timeSelect[i]) {
+      setTimeSelect((prevState) => {
+        const updatedTimeSelect = prevState.map((value, index) => index === i);
+        return updatedTimeSelect;
+      });
+    } else {
+      setTimeSelect((prevState) => {
+        const updatedTimeSelect = [...prevState];
+        updatedTimeSelect[i] = !updatedTimeSelect[i];
+        return updatedTimeSelect;
+      });
+    }
+  };
+
+  const handlePriority = (i: number, item: SlotInfoType, itemKey: string) => {
+    let temp: 0 | 1 | 2 | 3 = 0;
+    switch (i) {
+      case 0:
+        temp = 1;
+        break;
+      case 1:
+        temp = 2;
+        break;
+      case 2:
+        temp = 3;
+        break;
+
+      default:
+        temp = 0;
+        break;
+    }
+    setSelectedSlots(
+      (prev: SlotInfoType): SlotInfoType => {
+        const updatedScheduleList = { ...prev };
+        for (const key in updatedScheduleList) {
+          if (selectedSlots[parseInt(key)].priority === temp) {
+            return { ...selectedSlots[parseInt(key)], priority: 0 };
+          }
+          break;
+        }
+        return updatedScheduleList;
+      },
+    );
+
+    setSelectedSlots((prev: SelectedSlotType) => {
+      const updatedSelectedSlots = Object.entries(prev).map(([key, value]) => {
+        if (value.priority === temp) {
+          return { ...value, prority: 0 };
+        }
+        return value;
+      });
+      return updatedSelectedSlots;
+    });
+
+    setSelectedSlots((prev: SelectedSlotType) => {
+      const updatedSelectedSlots = Object.entries(prev).map(([key, value]) => {
+        if (key === itemKey) {
+          return { ...value, priority: temp };
+        }
+        return value;
+      });
+      return updatedSelectedSlots;
+    });
+
+    setInput((prev) => {
+      const updatedInput = [...prev];
+
+      if (i === 0) {
+        updatedInput[i] = `${item.date} ${item.startSlot}~${item.endSlot}`;
+      } else if (i === 1) {
+        updatedInput[i] = `${item.date} ${item.startSlot}~${item.endSlot}`;
+      } else if (i === 2) {
+        updatedInput[i] = `${item.date} ${item.startSlot}~${item.endSlot}`;
+      } else {
+        updatedInput[i] = 'error';
+      }
+      return updatedInput;
+    });
+    handleDropdown(i);
+  };
+
+  return (
+    <PriorityDropdownWrapper>
+      {Object.entries(selectedSlots).map(([key, _], i) => {
+        return i < 3 ? (
+          <PriorityDropdownSection key={key}>
+            <CircleWrapper>
+              <TextWrapper>
+                <Text font={'body2'} color={theme.colors.white}>
+                  {`${i + 1}`}순위
+                </Text>
+              </TextWrapper>
+              {i === 0 ? (
+                <Circle1Icon />
+              ) : i === 1 ? (
+                <Circle2Icon />
+              ) : i === 2 ? (
+                <Circle3Icon />
+              ) : (
+                <div />
+              )}
+            </CircleWrapper>
+            <InputWrapper>
+              <TimeInput
+                type="text"
+                $drop={timeSelect[i]}
+                placeholder="시간대 선택"
+                readOnly
+                onClick={() => handleDropdown(i)}
+                value={input_[i]}
+              />
+
+              {timeSelect[i] ? (
+                <DropDownIconWrapper>
+                  <DropUpIc />{' '}
+                </DropDownIconWrapper>
+              ) : (
+                <DropDownIconWrapper>
+                  <DropDownIc />
+                </DropDownIconWrapper>
+              )}
+
+              {timeSelect[i] && (
+                <DropdownWrapper>
+                  {Object.entries(selectedSlots).map(
+                    ([key, value]) =>
+                      !value.priority && (
+                        <DropDownItem key={key} onClick={() => handlePriority(i, value, key)}>
+                          <Text font={'button1'} color={theme.colors.white}>
+                            {value.date} {value.startSlot}~{value.endSlot}
+                          </Text>
+                        </DropDownItem>
+                      ),
+                  )}
+                </DropdownWrapper>
+              )}
+            </InputWrapper>
+          </PriorityDropdownSection>
+        ) : (
+          <div key={key} />
+        );
+      })}
+    </PriorityDropdownWrapper>
+  );
+}
+const PriorityDropdownWrapper = styled.div`
+  display: flex;
+
+  flex-direction: column;
+  gap: 1.2rem;
+  justify-content: start;
+
+  margin-top: 3rem;
+  margin-bottom: 7.5rem;
+  width: 100%;
+  height: 18rem;
+`;
+
+const PriorityDropdownSection = styled.div`
+  display: flex;
+  gap: 1.3rem;
+  justify-content: space-between;
+  width: 100%;
+  height: 5.2rem;
+`;
+const CircleWrapper = styled.div`
+  position: relative;
+  width: 4.8rem;
+  height: 4.8rem;
+`;
+
+const TextWrapper = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+const Circle1Icon = styled(Circle1Ic)``;
+const Circle2Icon = styled(Circle2Ic)``;
+const Circle3Icon = styled(Circle3Ic)``;
+
+const InputWrapper = styled.div`
+  position: relative;
+`;
+const TimeInput = styled.input<{ $drop: boolean }>`
+  appearance: none;
+  outline: none;
+  border: none;
+  border-radius: 0.8rem;
+  border-bottom-left-radius: ${(props) => (props.$drop ? '0rem' : '0.8rem')};
+  border-bottom-right-radius: ${(props) => (props.$drop ? '0rem' : '0.8rem')};
+
+  background-color: ${({ theme }) => theme.colors.grey7};
+  ${({ theme }) => theme.fonts.button1};
+  cursor: pointer;
+  padding-left: 2rem;
+  width: 27.4rem;
+  height: 5.2rem;
+  color: ${({ theme }) => theme.colors.white};
+`;
+const DropDownIconWrapper = styled.div`
+  position: absolute;
+  top: 36%;
+  right: 1rem;
+  cursor: pointer;
+`;
+const DropdownWrapper = styled.div`
+  position: absolute;
+  top: 5.2rem;
+  z-index: 2;
+  border-radius: 0rem 0rem 0.8rem 0.8rem;
+  background-color: ${({ theme }) => theme.colors.grey6};
+  width: 27.4rem;
+  height: fit-content;
+  max-height: 15.6rem;
+
+  overflow-x: hidden;
+  overflow-y: auto;
+`;
+
+const DropDownItem = styled.div`
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${({ theme }) => theme.colors.grey7};
+  background-color: ${({ theme }) => theme.colors.grey6};
+
+  cursor: pointer;
+
+  width: 27.4rem;
+  height: 5.2rem;
+`;
+
+export default PriorityDropdown;
diff --git a/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx b/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx
index 43fc564e..afab5954 100644
--- a/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx
+++ b/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx
@@ -1,7 +1,6 @@
+import Slot from '../../../../components/timetableComponents/parts/Slot';
 import { theme } from 'styles/theme';
-
 import { useTimetableContext } from '../../../../components/timetableComponents/context';
-import Slot from '../../../../components/timetableComponents/parts/Slot';
 
 interface SelectionSlotsProps {
   date: string;

From b6b16be00dcf462f0c5e232ac9d65ef198629403 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 23 Jun 2024 00:07:05 +0900
Subject: [PATCH 33/62] =?UTF-8?q?feat:=20=EC=9A=B0=EC=84=A0=EC=88=9C?=
 =?UTF-8?q?=EC=9C=84=20=EC=84=A0=ED=83=9D=EC=8B=9C=20=EC=8B=9C=EA=B0=84?=
 =?UTF-8?q?=ED=91=9C=EC=97=90=20=EC=9A=B0=EC=84=A0=EC=88=9C=EC=9C=84=20?=
 =?UTF-8?q?=EC=88=AB=EC=9E=90=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/timetableComponents/parts/Slot.tsx | 13 +++++++++++--
 .../components/selectPriority/PrioritySlots.tsx   | 15 ++++++++++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/timetableComponents/parts/Slot.tsx b/src/components/timetableComponents/parts/Slot.tsx
index e1706e5a..355fd68a 100644
--- a/src/components/timetableComponents/parts/Slot.tsx
+++ b/src/components/timetableComponents/parts/Slot.tsx
@@ -1,15 +1,21 @@
+import { ReactNode } from 'react';
 import styled from 'styled-components';
 
 interface SlotProps {
   slotId: string;
   slotStyle?: string;
   onClick?: () => void;
+  children?: ReactNode;
 }
 
-function Slot({ slotId, slotStyle, onClick }: SlotProps) {
+function Slot({ slotId, slotStyle, onClick, children }: SlotProps) {
   const borderStyle = slotId.endsWith(':30') ? 'dashed' : 'solid';
 
-  return <DefaultSlot $borderStyle={borderStyle} $slotStyle={slotStyle} onClick={onClick} />;
+  return (
+    <DefaultSlot $borderStyle={borderStyle} $slotStyle={slotStyle} onClick={onClick}>
+      {children}
+    </DefaultSlot>
+  );
 }
 
 export default Slot;
@@ -24,4 +30,7 @@ const DefaultSlot = styled.div<{
 
   width: 4.4rem;
   height: 2.2rem;
+
+  display: flex;
+  justify-content: center;
 `;
diff --git a/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx b/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx
index afab5954..0c03e53d 100644
--- a/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx
+++ b/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx
@@ -1,4 +1,5 @@
 import Slot from '../../../../components/timetableComponents/parts/Slot';
+import Text from 'components/atomComponents/Text';
 import { theme } from 'styles/theme';
 import { useTimetableContext } from '../../../../components/timetableComponents/context';
 
@@ -35,6 +36,14 @@ function PrioritySlots({ date, timeSlots }: SelectionSlotsProps) {
         const belongingEntry = selectedSlotsPerDate.find(
           ([, { startSlot, endSlot }]) => timeSlot >= startSlot && timeSlot <= endSlot,
         );
+
+        let isFirstSlot = false;
+        if (belongingEntry !== undefined) {
+          if (selectedSlots[parseInt(belongingEntry[0])].startSlot === timeSlot) {
+            isFirstSlot = true;
+          }
+        }
+
         const selectedEntryId = belongingEntry ? parseInt(belongingEntry[0]) : undefined;
         const slotId = `${date}/${timeSlot}`;
         const priority =
@@ -45,7 +54,11 @@ function PrioritySlots({ date, timeSlots }: SelectionSlotsProps) {
             key={slotId}
             slotId={slotId}
             slotStyle={getPrioritySlotStyle(selectedEntryId, priority)}
-          />
+          >
+            <Text font="body1" color={theme.colors.white}>
+              {isFirstSlot && priority !== 0 ? priority : ''}
+            </Text>
+          </Slot>
         );
       })}
     </>

From 8857bbe3fdeb4f7e3dc37d7dcf659b9e08b212ca Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 23 Jun 2024 00:55:34 +0900
Subject: [PATCH 34/62] =?UTF-8?q?feat:=20=EB=92=A4=EB=A1=9C=EA=B0=80?=
 =?UTF-8?q?=EA=B8=B0=ED=95=B4=EB=8F=84=20=EC=9A=B0=EC=84=A0=EC=88=9C?=
 =?UTF-8?q?=EC=9C=84=20=EC=84=A0=ED=83=9D=20=EB=82=B4=EC=9A=A9=EC=9D=B4=20?=
 =?UTF-8?q?=EB=82=A8=EC=95=84=EC=9E=88=EB=8F=84=EB=A1=9D=20=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/atomComponents/Button.tsx      |  5 +-
 .../timetableComponents/Timetable.tsx         |  7 +--
 src/components/timetableComponents/utils.ts   | 26 ++++----
 src/pages/selectSchedule/SelectSchedule.tsx   | 11 +++-
 .../components/SelectScheduleTable.tsx        | 62 ++++++++++++-------
 .../selectPriority/PriorityDropdown.tsx       | 38 ++++++------
 .../selectPriority/PrioritySlots.tsx          |  8 +--
 .../selectTimeSlot/SelectionSlots.tsx         | 16 ++---
 src/pages/selectSchedule/utils.ts             | 21 +++++++
 9 files changed, 117 insertions(+), 77 deletions(-)

diff --git a/src/components/atomComponents/Button.tsx b/src/components/atomComponents/Button.tsx
index 8428104a..34f99cd2 100644
--- a/src/components/atomComponents/Button.tsx
+++ b/src/components/atomComponents/Button.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-
 import { css, styled } from 'styled-components';
 
+import React from 'react';
+
 interface ButtonProps {
   children: React.ReactNode;
   typeState: string;
@@ -73,6 +73,7 @@ const buttonCSS = {
     ${buttonDefaultCSS.basicCss};
     background: ${({ theme }) => theme.colors.grey7};
     color: ${({ theme }) => theme.colors.grey5};
+    pointer-events: none;
   `,
   halfsecondaryDisabled: css`
     ${buttonDefaultCSS.basicCss};
diff --git a/src/components/timetableComponents/Timetable.tsx b/src/components/timetableComponents/Timetable.tsx
index c0f634c6..d29823e1 100644
--- a/src/components/timetableComponents/Timetable.tsx
+++ b/src/components/timetableComponents/Timetable.tsx
@@ -1,10 +1,9 @@
-import { ReactNode } from 'react';
-
-import styled from 'styled-components';
+import { ColumnStructure, DateType } from './types';
 
 import DateTitle from './parts/ColumnTitle';
+import { ReactNode } from 'react';
 import SlotTitle from './parts/SlotTitle';
-import { ColumnStructure, DateType } from './types';
+import styled from 'styled-components';
 
 interface TimetableProps {
   timeSlots: string[];
diff --git a/src/components/timetableComponents/utils.ts b/src/components/timetableComponents/utils.ts
index c27449cd..e89ccf60 100644
--- a/src/components/timetableComponents/utils.ts
+++ b/src/components/timetableComponents/utils.ts
@@ -1,18 +1,22 @@
-import { SlotType } from 'pages/selectSchedule/components/SelectScheduleTable';
+import { SlotType } from 'pages/selectSchedule/SelectSchedule';
 /**
  *
- * @desc 시작 시간(startTime)과 종료 시간(endTime) 사이에서 30분 간격으로 시간 슬롯을 생성하여 반환하는 함수입니다.
+ * @desc 문자열로 된 time('HH:MM')에 minutes을 더하는 함수
  */
+export const addMinutes = (time: string, minutes: number) => {
+  const [hour, minute] = time.split(':').map(Number);
+  const totalMinutes = hour * 60 + minute + minutes;
+  const newHour = String(Math.floor(totalMinutes / 60)).padStart(2, '0');
+  const newMinute = String(totalMinutes % 60).padStart(2, '0');
+  return `${newHour}:${newMinute}`;
+};
 
-export function getAvailableTimes(times: SlotType) {
-  function addMinutes(time: string, minutes: number) {
-    const [hour, minute] = time.split(':').map(Number);
-    const totalMinutes = hour * 60 + minute + minutes;
-    const newHour = String(Math.floor(totalMinutes / 60)).padStart(2, '0');
-    const newMinute = String(totalMinutes % 60).padStart(2, '0');
-    return `${newHour}:${newMinute}`;
-  }
+/**
+ *
+ * @desc 시작 시간(startTime)과 종료 시간(endTime) 사이에서 30분 간격으로 시간 슬롯을 생성하여 반환하는 함수
+ */
 
+export const getAvailableTimes = (times: SlotType) => {
   function getTimeSlots(startTime: string, endTime: string): string[] {
     const slots = [];
     let curTime = startTime;
@@ -23,4 +27,4 @@ export function getAvailableTimes(times: SlotType) {
     return slots;
   }
   return getTimeSlots(times.startTime, times.endTime);
-}
+};
diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx
index 4ff8c7cb..63ed0a4e 100644
--- a/src/pages/selectSchedule/SelectSchedule.tsx
+++ b/src/pages/selectSchedule/SelectSchedule.tsx
@@ -1,3 +1,4 @@
+import Button from 'components/atomComponents/Button';
 import { DateType } from 'components/timetableComponents/types';
 import Description from './components/Description';
 import Header from 'components/moleculesComponents/Header';
@@ -50,7 +51,7 @@ const placeDetail = undefined;
 /***** api 연결 후 지울 것*****/
 
 function SelectSchedule() {
-  const [step, setStep] = useState<Step>('selectPriority');
+  const [step, setStep] = useState<Step>('selectTimeSlot');
 
   interface TitlesType {
     [key: string]: {
@@ -79,7 +80,12 @@ function SelectSchedule() {
         sub={titles[step].sub}
         padding={step === 'selectTimeSlot' ? `0 0 2.6rem` : `4.4rem 0 3.2rem 0`}
       />
-      <SelectScheduleTable step={step} timeSlots={timeSlots} availableDates={availableDates} />
+      <SelectScheduleTable
+        step={step}
+        setStep={setStep}
+        timeSlots={timeSlots}
+        availableDates={availableDates}
+      />
     </SelectScheduleWrapper>
   );
 }
@@ -91,4 +97,5 @@ const SelectScheduleWrapper = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  margin-bottom: 16.4rem;
 `;
diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
index aaf55f87..c6493147 100644
--- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx
+++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
@@ -2,38 +2,29 @@ import { ColumnStructure, TimetableStructure } from 'components/timetableCompone
 import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context';
 import { Step, StepSlotsType } from '../types';
 
+import Button from 'components/atomComponents/Button';
 import PriorityDropdown from './selectPriority/PriorityDropdown';
 import PrioritySlots from './selectPriority/PrioritySlots';
 import SelectionSlots from './selectTimeSlot/SelectionSlots';
+import Text from 'components/atomComponents/Text';
 import Timetable from 'components/timetableComponents/Timetable';
+import { resetPriorities } from '../utils';
+import styled from 'styled-components';
 import { useState } from 'react';
 
 interface SelectScheduleTableProps extends TimetableStructure {
   step: Step;
+  setStep: (step: Step) => void;
 }
 
-function SelectScheduleTable({ step, timeSlots, availableDates }: SelectScheduleTableProps) {
+function SelectScheduleTable({
+  step,
+  setStep,
+  timeSlots,
+  availableDates,
+}: SelectScheduleTableProps) {
   const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
-  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({
-    0: {
-      date: '6/20/목',
-      startSlot: '15:00',
-      endSlot: '20:00',
-      priority: 0,
-    },
-    1: {
-      date: '6/20/목',
-      startSlot: '21:00',
-      endSlot: '22:30',
-      priority: 0,
-    },
-    3: {
-      date: '6/21/금',
-      startSlot: '15:00',
-      endSlot: '20:00',
-      priority: 0,
-    },
-  });
+  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({});
 
   const stepSlots: StepSlotsType = {
     selectTimeSlot: ({ date, timeSlots }: ColumnStructure) => (
@@ -44,6 +35,8 @@ function SelectScheduleTable({ step, timeSlots, availableDates }: SelectSchedule
     ),
   };
 
+  const isValidSelection = Object.keys(selectedSlots).length !== 0;
+
   return (
     <TimetableContext.Provider
       value={{
@@ -57,8 +50,35 @@ function SelectScheduleTable({ step, timeSlots, availableDates }: SelectSchedule
         {stepSlots[step]}
       </Timetable>
       {step === 'selectPriority' && <PriorityDropdown />}
+      <BtnDim>
+        <Button
+          typeState={isValidSelection ? 'primaryActive' : 'secondaryDisabled'}
+          onClick={() => {
+            setStep('selectPriority');
+          }}
+        >
+          <Text font={'button2'}>다음</Text>
+        </Button>
+      </BtnDim>
     </TimetableContext.Provider>
   );
 }
 
 export default SelectScheduleTable;
+
+const BtnDim = styled.div`
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  align-items: end;
+  justify-content: center;
+
+  margin-top: 3rem;
+  background: ${({ theme }) => theme.colors.dim_gradient};
+  padding-bottom: 2.9rem;
+
+  width: 100%;
+  height: 16.4rem;
+
+  pointer-events: none;
+`;
diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
index dc7f6b3e..b2cd1c3b 100644
--- a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
+++ b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
@@ -6,6 +6,7 @@ import {
 } from 'components/timetableComponents/context';
 
 import Text from 'components/atomComponents/Text';
+import { addMinutes } from 'components/timetableComponents/utils';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
 import { useState } from 'react';
@@ -17,9 +18,22 @@ import { useState } from 'react';
 
 function PriorityDropdown() {
   const { selectedSlots, setSelectedSlots } = useTimetableContext();
-  console.log(selectedSlots);
   const [timeSelect, setTimeSelect] = useState([false, false, false]);
-  const [input_, setInput] = useState<string[]>(['', '', '']);
+
+  let defaultInput1 = '';
+  let defaultInput2 = '';
+  let defaultInput3 = '';
+  for (const key in selectedSlots) {
+    const item = selectedSlots[key];
+    if (item.priority === 1) {
+      defaultInput1 = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`;
+    } else if (item.priority === 2) {
+      defaultInput2 = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`;
+    } else if (item.priority === 3) {
+      defaultInput3 = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`;
+    }
+  }
+  const [input_, setInput] = useState<string[]>([defaultInput1, defaultInput2, defaultInput3]);
   const handleDropdown = (i: number) => {
     if (!timeSelect[i]) {
       setTimeSelect((prevState) => {
@@ -47,24 +61,10 @@ function PriorityDropdown() {
       case 2:
         temp = 3;
         break;
-
       default:
         temp = 0;
         break;
     }
-    setSelectedSlots(
-      (prev: SlotInfoType): SlotInfoType => {
-        const updatedScheduleList = { ...prev };
-        for (const key in updatedScheduleList) {
-          if (selectedSlots[parseInt(key)].priority === temp) {
-            return { ...selectedSlots[parseInt(key)], priority: 0 };
-          }
-          break;
-        }
-        return updatedScheduleList;
-      },
-    );
-
     setSelectedSlots((prev: SelectedSlotType) => {
       const updatedSelectedSlots = Object.entries(prev).map(([key, value]) => {
         if (value.priority === temp) {
@@ -89,11 +89,11 @@ function PriorityDropdown() {
       const updatedInput = [...prev];
 
       if (i === 0) {
-        updatedInput[i] = `${item.date} ${item.startSlot}~${item.endSlot}`;
+        updatedInput[i] = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`;
       } else if (i === 1) {
-        updatedInput[i] = `${item.date} ${item.startSlot}~${item.endSlot}`;
+        updatedInput[i] = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`;
       } else if (i === 2) {
-        updatedInput[i] = `${item.date} ${item.startSlot}~${item.endSlot}`;
+        updatedInput[i] = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`;
       } else {
         updatedInput[i] = 'error';
       }
diff --git a/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx b/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx
index 0c03e53d..23187136 100644
--- a/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx
+++ b/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx
@@ -1,14 +1,10 @@
+import { ColumnStructure } from 'components/timetableComponents/types';
 import Slot from '../../../../components/timetableComponents/parts/Slot';
 import Text from 'components/atomComponents/Text';
 import { theme } from 'styles/theme';
 import { useTimetableContext } from '../../../../components/timetableComponents/context';
 
-interface SelectionSlotsProps {
-  date: string;
-  timeSlots: string[];
-}
-
-function PrioritySlots({ date, timeSlots }: SelectionSlotsProps) {
+function PrioritySlots({ date, timeSlots }: ColumnStructure) {
   const { selectedSlots } = useTimetableContext();
   const selectedSlotsPerDate = Object.entries(selectedSlots).filter(
     ([, slot]) => slot.date === date,
diff --git a/src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx b/src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx
index 3f3eb67a..b49bb142 100644
--- a/src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx
+++ b/src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx
@@ -1,15 +1,10 @@
+import { ColumnStructure } from 'components/timetableComponents/types';
+import Slot from '../../../../components/timetableComponents/parts/Slot';
 import { theme } from 'styles/theme';
-
 import useSlotSeletion from './hooks/useSlotSelection';
 import { useTimetableContext } from '../../../../components/timetableComponents/context';
-import Slot from '../../../../components/timetableComponents/parts/Slot';
 
-interface SelectionSlotsProps {
-  date: string;
-  timeSlots: string[];
-}
-
-function SelectionSlots({ date, timeSlots }: SelectionSlotsProps) {
+function SelectionSlots({ date, timeSlots }: ColumnStructure) {
   const { selectedSlots } = useTimetableContext();
   const selectedSlotsPerDate = Object.entries(selectedSlots).filter(
     ([, slot]) => slot.date === date,
@@ -23,10 +18,7 @@ function SelectionSlots({ date, timeSlots }: SelectionSlotsProps) {
 
     return `
       cursor:pointer;
-      ${
-        isStartSlot && `border: 1px dashed ${theme.colors.main5}`
-        // : `border-top: 1px solid ${theme.colors.grey7}`
-      };
+      ${isStartSlot && `border: 1px dashed ${theme.colors.main5}`};
       ${
         isSelectedSlot ? `background-color: ${theme.colors.main1}` : `background-color: transparent`
       };
diff --git a/src/pages/selectSchedule/utils.ts b/src/pages/selectSchedule/utils.ts
index b54da7cf..2ecdbfda 100644
--- a/src/pages/selectSchedule/utils.ts
+++ b/src/pages/selectSchedule/utils.ts
@@ -1,3 +1,5 @@
+import { SelectedSlotType } from 'components/timetableComponents/context';
+
 /**
  *
  * @desc 영어로 표현된 회의 진행 시간을 한글로 변환하는 함수
@@ -35,3 +37,22 @@ export const formatPlace = (place: string) => {
       return undefined;
   }
 };
+
+/**
+ *
+ * @desc 선택된 슬롯들의 우선순위를 0으로 초기화하는 함수
+ */
+export const resetPriorities = (selectedSlots: SelectedSlotType): SelectedSlotType => {
+  const updatedSlots: SelectedSlotType = {};
+
+  for (const key in selectedSlots) {
+    if (typeof selectedSlots[key] === 'object') {
+      updatedSlots[key] = {
+        ...selectedSlots[key],
+        priority: 0,
+      };
+    }
+  }
+
+  return updatedSlots;
+};

From 6157e73e68170b10e673931065d14b40eb52b2a1 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 23 Jun 2024 01:17:14 +0900
Subject: [PATCH 35/62] =?UTF-8?q?feat:=20CTA=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../legacy/selectSchedule/SelectModal.tsx     | 20 ++++---
 .../components/SelectScheduleTable.tsx        | 37 ++++---------
 .../components/selectPriority/PriorityCta.tsx | 52 +++++++++++++++++++
 .../components/selectTimeSlot/TimeSlotCta.tsx | 43 +++++++++++++++
 src/pages/selectSchedule/types.ts             |  2 +
 5 files changed, 115 insertions(+), 39 deletions(-)
 create mode 100644 src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx
 create mode 100644 src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx

diff --git a/src/pages/legacy/selectSchedule/SelectModal.tsx b/src/pages/legacy/selectSchedule/SelectModal.tsx
index b8320c87..3e7a99d0 100644
--- a/src/pages/legacy/selectSchedule/SelectModal.tsx
+++ b/src/pages/legacy/selectSchedule/SelectModal.tsx
@@ -1,20 +1,18 @@
-import React, { Dispatch, SetStateAction, useEffect } from 'react';
-
+import { hostAvailableApi, userAvailableApi } from 'utils/apis/createHostAvailableSchedule';
 import { scheduleAtom, userNameAtom } from 'atoms/atom';
-import { isAxiosError } from 'axios';
-import Text from 'components/atomComponents/Text';
-import { ExitIc } from 'components/Icon/icon';
+import { transformHostScheduleType, transformUserScheduleType } from './utils/changeApiReq';
 import { useNavigate, useParams } from 'react-router';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import styled from 'styled-components/macro';
-import { theme } from 'styles/theme';
-import { hostAvailableApi, userAvailableApi } from 'utils/apis/createHostAvailableSchedule';
 
+import { ExitIc } from 'components/Icon/icon';
 import { ScheduleStates } from './types/Schedule';
-import { transformHostScheduleType, transformUserScheduleType } from './utils/changeApiReq';
+import Text from 'components/atomComponents/Text';
+import { isAxiosError } from 'axios';
+import styled from 'styled-components/macro';
+import { theme } from 'styles/theme';
 
 interface ModalProps {
-  setShowModal: Dispatch<SetStateAction<boolean>>;
+  setShowModal: (isModalOpen: boolean) => void;
 }
 
 function SelectModal({ setShowModal }: ModalProps) {
@@ -117,7 +115,7 @@ export default SelectModal;
 
 const ReturnModalWrpper = styled.div`
   display: flex;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   flex-direction: column;
diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
index c6493147..33a759b1 100644
--- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx
+++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
@@ -1,12 +1,14 @@
 import { ColumnStructure, TimetableStructure } from 'components/timetableComponents/types';
 import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context';
-import { Step, StepSlotsType } from '../types';
+import { Step, StepBtnsType, StepSlotsType } from '../types';
 
 import Button from 'components/atomComponents/Button';
+import PriorityCta from './selectPriority/PriorityCta';
 import PriorityDropdown from './selectPriority/PriorityDropdown';
 import PrioritySlots from './selectPriority/PrioritySlots';
 import SelectionSlots from './selectTimeSlot/SelectionSlots';
 import Text from 'components/atomComponents/Text';
+import TimeSlotCta from './selectTimeSlot/TimeSlotCta';
 import Timetable from 'components/timetableComponents/Timetable';
 import { resetPriorities } from '../utils';
 import styled from 'styled-components';
@@ -37,6 +39,11 @@ function SelectScheduleTable({
 
   const isValidSelection = Object.keys(selectedSlots).length !== 0;
 
+  const stepBtns: StepBtnsType = {
+    selectTimeSlot: <TimeSlotCta isValidSelection={isValidSelection} setStep={setStep} />,
+    selectPriority: <PriorityCta />,
+  };
+
   return (
     <TimetableContext.Provider
       value={{
@@ -50,35 +57,9 @@ function SelectScheduleTable({
         {stepSlots[step]}
       </Timetable>
       {step === 'selectPriority' && <PriorityDropdown />}
-      <BtnDim>
-        <Button
-          typeState={isValidSelection ? 'primaryActive' : 'secondaryDisabled'}
-          onClick={() => {
-            setStep('selectPriority');
-          }}
-        >
-          <Text font={'button2'}>다음</Text>
-        </Button>
-      </BtnDim>
+      {stepBtns[step]}
     </TimetableContext.Provider>
   );
 }
 
 export default SelectScheduleTable;
-
-const BtnDim = styled.div`
-  display: flex;
-  position: fixed;
-  bottom: 0;
-  align-items: end;
-  justify-content: center;
-
-  margin-top: 3rem;
-  background: ${({ theme }) => theme.colors.dim_gradient};
-  padding-bottom: 2.9rem;
-
-  width: 100%;
-  height: 16.4rem;
-
-  pointer-events: none;
-`;
diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx
new file mode 100644
index 00000000..83c3e8f9
--- /dev/null
+++ b/src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx
@@ -0,0 +1,52 @@
+import Button from 'components/atomComponents/Button';
+import SelectModal from 'pages/legacy/selectSchedule/SelectModal';
+import Text from 'components/atomComponents/Text';
+import styled from 'styled-components';
+import { useState } from 'react';
+
+function PriorityCta() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  return (
+    <>
+      <BtnDim>
+        <Button
+          typeState={'halfTertiaryActive'}
+          onClick={() => {
+            setIsModalOpen(true);
+          }}
+        >
+          <Text font={'button2'}>상관없음</Text>
+        </Button>
+        <Button
+          typeState={'halfPrimaryActive'}
+          onClick={() => {
+            setIsModalOpen(true);
+          }}
+        >
+          <Text font={'button2'}>확인</Text>
+        </Button>
+      </BtnDim>
+      {isModalOpen && <SelectModal setShowModal={setIsModalOpen} />}
+    </>
+  );
+}
+
+export default PriorityCta;
+
+const BtnDim = styled.div`
+  display: flex;
+  position: fixed;
+  gap: 1rem;
+  bottom: 0;
+  align-items: end;
+  justify-content: center;
+
+  margin-top: 3rem;
+  background: ${({ theme }) => theme.colors.dim_gradient};
+  padding-bottom: 2.9rem;
+
+  width: 100%;
+  height: 16.4rem;
+
+  pointer-events: none;
+`;
diff --git a/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx b/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx
new file mode 100644
index 00000000..375386b0
--- /dev/null
+++ b/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx
@@ -0,0 +1,43 @@
+import Button from 'components/atomComponents/Button';
+import { Step } from 'pages/selectSchedule/types';
+import Text from 'components/atomComponents/Text';
+import styled from 'styled-components';
+
+interface TimeSlotCtaProps {
+  isValidSelection: boolean;
+  setStep: (step: Step) => void;
+}
+
+function TimeSlotCta({ isValidSelection, setStep }: TimeSlotCtaProps) {
+  return (
+    <BtnDim>
+      <Button
+        typeState={isValidSelection ? 'primaryActive' : 'secondaryDisabled'}
+        onClick={() => {
+          setStep('selectPriority');
+        }}
+      >
+        <Text font={'button2'}>다음</Text>
+      </Button>
+    </BtnDim>
+  );
+}
+
+export default TimeSlotCta;
+
+const BtnDim = styled.div`
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  align-items: end;
+  justify-content: center;
+
+  margin-top: 3rem;
+  background: ${({ theme }) => theme.colors.dim_gradient};
+  padding-bottom: 2.9rem;
+
+  width: 100%;
+  height: 16.4rem;
+
+  pointer-events: none;
+`;
diff --git a/src/pages/selectSchedule/types.ts b/src/pages/selectSchedule/types.ts
index de4c32c8..7886a814 100644
--- a/src/pages/selectSchedule/types.ts
+++ b/src/pages/selectSchedule/types.ts
@@ -1,4 +1,6 @@
 import { ColumnStructure } from 'components/timetableComponents/types';
+import { ReactNode } from 'react';
 
 export type Step = 'selectTimeSlot' | 'selectPriority';
 export type StepSlotsType = { [key in Step]: (props: ColumnStructure) => ReactNode };
+export type StepBtnsType = { [key in Step]: ReactNode };

From c3fb34216391d292d5a69c33bdc750b614f1568c Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 23 Jun 2024 01:27:24 +0900
Subject: [PATCH 36/62] =?UTF-8?q?fix:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4=20=EB=82=B4=20=EC=9E=98=EB=AA=BB=EB=90=9C=20endSlot?=
 =?UTF-8?q?=EA=B3=BC=20=EB=82=A0=EC=A7=9C=20=ED=8F=AC=EB=A7=A4=ED=8C=85=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

---
 .../selectPriority/PriorityDropdown.tsx       | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
index b2cd1c3b..d8c2919d 100644
--- a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
+++ b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
@@ -20,17 +20,24 @@ function PriorityDropdown() {
   const { selectedSlots, setSelectedSlots } = useTimetableContext();
   const [timeSelect, setTimeSelect] = useState([false, false, false]);
 
+  const formatDate = (date: string) => {
+    const [month, day, dayOfWeek] = date.split('/');
+    return `${month}/${day}(${dayOfWeek})`;
+  };
+
   let defaultInput1 = '';
   let defaultInput2 = '';
   let defaultInput3 = '';
   for (const key in selectedSlots) {
     const item = selectedSlots[key];
+    const date = formatDate(item.date);
+    const endSlot = addMinutes(item.endSlot, 30);
     if (item.priority === 1) {
-      defaultInput1 = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`;
+      defaultInput1 = `${date} ${item.startSlot}~${endSlot}`;
     } else if (item.priority === 2) {
-      defaultInput2 = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`;
+      defaultInput2 = `${date} ${item.startSlot}~${endSlot}`;
     } else if (item.priority === 3) {
-      defaultInput3 = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`;
+      defaultInput3 = `${date} ${item.startSlot}~${endSlot}`;
     }
   }
   const [input_, setInput] = useState<string[]>([defaultInput1, defaultInput2, defaultInput3]);
@@ -87,13 +94,14 @@ function PriorityDropdown() {
 
     setInput((prev) => {
       const updatedInput = [...prev];
-
+      const endSlot = addMinutes(item.endSlot, 30);
+      const date = formatDate(item.date);
       if (i === 0) {
-        updatedInput[i] = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`;
+        updatedInput[i] = `${date} ${item.startSlot}~${endSlot}`;
       } else if (i === 1) {
-        updatedInput[i] = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`;
+        updatedInput[i] = `${date} ${item.startSlot}~${endSlot}`;
       } else if (i === 2) {
-        updatedInput[i] = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`;
+        updatedInput[i] = `${date} ${item.startSlot}~${endSlot}`;
       } else {
         updatedInput[i] = 'error';
       }
@@ -150,7 +158,10 @@ function PriorityDropdown() {
                       !value.priority && (
                         <DropDownItem key={key} onClick={() => handlePriority(i, value, key)}>
                           <Text font={'button1'} color={theme.colors.white}>
-                            {value.date} {value.startSlot}~{value.endSlot}
+                            {formatDate(value.date)} {value.startSlot}~{addMinutes(
+                              value.endSlot,
+                              30,
+                            )}
                           </Text>
                         </DropDownItem>
                       ),

From c7f344737c19f1b3217742677c277c08538917a3 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 23 Jun 2024 01:34:12 +0900
Subject: [PATCH 37/62] =?UTF-8?q?fix:=20=EC=9A=B0=EC=84=A0=EC=88=9C?=
 =?UTF-8?q?=EC=9C=84=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=EC=9D=B4=20=EC=95=88=EB=90=98=EB=8A=94=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/selectPriority/PriorityDropdown.tsx              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
index d8c2919d..b7dd6a63 100644
--- a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
+++ b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
@@ -75,7 +75,7 @@ function PriorityDropdown() {
     setSelectedSlots((prev: SelectedSlotType) => {
       const updatedSelectedSlots = Object.entries(prev).map(([key, value]) => {
         if (value.priority === temp) {
-          return { ...value, prority: 0 };
+          return { ...value, priority: 0 };
         }
         return value;
       });

From b6feb98ed282ce3762e3dff0151ba4ae9928896f Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 23 Jun 2024 01:58:55 +0900
Subject: [PATCH 38/62] =?UTF-8?q?chore:=20=EA=B8=B0=EC=A1=B4=20api=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=EB=A5=BC=20legacy=20=ED=8F=B4=EB=8D=94?=
 =?UTF-8?q?=EB=A1=9C=20=EC=98=AE=EA=B9=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/OverallSchedule/OverallSchedule.tsx | 18 +++++++---------
 .../useFunnel/SetAdditionalInfo.tsx           | 10 ++++-----
 .../legacy/selectSchedule/SelectModal.tsx     |  2 +-
 .../selectSchedule/SelectPriorityPage.tsx     | 17 +++++++--------
 .../selectSchedule/SelectSchedulePage.tsx     | 21 +++++++++----------
 src/utils/apis/bestMeetTimeApi.ts             | 11 ----------
 .../{ => legacy}/availbleScheduleOptionApi.ts |  3 +--
 .../createHostAvailableSchedule.ts            |  6 ++----
 .../apis/{ => legacy}/createMeetingApi.ts     |  2 +-
 src/utils/apis/{ => legacy}/cueCardAPI.ts     |  2 +-
 .../apis/{ => legacy}/overallScheduleApi.ts   |  4 ++--
 11 files changed, 39 insertions(+), 57 deletions(-)
 delete mode 100644 src/utils/apis/bestMeetTimeApi.ts
 rename src/utils/apis/{ => legacy}/availbleScheduleOptionApi.ts (89%)
 rename src/utils/apis/{ => legacy}/createHostAvailableSchedule.ts (88%)
 rename src/utils/apis/{ => legacy}/createMeetingApi.ts (88%)
 rename src/utils/apis/{ => legacy}/cueCardAPI.ts (75%)
 rename src/utils/apis/{ => legacy}/overallScheduleApi.ts (92%)

diff --git a/src/pages/OverallSchedule/OverallSchedule.tsx b/src/pages/OverallSchedule/OverallSchedule.tsx
index f29f495f..e19b2805 100644
--- a/src/pages/OverallSchedule/OverallSchedule.tsx
+++ b/src/pages/OverallSchedule/OverallSchedule.tsx
@@ -1,19 +1,17 @@
 import React, { useEffect, useState } from 'react';
-
 import { availableDatesAtom, preferTimesAtom, timeSlotUserNameAtom } from 'atoms/atom';
-import Text from 'components/atomComponents/Text';
-import LoadingPage from 'pages/errorLoading/LoadingPage';
-import { useParams } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { OverallScheduleData } from 'src/types/overallScheduleType';
-import { styled } from 'styled-components';
-import { theme } from 'styles/theme';
-import { availableScheduleOptionApi } from 'utils/apis/availbleScheduleOptionApi';
-import { overallScheduleApi } from 'utils/apis/overallScheduleApi';
 
+import LoadingPage from 'pages/errorLoading/LoadingPage';
+import { OverallScheduleData } from 'src/types/overallScheduleType';
+import Text from 'components/atomComponents/Text';
 import TimeTable from './components/TimeTable';
+import { availableScheduleOptionApi } from 'utils/apis/legacy/availbleScheduleOptionApi';
 import { getFormattedAvailableDateTimes } from './utils/getFormattedAvailableDateTimes';
-
+import { overallScheduleApi } from 'utils/apis/legacy/overallScheduleApi';
+import { styled } from 'styled-components';
+import { theme } from 'styles/theme';
+import { useParams } from 'react-router-dom';
 
 const OverallSchedule = () => {
   const { meetingId } = useParams();
diff --git a/src/pages/createMeeting/components/useFunnel/SetAdditionalInfo.tsx b/src/pages/createMeeting/components/useFunnel/SetAdditionalInfo.tsx
index fc86d9e1..79179077 100644
--- a/src/pages/createMeeting/components/useFunnel/SetAdditionalInfo.tsx
+++ b/src/pages/createMeeting/components/useFunnel/SetAdditionalInfo.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
+import { FunnelProps, MeetingInfo } from 'pages/createMeeting/types/useFunnelInterface';
 
-import { isAxiosError } from 'axios';
 import Button from 'components/atomComponents/Button';
+import React from 'react';
 import Text from 'components/atomComponents/Text';
 import TextAreaInput from 'components/atomComponents/TextAreaInput';
-import { MeetingInfo, FunnelProps } from 'pages/createMeeting/types/useFunnelInterface';
-import { useNavigate } from 'react-router-dom';
+import { createMeetingApi } from 'utils/apis/legacy/createMeetingApi';
+import { isAxiosError } from 'axios';
 import styled from 'styled-components/macro';
-import { createMeetingApi } from 'utils/apis/createMeetingApi';
+import { useNavigate } from 'react-router-dom';
 
 function SetAdditionalInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) {
   const navigate = useNavigate();
diff --git a/src/pages/legacy/selectSchedule/SelectModal.tsx b/src/pages/legacy/selectSchedule/SelectModal.tsx
index 3e7a99d0..756141bb 100644
--- a/src/pages/legacy/selectSchedule/SelectModal.tsx
+++ b/src/pages/legacy/selectSchedule/SelectModal.tsx
@@ -1,4 +1,4 @@
-import { hostAvailableApi, userAvailableApi } from 'utils/apis/createHostAvailableSchedule';
+import { hostAvailableApi, userAvailableApi } from 'utils/apis/legacy/createHostAvailableSchedule';
 import { scheduleAtom, userNameAtom } from 'atoms/atom';
 import { transformHostScheduleType, transformUserScheduleType } from './utils/changeApiReq';
 import { useNavigate, useParams } from 'react-router';
diff --git a/src/pages/legacy/selectSchedule/SelectPriorityPage.tsx b/src/pages/legacy/selectSchedule/SelectPriorityPage.tsx
index 8a4f0358..fbf5e6ed 100644
--- a/src/pages/legacy/selectSchedule/SelectPriorityPage.tsx
+++ b/src/pages/legacy/selectSchedule/SelectPriorityPage.tsx
@@ -1,19 +1,18 @@
 import React, { useEffect, useState } from 'react';
-
 import { availableDatesAtom, preferTimesAtom, scheduleAtom } from 'atoms/atom';
-import axios from 'axios';
+import { useNavigate, useParams } from 'react-router-dom';
+
 import Button from 'components/atomComponents/Button';
-import Text from 'components/atomComponents/Text';
+import Header from 'components/moleculesComponents/Header';
 import PriorityDropdown from 'components/legacy/scheduleComponents/components/PriorityDropdown';
+import SelectModal from './SelectModal';
+import Text from 'components/atomComponents/Text';
 import TimeTable from 'components/legacy/scheduleComponents/components/TimeTable';
-import Header from 'components/moleculesComponents/Header';
-import { useNavigate, useParams } from 'react-router-dom';
-import { useRecoilState } from 'recoil';
+import { availableScheduleOptionApi } from 'utils/apis/legacy/availbleScheduleOptionApi';
+import axios from 'axios';
 import styled from 'styled-components';
 import { theme } from 'styles/theme';
-import { availableScheduleOptionApi } from 'utils/apis/availbleScheduleOptionApi';
-
-import SelectModal from './SelectModal';
+import { useRecoilState } from 'recoil';
 
 const SelectSchedulePriority = () => {
   const [availableDates, setAvailableDates] = useRecoilState(availableDatesAtom);
diff --git a/src/pages/legacy/selectSchedule/SelectSchedulePage.tsx b/src/pages/legacy/selectSchedule/SelectSchedulePage.tsx
index 5084ac55..93648246 100644
--- a/src/pages/legacy/selectSchedule/SelectSchedulePage.tsx
+++ b/src/pages/legacy/selectSchedule/SelectSchedulePage.tsx
@@ -1,21 +1,20 @@
 import React, { useEffect, useRef, useState } from 'react';
-
 import { availableDatesAtom, preferTimesAtom, scheduleAtom } from 'atoms/atom';
-import axios from 'axios';
+import { useNavigate, useParams } from 'react-router-dom';
+
 import Button from 'components/atomComponents/Button';
-import Text from 'components/atomComponents/Text';
-import { PlusIc } from 'components/Icon/icon';
-import TimeTable from 'components/legacy/scheduleComponents/components/TimeTable';
 import Header from 'components/moleculesComponents/Header';
-import { useNavigate, useParams } from 'react-router-dom';
-import { useRecoilState } from 'recoil';
 import { MeetingDetail } from 'src/types/availbleScheduleType';
+import { PlusIc } from 'components/Icon/icon';
+import { ScheduleStates } from './types/Schedule';
+import SelectSchedule from './components/SelectSchedule';
+import Text from 'components/atomComponents/Text';
+import TimeTable from 'components/legacy/scheduleComponents/components/TimeTable';
+import { availableScheduleOptionApi } from 'utils/apis/legacy/availbleScheduleOptionApi';
+import axios from 'axios';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
-import { availableScheduleOptionApi } from 'utils/apis/availbleScheduleOptionApi';
-
-import SelectSchedule from './components/SelectSchedule';
-import { ScheduleStates } from './types/Schedule';
+import { useRecoilState } from 'recoil';
 
 function SelectSchedulePage() {
   // 가능시간 선택지 - 날짜
diff --git a/src/utils/apis/bestMeetTimeApi.ts b/src/utils/apis/bestMeetTimeApi.ts
deleted file mode 100644
index a6ea58c7..00000000
--- a/src/utils/apis/bestMeetTimeApi.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// import { BestMeetTimeResponse, BestMeetTimeRequest } from 'src/types/bestMeetTimeType';
-
-// import { client } from './axios';
-
-// export const BestMeetTimeApi = (BestMeetTimeRequest: BestMeetTimeRequest) => {
-//   return client.post<BestMeetTimeResponse>(`/meeting/${meetingId}/confirm`, BestMeetTimeRequest, {
-//     headers: {
-//       Authorization: `[Bearer] ${token}`,
-//     },
-//   });
-// };
diff --git a/src/utils/apis/availbleScheduleOptionApi.ts b/src/utils/apis/legacy/availbleScheduleOptionApi.ts
similarity index 89%
rename from src/utils/apis/availbleScheduleOptionApi.ts
rename to src/utils/apis/legacy/availbleScheduleOptionApi.ts
index 2f424339..b10400da 100644
--- a/src/utils/apis/availbleScheduleOptionApi.ts
+++ b/src/utils/apis/legacy/availbleScheduleOptionApi.ts
@@ -1,6 +1,5 @@
 import { AvailableScheduleOptionResponse } from 'src/types/availbleScheduleType';
-
-import { client } from './axios';
+import { client } from '../axios';
 
 /** 가능 시간 입력 선택지 조회 api */
 export const availableScheduleOptionApi = (meetingId?: string) => {
diff --git a/src/utils/apis/createHostAvailableSchedule.ts b/src/utils/apis/legacy/createHostAvailableSchedule.ts
similarity index 88%
rename from src/utils/apis/createHostAvailableSchedule.ts
rename to src/utils/apis/legacy/createHostAvailableSchedule.ts
index c5915f09..0cc98699 100644
--- a/src/utils/apis/createHostAvailableSchedule.ts
+++ b/src/utils/apis/legacy/createHostAvailableSchedule.ts
@@ -1,12 +1,10 @@
-import { AxiosResponse } from 'axios';
 import {
   HostAvailableSchduleRequestType,
   HostAvailableScheduleResponseType,
-  UserAvailableScheduleResponseType,
   UserAvailableScheduleRequestType,
+  UserAvailableScheduleResponseType,
 } from 'src/types/createAvailableSchduleType';
-
-import { authClient, client } from './axios';
+import { authClient, client } from '../axios';
 
 export const hostAvailableApi = (
   meetingId: string,
diff --git a/src/utils/apis/createMeetingApi.ts b/src/utils/apis/legacy/createMeetingApi.ts
similarity index 88%
rename from src/utils/apis/createMeetingApi.ts
rename to src/utils/apis/legacy/createMeetingApi.ts
index ce62c47d..54f43623 100644
--- a/src/utils/apis/createMeetingApi.ts
+++ b/src/utils/apis/legacy/createMeetingApi.ts
@@ -1,6 +1,6 @@
 import { CreateMeetingRequest, CreateMeetingResponse } from 'src/types/createMeetingType';
 
-import { client } from './axios';
+import { client } from '../axios';
 
 export const createMeetingApi = (CreateMeetingRequest: CreateMeetingRequest) => {
   return client.post<CreateMeetingResponse>(`/meeting`, CreateMeetingRequest);
diff --git a/src/utils/apis/cueCardAPI.ts b/src/utils/apis/legacy/cueCardAPI.ts
similarity index 75%
rename from src/utils/apis/cueCardAPI.ts
rename to src/utils/apis/legacy/cueCardAPI.ts
index f5f1d85f..fd7517ab 100644
--- a/src/utils/apis/cueCardAPI.ts
+++ b/src/utils/apis/legacy/cueCardAPI.ts
@@ -1,4 +1,4 @@
-import { client } from './axios';
+import { client } from '../axios';
 
 export const cueCardApi = (meetingId: string) => {
   return client.get(`/meeting/${meetingId}/card`);
diff --git a/src/utils/apis/overallScheduleApi.ts b/src/utils/apis/legacy/overallScheduleApi.ts
similarity index 92%
rename from src/utils/apis/overallScheduleApi.ts
rename to src/utils/apis/legacy/overallScheduleApi.ts
index 9cff94bd..50b40c6d 100644
--- a/src/utils/apis/overallScheduleApi.ts
+++ b/src/utils/apis/legacy/overallScheduleApi.ts
@@ -1,8 +1,8 @@
+import { authClient, client } from '../axios';
+
 import { AvailableScheduleOptionResponse } from 'src/types/availbleScheduleType';
 import { OverallScheduleResponse } from 'src/types/overallScheduleType';
 
-import { authClient, client } from './axios';
-
 /** 가능 시간 입력 선택지 조회 api */
 export const availbleScheduleOptionApi = (meetingId?: string) => {
   return client.get<AvailableScheduleOptionResponse>(`/meeting/${meetingId}/schedule`);

From b099be00647f0653cb63d9c13f1f5746fa955af3 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 23 Jun 2024 02:39:56 +0900
Subject: [PATCH 39/62] =?UTF-8?q?feat:=20react-query=20=EC=84=9C=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                   |  2 ++
 src/App.tsx                    | 36 ++++++++++++++++++++--------------
 src/utils/apis/getTimetable.ts |  0
 yarn.lock                      | 24 +++++++++++++++++++++++
 4 files changed, 47 insertions(+), 15 deletions(-)
 create mode 100644 src/utils/apis/getTimetable.ts

diff --git a/package.json b/package.json
index 1a45c503..5826cc24 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,8 @@
     "lint:css": "stylelint './src/**/*.{ts,tsx}'"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.45.1",
+    "@tanstack/react-query-devtools": "^5.45.1",
     "@types/axios": "^0.14.0",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "axios": "^1.4.0",
diff --git a/src/App.tsx b/src/App.tsx
index a5a64135..b279d2c2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,18 +1,19 @@
-import { useEffect } from 'react';
-
-import { ThemeProvider } from 'styled-components';
-import styled from 'styled-components/macro';
-import ToastContainerBox from 'utils/toast/ToastContainer';
-
-import Router from './Router';
-import GlobalStyle from './styles/globalStyles';
-import { theme } from './styles/theme';
-
 import './App.css';
 /**카카오톡 인앱브라우저 종료후 크롬 및 사파리로 오픈하는 utils file */
 import './utils/changeBrowser';
 import 'react-toastify/dist/ReactToastify.css';
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import GlobalStyle from './styles/globalStyles';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import Router from './Router';
+import { ThemeProvider } from 'styled-components';
+import ToastContainerBox from 'utils/toast/ToastContainer';
+import styled from 'styled-components/macro';
+import { theme } from './styles/theme';
+import { useEffect } from 'react';
+
 const MobileWrapper = styled.div`
   display: flex;
 
@@ -47,14 +48,19 @@ function App() {
       window.removeEventListener('resize', setScreenSize);
     };
   }, []);
+
+  const queryClient = new QueryClient();
   return (
     <>
       <ThemeProvider theme={theme}>
-        <GlobalStyle />
-        <MobileWrapper>
-          <Router />
-          <ToastContainerBox />
-        </MobileWrapper>
+        <QueryClientProvider client={queryClient}>
+          <GlobalStyle />
+          <MobileWrapper>
+            <Router />
+            <ToastContainerBox />
+          </MobileWrapper>
+          <ReactQueryDevtools initialIsOpen={false} />
+        </QueryClientProvider>
       </ThemeProvider>
     </>
   );
diff --git a/src/utils/apis/getTimetable.ts b/src/utils/apis/getTimetable.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/yarn.lock b/yarn.lock
index 07569bdb..35168db7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1536,6 +1536,30 @@
     "@svgr/hast-util-to-babel-ast" "^7.0.0"
     svg-parser "^2.0.4"
 
+"@tanstack/query-core@5.45.0":
+  version "5.45.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.45.0.tgz#47a662d311c2588867341238960ec21dc7f0714e"
+  integrity sha512-RVfIZQmFUTdjhSAAblvueimfngYyfN6HlwaJUPK71PKd7yi43Vs1S/rdimmZedPWX/WGppcq/U1HOj7O7FwYxw==
+
+"@tanstack/query-devtools@5.37.1":
+  version "5.37.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.37.1.tgz#8dcfa1488b4f2e353be7eede6691b0ad9197183b"
+  integrity sha512-XcG4IIHIv0YQKrexTqo2zogQWR1Sz672tX2KsfE9kzB+9zhx44vRKH5si4WDILE1PIWQpStFs/NnrDQrBAUQpg==
+
+"@tanstack/react-query-devtools@^5.45.1":
+  version "5.45.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.45.1.tgz#bea7ba0ffd509f0930237c2df7feba9209f76aa6"
+  integrity sha512-4mrbk1g5jqlqh0pifZNsKzy7FtgeqgwzMICL4d6IJGayrrcrKq9K4N/OzRNbgRWrTn6YTY63qcAcKo+NJU2QMw==
+  dependencies:
+    "@tanstack/query-devtools" "5.37.1"
+
+"@tanstack/react-query@^5.45.1":
+  version "5.45.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.45.1.tgz#a0ac6bb89b4a2c2b0251f6647a0a370d86f05347"
+  integrity sha512-mYYfJujKg2kxmkRRjA6nn4YKG3ITsKuH22f1kteJ5IuVQqgKUgbaSQfYwVP0gBS05mhwxO03HVpD0t7BMN7WOA==
+  dependencies:
+    "@tanstack/query-core" "5.45.0"
+
 "@types/axios@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@types/axios/-/axios-0.14.0.tgz#ec2300fbe7d7dddd7eb9d3abf87999964cafce46"

From cccfa14a029df4026e6bc0ed387f88e8b0303276 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 23 Jun 2024 03:10:11 +0900
Subject: [PATCH 40/62] =?UTF-8?q?feat:=20useGetTimetable=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/apis/getTimetable.ts    |  0
 src/utils/apis/useGetTimetable.ts | 25 +++++++++++++++++++++++++
 2 files changed, 25 insertions(+)
 delete mode 100644 src/utils/apis/getTimetable.ts
 create mode 100644 src/utils/apis/useGetTimetable.ts

diff --git a/src/utils/apis/getTimetable.ts b/src/utils/apis/getTimetable.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/utils/apis/useGetTimetable.ts b/src/utils/apis/useGetTimetable.ts
new file mode 100644
index 00000000..b75db932
--- /dev/null
+++ b/src/utils/apis/useGetTimetable.ts
@@ -0,0 +1,25 @@
+import { client } from './axios';
+import { useQuery } from '@tanstack/react-query';
+
+const getTimetable = async (meetingId: string) => {
+  try {
+    const res = await client.get(`/meeting/${meetingId}/schedule`);
+    return res.data;
+  } catch (err) {
+    throw new Error(err);
+  }
+};
+
+export const useGetTimetable = (meetingId: string) => {
+  const { data, isLoading } = useQuery({
+    queryKey: ['getTimetable', meetingId],
+    queryFn: () => getTimetable(meetingId),
+  });
+  const duration = data?.duration;
+  const place = data?.place;
+  const placeDetail = data?.placeDetail;
+  const availableDates = data?.availableDates;
+  const preferTimes = data?.preferTimes;
+
+  return {duration, place, placeDetail, availableDates, preferTimes, isLoading}
+};

From 3a5c288ea883fd253a65e05d462e624daa02e4f2 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 23 Jun 2024 04:11:17 +0900
Subject: [PATCH 41/62] =?UTF-8?q?feat:=20useGetTimetable=20=EC=97=B0?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Router.tsx                                |  9 +-
 src/components/timetableComponents/types.ts   |  5 ++
 src/components/timetableComponents/utils.ts   | 19 ++--
 .../components/MemberComponent.tsx            | 12 +--
 .../components/NoAvailableTimeModal.tsx       |  4 +-
 src/pages/createMeeting/CreateMeeting.tsx     |  6 ++
 src/pages/selectSchedule/SelectSchedule.tsx   | 90 +++++++------------
 src/utils/apis/useGetTimetable.ts             | 41 ++++++---
 8 files changed, 92 insertions(+), 94 deletions(-)

diff --git a/src/Router.tsx b/src/Router.tsx
index 2c3b3a27..93b95642 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -1,15 +1,16 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
 import ChooseBestTime from 'pages/bestMeetTime/ChooseBestTime';
 import CreateMeeting from 'pages/createMeeting/CreateMeeting';
 import CueCard from 'pages/cueCard/CueCard';
 import ErrorPage404 from 'pages/errorLoading/ErrorPage404';
 import LoadingPage from 'pages/errorLoading/LoadingPage';
-import SelectSchedulePriority from 'pages/legacy/selectSchedule/SelectPriorityPage';
-import SelectPage from 'pages/legacy/selectSchedule/SelectSchedulePage';
 import LoginEntrance from 'pages/loginEntrance/LoginEntrance';
 import OnBoarding from 'pages/onBoarding/OnBoarding';
+import SelectPage from 'pages/legacy/selectSchedule/SelectSchedulePage';
 import SelectSchedule from 'pages/selectSchedule/SelectSchedule';
+import SelectSchedulePriority from 'pages/legacy/selectSchedule/SelectPriorityPage';
 import SteppingLayout from 'pages/steppingStone/SteppingLayout';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 const Router = () => {
   return (
@@ -18,8 +19,6 @@ const Router = () => {
         <Route path="/" element={<OnBoarding />} />
         <Route path="/meet/create" element={<CreateMeeting />} />
         <Route path="/meet/complete" element={<SteppingLayout steppingType={'meetComplete'} />} />
-        {/* <Route path="/:auth/schedule/:meetingId" element={<SelectPage />} />
-        <Route path="/:auth/priority/:meetingId" element={<SelectSchedulePriority />} /> */}
         <Route path="/:auth/select/:meetingId" element={<SelectSchedule />} />
         <Route
           path="/host/schedule-complete/:meetingId"
diff --git a/src/components/timetableComponents/types.ts b/src/components/timetableComponents/types.ts
index a3242267..bf73e819 100644
--- a/src/components/timetableComponents/types.ts
+++ b/src/components/timetableComponents/types.ts
@@ -15,3 +15,8 @@ export interface DateType {
   day: string | undefined;
   dayOfWeek: string | undefined;
 }
+
+export interface SlotType {
+  startTime: string;
+  endTime: string;
+}
diff --git a/src/components/timetableComponents/utils.ts b/src/components/timetableComponents/utils.ts
index e89ccf60..d3f6d7bb 100644
--- a/src/components/timetableComponents/utils.ts
+++ b/src/components/timetableComponents/utils.ts
@@ -1,4 +1,4 @@
-import { SlotType } from 'pages/selectSchedule/SelectSchedule';
+import { SlotType } from './types';
 /**
  *
  * @desc 문자열로 된 time('HH:MM')에 minutes을 더하는 함수
@@ -16,15 +16,12 @@ export const addMinutes = (time: string, minutes: number) => {
  * @desc 시작 시간(startTime)과 종료 시간(endTime) 사이에서 30분 간격으로 시간 슬롯을 생성하여 반환하는 함수
  */
 
-export const getAvailableTimes = (times: SlotType) => {
-  function getTimeSlots(startTime: string, endTime: string): string[] {
-    const slots = [];
-    let curTime = startTime;
-    while (curTime < endTime) {
-      slots.push(curTime);
-      curTime = addMinutes(curTime, 30);
-    }
-    return slots;
+export const getAvailableTimes = ({ startTime, endTime }: SlotType) => {
+  const slots = [];
+  let curTime = startTime;
+  while (curTime < endTime) {
+    slots.push(curTime);
+    curTime = addMinutes(curTime, 30);
   }
-  return getTimeSlots(times.startTime, times.endTime);
+  return slots;
 };
diff --git a/src/pages/LoginEntrance/components/MemberComponent.tsx b/src/pages/LoginEntrance/components/MemberComponent.tsx
index b1a30430..a87ea7ac 100644
--- a/src/pages/LoginEntrance/components/MemberComponent.tsx
+++ b/src/pages/LoginEntrance/components/MemberComponent.tsx
@@ -1,16 +1,16 @@
 import React, { Dispatch, SetStateAction } from 'react';
 
-import { userNameAtom } from 'atoms/atom';
 import Button from 'components/atomComponents/Button';
+import Header from 'components/moleculesComponents/Header';
 import Text from 'components/atomComponents/Text';
 import TextInput from 'components/atomComponents/TextInput';
-import Header from 'components/moleculesComponents/Header';
 import TitleComponent from 'components/moleculesComponents/TitleComponents';
-import { useParams } from 'react-router';
-import { useNavigate } from 'react-router-dom';
-import { useRecoilState } from 'recoil';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
+import { useNavigate } from 'react-router-dom';
+import { useParams } from 'react-router';
+import { useRecoilState } from 'recoil';
+import { userNameAtom } from 'atoms/atom';
 
 interface HostInfoProps {
   name: string;
@@ -38,7 +38,7 @@ function MemberComponent({ hostInfo, setHostInfo }: HostProps) {
 
   const loginMember = () => {
     setUserName(hostInfo.name);
-    navigate(`/member/schedule/${meetingId}`);
+    navigate(`/member/select/${meetingId}`);
   };
 
   return (
diff --git a/src/pages/LoginEntrance/components/NoAvailableTimeModal.tsx b/src/pages/LoginEntrance/components/NoAvailableTimeModal.tsx
index 3b56bf2d..0b82b270 100644
--- a/src/pages/LoginEntrance/components/NoAvailableTimeModal.tsx
+++ b/src/pages/LoginEntrance/components/NoAvailableTimeModal.tsx
@@ -10,7 +10,7 @@ interface ModalProps {
   setIsModalOpen: Dispatch<SetStateAction<boolean>>;
 }
 
-function NoAvailableTimeModal ({ setIsModalOpen }: ModalProps) {
+function NoAvailableTimeModal({ setIsModalOpen }: ModalProps) {
   const { meetingId } = useParams();
   return (
     <ReturnModalWrpper>
@@ -29,7 +29,7 @@ function NoAvailableTimeModal ({ setIsModalOpen }: ModalProps) {
             방장 페이지에 접속할 수 있어요!
           </Text>
         </MentContainer>
-        <Link to={`/host/schedule/${meetingId}`}>
+        <Link to={`/host/select/${meetingId}`}>
           <ModalBtn>
             <Text font={`body2`} color={`${theme.colors.white}`}>
               가능 시간 입력하러 가기
diff --git a/src/pages/createMeeting/CreateMeeting.tsx b/src/pages/createMeeting/CreateMeeting.tsx
index bcde5d43..006e077f 100644
--- a/src/pages/createMeeting/CreateMeeting.tsx
+++ b/src/pages/createMeeting/CreateMeeting.tsx
@@ -6,6 +6,7 @@ import ReturnBodyComponent from 'pages/createMeeting/components/ReturnBodyCompon
 import ReturnTitleComponent from 'pages/createMeeting/components/ReturnTitleComponent';
 import { funnelStep } from './data/meetingInfoData';
 import styled from 'styled-components/macro';
+import { useGetTimetable } from 'utils/apis/useGetTimetable';
 
 const initialMeetingInfo: MeetingInfo = {
   title: '',
@@ -23,6 +24,7 @@ function CreateMeeting() {
   const [step, setStep] = useState(0);
   const [meetingInfo, setMeetingInfo] = useState(initialMeetingInfo);
   const currentStep = funnelStep[step];
+
   return (
     <>
       <CreateMeetingWrapper>
@@ -41,6 +43,10 @@ function CreateMeeting() {
 
 export default CreateMeeting;
 
+const Button = styled.div`
+  font-size: 5rem;
+  color: white;
+`;
 const CreateMeetingWrapper = styled.div`
   display: flex;
   flex-direction: column;
diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx
index 63ed0a4e..716a6ca0 100644
--- a/src/pages/selectSchedule/SelectSchedule.tsx
+++ b/src/pages/selectSchedule/SelectSchedule.tsx
@@ -1,5 +1,3 @@
-import Button from 'components/atomComponents/Button';
-import { DateType } from 'components/timetableComponents/types';
 import Description from './components/Description';
 import Header from 'components/moleculesComponents/Header';
 import SelectScheduleTable from './components/SelectScheduleTable';
@@ -7,51 +5,14 @@ import { Step } from './types';
 import TitleComponents from 'components/moleculesComponents/TitleComponents';
 import { getAvailableTimes } from 'components/timetableComponents/utils';
 import styled from 'styled-components';
+import { useGetTimetable } from 'utils/apis/useGetTimetable';
+import { useParams } from 'react-router-dom';
 import { useState } from 'react';
 
-/***** api 연결 후 지울 것*****/
-
-const availableDates: DateType[] = [
-  {
-    month: '6',
-    day: '20',
-    dayOfWeek: '목',
-  },
-  {
-    month: '6',
-    day: '21',
-    dayOfWeek: '금',
-  },
-  {
-    month: '6',
-    day: '22',
-    dayOfWeek: '토',
-  },
-  {
-    month: '6',
-    day: '23',
-    dayOfWeek: '일',
-  },
-];
-
-export type SlotType = {
-  startTime: string;
-  endTime: string;
-};
-
-const preferTimes: SlotType = {
-  startTime: '06:00',
-  endTime: '24:00',
-};
-
-const timeSlots = getAvailableTimes(preferTimes);
-const duration = 'HALF';
-const place = 'OFFLINE';
-const placeDetail = undefined;
-/***** api 연결 후 지울 것*****/
-
 function SelectSchedule() {
   const [step, setStep] = useState<Step>('selectTimeSlot');
+  const { meetingId } = useParams();
+  const { data, isLoading } = useGetTimetable(meetingId);
 
   interface TitlesType {
     [key: string]: {
@@ -70,23 +31,32 @@ function SelectSchedule() {
   };
 
   return (
-    <SelectScheduleWrapper>
-      <Header position="schedule" setSelectScheduleStep={setStep} />
-      {step === 'selectTimeSlot' && (
-        <Description duration={duration} place={place} placeDetail={placeDetail} />
-      )}
-      <TitleComponents
-        main={titles[step].main}
-        sub={titles[step].sub}
-        padding={step === 'selectTimeSlot' ? `0 0 2.6rem` : `4.4rem 0 3.2rem 0`}
-      />
-      <SelectScheduleTable
-        step={step}
-        setStep={setStep}
-        timeSlots={timeSlots}
-        availableDates={availableDates}
-      />
-    </SelectScheduleWrapper>
+    <>
+      {!isLoading &&
+        data && (
+          <SelectScheduleWrapper>
+            <Header position="schedule" setSelectScheduleStep={setStep} />
+            {step === 'selectTimeSlot' && (
+              <Description
+                duration={data.duration}
+                place={data.place}
+                placeDetail={data.placeDetail}
+              />
+            )}
+            <TitleComponents
+              main={titles[step].main}
+              sub={titles[step].sub}
+              padding={step === 'selectTimeSlot' ? `0 0 2.6rem` : `4.4rem 0 3.2rem 0`}
+            />
+            <SelectScheduleTable
+              step={step}
+              setStep={setStep}
+              timeSlots={getAvailableTimes(data.preferTimes[0])} // TODO: 시간대 선택이 없어지면서 preferTimes가 없어지면 이 부분을 수정해야함.
+              availableDates={data.availableDates}
+            />
+          </SelectScheduleWrapper>
+        )}
+    </>
   );
 }
 
diff --git a/src/utils/apis/useGetTimetable.ts b/src/utils/apis/useGetTimetable.ts
index b75db932..736ad991 100644
--- a/src/utils/apis/useGetTimetable.ts
+++ b/src/utils/apis/useGetTimetable.ts
@@ -1,25 +1,46 @@
 import { client } from './axios';
+import { useNavigate } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 
+interface Date {
+  month: string;
+  day: string;
+  dayOfWeek: string;
+}
+interface TimeSlot {
+  startTime: string;
+  endTime: string;
+}
+
+interface getTimetableResponse {
+  data: {
+    duration: string;
+    place: string;
+    placeDetail: string;
+    availableDates: Date[];
+    preferTimes: TimeSlot[];
+  };
+}
+
 const getTimetable = async (meetingId: string) => {
   try {
-    const res = await client.get(`/meeting/${meetingId}/schedule`);
-    return res.data;
+    const res = await client.get<getTimetableResponse>(`/meeting/${meetingId}/schedule`);
+    return res.data.data;
   } catch (err) {
-    throw new Error(err);
+    console.log(err);
   }
 };
 
-export const useGetTimetable = (meetingId: string) => {
+export const useGetTimetable = (meetingId?: string) => {
+  const navigate = useNavigate();
+  if (meetingId === undefined) {
+    navigate('/error');
+    throw new Error('잘못된 회의 아이디입니다.');
+  }
   const { data, isLoading } = useQuery({
     queryKey: ['getTimetable', meetingId],
     queryFn: () => getTimetable(meetingId),
   });
-  const duration = data?.duration;
-  const place = data?.place;
-  const placeDetail = data?.placeDetail;
-  const availableDates = data?.availableDates;
-  const preferTimes = data?.preferTimes;
 
-  return {duration, place, placeDetail, availableDates, preferTimes, isLoading}
+  return { data, isLoading };
 };

From 013f9f12b07d569f3804caa2d4f9d1cc386619e3 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 23 Jun 2024 04:44:14 +0900
Subject: [PATCH 42/62] =?UTF-8?q?feat:=20=EA=B0=80=EB=8A=A5=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=84=20=EC=9E=85=EB=A0=A5=20post=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../legacy/selectSchedule/SelectModal.tsx     | 12 ++-
 src/pages/selectSchedule/SelectSchedule.tsx   |  6 +-
 .../selectSchedule/components/Description.tsx | 10 +-
 src/pages/selectSchedule/utils.ts             | 96 ++++++++++++-------
 src/types/createAvailableSchduleType.ts       |  2 +-
 src/utils/apis/useGetTimetable.ts             |  6 +-
 6 files changed, 82 insertions(+), 50 deletions(-)

diff --git a/src/pages/legacy/selectSchedule/SelectModal.tsx b/src/pages/legacy/selectSchedule/SelectModal.tsx
index 756141bb..a19e6bec 100644
--- a/src/pages/legacy/selectSchedule/SelectModal.tsx
+++ b/src/pages/legacy/selectSchedule/SelectModal.tsx
@@ -1,3 +1,8 @@
+import {
+  formatHostScheduleScheme,
+  formatMemberScheduleScheme,
+  formatSchedulePostScheme,
+} from 'pages/selectSchedule/utils';
 import { hostAvailableApi, userAvailableApi } from 'utils/apis/legacy/createHostAvailableSchedule';
 import { scheduleAtom, userNameAtom } from 'atoms/atom';
 import { transformHostScheduleType, transformUserScheduleType } from './utils/changeApiReq';
@@ -10,19 +15,20 @@ import Text from 'components/atomComponents/Text';
 import { isAxiosError } from 'axios';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
+import { useTimetableContext } from 'components/timetableComponents/context';
 
 interface ModalProps {
   setShowModal: (isModalOpen: boolean) => void;
 }
 
 function SelectModal({ setShowModal }: ModalProps) {
-  const [scheduleList, setScheduleList] = useRecoilState<ScheduleStates[]>(scheduleAtom);
+  const { selectedSlots } = useTimetableContext();
   const userName = useRecoilValue(userNameAtom);
 
   const navigate = useNavigate();
   const { auth, meetingId } = useParams();
-  const updateScheduleType = transformHostScheduleType(scheduleList);
-  const updateMemberScheduleType = transformUserScheduleType(scheduleList, userName);
+  const updateScheduleType = formatHostScheduleScheme(selectedSlots);
+  const updateMemberScheduleType = formatMemberScheduleScheme(selectedSlots, userName);
 
   const postHostAvailableApi = async () => {
     try {
diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx
index 716a6ca0..55489fc8 100644
--- a/src/pages/selectSchedule/SelectSchedule.tsx
+++ b/src/pages/selectSchedule/SelectSchedule.tsx
@@ -12,8 +12,10 @@ import { useState } from 'react';
 function SelectSchedule() {
   const [step, setStep] = useState<Step>('selectTimeSlot');
   const { meetingId } = useParams();
-  const { data, isLoading } = useGetTimetable(meetingId);
-
+  const { data, isLoading, isError, error } = useGetTimetable(meetingId);
+  if (isError) {
+    console.log(err);
+  }
   interface TitlesType {
     [key: string]: {
       main: string;
diff --git a/src/pages/selectSchedule/components/Description.tsx b/src/pages/selectSchedule/components/Description.tsx
index e87e25fe..34e88e25 100644
--- a/src/pages/selectSchedule/components/Description.tsx
+++ b/src/pages/selectSchedule/components/Description.tsx
@@ -1,18 +1,18 @@
-import { formatDuration, formatPlace } from '../utils';
+import { DURATION, PLACE } from '../utils';
 
 import Text from 'components/atomComponents/Text';
 import styled from 'styled-components';
 import { theme } from 'styles/theme';
 
 interface DescriptionProps {
-  duration: string;
-  place: string;
+  duration: keyof typeof DURATION;
+  place: keyof typeof PLACE;
   placeDetail?: string;
 }
 
 function Description({ duration: durationOg, place: placeOg, placeDetail }: DescriptionProps) {
-  const duration = formatDuration(durationOg);
-  const place = formatPlace(placeOg);
+  const duration = DURATION[durationOg];
+  const place = PLACE[placeOg];
   return (
     <DescriptionWrapper>
       <Texts>
diff --git a/src/pages/selectSchedule/utils.ts b/src/pages/selectSchedule/utils.ts
index 2ecdbfda..c67e1152 100644
--- a/src/pages/selectSchedule/utils.ts
+++ b/src/pages/selectSchedule/utils.ts
@@ -1,42 +1,19 @@
 import { SelectedSlotType } from 'components/timetableComponents/context';
 
-/**
- *
- * @desc 영어로 표현된 회의 진행 시간을 한글로 변환하는 함수
- */
-export const formatDuration = (duration: string): string => {
-  switch (duration) {
-    case 'HALF':
-      return '30분';
-    case 'HOUR':
-      return '1시간';
-    case 'HOUR_HALF':
-      return '1시간 30분';
-    case 'TWO_HOUR':
-      return '2시간';
-    case 'TWO_HOUR_HALF':
-      return '2시간 30분';
-    case 'THREE_HOUR':
-      return '3시간';
-    default:
-      return 'UNDEFINED';
-  }
-};
+export const DURATION = {
+  HALF: '30분',
+  HOUR: '1시간',
+  HOUR_HALF: '1시간 30분',
+  TWO_HOUR: '2시간',
+  TWO_HOUR_HALF: '2시간 30분',
+  THREE_HOUR: '3시간',
+} as const;
 
-/**
- *
- * @desc 영어로 표현된 회의 장소를 한글로 변환하는 함수
- */
-export const formatPlace = (place: string) => {
-  switch (place) {
-    case 'ONLINE':
-      return '온라인';
-    case 'OFFLINE':
-      return '오프라인';
-    case 'UNDEFINED':
-      return undefined;
-  }
-};
+export const PLACE = {
+  ONLINE: '온라인',
+  OFFLINE: '오프라인',
+  UNDEFINED: undefined,
+} as const;
 
 /**
  *
@@ -56,3 +33,50 @@ export const resetPriorities = (selectedSlots: SelectedSlotType): SelectedSlotTy
 
   return updatedSlots;
 };
+
+/**
+ *
+ * @desc 방장 시간표 입력 POST를 위한 형식을 맞추는 함수
+ */
+export const formatHostScheduleScheme = (selectedSlots: SelectedSlotType) => {
+  const availableTimes = Object.keys(selectedSlots).map((key) => {
+    const slot = selectedSlots[parseInt(key)];
+    const [month, day, dayOfWeek] = slot.date.split('/');
+
+    return {
+      id: key,
+      month: month.padStart(2, '0'),
+      day: day.padStart(2, '0'),
+      dayOfWeek: dayOfWeek,
+      startTime: slot.startSlot,
+      endTime: slot.endSlot,
+      priority: slot.priority,
+    };
+  });
+  return availableTimes;
+};
+
+/**
+ *
+ * @desc 멤버 시간표 입력 POST를 위한 형식을 맞추는 함수
+ */
+export const formatMemberScheduleScheme = (selectedSlots: SelectedSlotType, userName: string) => {
+  const availableTimes = Object.keys(selectedSlots).map((key) => {
+    const slot = selectedSlots[parseInt(key)];
+    const [month, day, dayOfWeek] = slot.date.split('/');
+
+    return {
+      id: key,
+      month: month.padStart(2, '0'),
+      day: day.padStart(2, '0'),
+      dayOfWeek: dayOfWeek,
+      startTime: slot.startSlot,
+      endTime: slot.endSlot,
+      priority: slot.priority,
+    };
+  });
+  return {
+    name: userName,
+    availableTimes: availableTimes,
+  };
+};
diff --git a/src/types/createAvailableSchduleType.ts b/src/types/createAvailableSchduleType.ts
index 9f0d7e29..a088bfcd 100644
--- a/src/types/createAvailableSchduleType.ts
+++ b/src/types/createAvailableSchduleType.ts
@@ -5,7 +5,7 @@ export interface HostAvailableSchduleRequestType {
   dayOfWeek: string;
   startTime: string;
   endTime: string;
-  priority: number;
+  priority: 0 | 1 | 2 | 3;
 }
 
 export interface HostAvailableScheduleResponseType {
diff --git a/src/utils/apis/useGetTimetable.ts b/src/utils/apis/useGetTimetable.ts
index 736ad991..d2fbb833 100644
--- a/src/utils/apis/useGetTimetable.ts
+++ b/src/utils/apis/useGetTimetable.ts
@@ -27,7 +27,7 @@ const getTimetable = async (meetingId: string) => {
     const res = await client.get<getTimetableResponse>(`/meeting/${meetingId}/schedule`);
     return res.data.data;
   } catch (err) {
-    console.log(err);
+    throw new Error(err);
   }
 };
 
@@ -37,10 +37,10 @@ export const useGetTimetable = (meetingId?: string) => {
     navigate('/error');
     throw new Error('잘못된 회의 아이디입니다.');
   }
-  const { data, isLoading } = useQuery({
+  const { data, isError, error, isLoading } = useQuery({
     queryKey: ['getTimetable', meetingId],
     queryFn: () => getTimetable(meetingId),
   });
 
-  return { data, isLoading };
+  return { data, isError, error, isLoading };
 };

From 63ed9712c0ee9c399bc35a861e6ea1ad366898f6 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 23 Jun 2024 05:09:52 +0900
Subject: [PATCH 43/62] =?UTF-8?q?fix:=20ts=20=EC=97=90=EB=9F=AC=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/timetableComponents/context.ts |  2 +-
 .../legacy/selectSchedule/SelectModal.tsx     | 12 +---
 .../selectSchedule/utils/changeApiReq.ts      | 67 -------------------
 src/pages/selectSchedule/SelectSchedule.tsx   |  5 +-
 src/utils/apis/useGetTimetable.ts             | 15 +++--
 5 files changed, 15 insertions(+), 86 deletions(-)
 delete mode 100644 src/pages/legacy/selectSchedule/utils/changeApiReq.ts

diff --git a/src/components/timetableComponents/context.ts b/src/components/timetableComponents/context.ts
index d6eb8a77..0d984c5b 100644
--- a/src/components/timetableComponents/context.ts
+++ b/src/components/timetableComponents/context.ts
@@ -14,7 +14,7 @@ type TimetableContextType = {
   startSlot?: string;
   setStartSlot: (startSlot?: string) => void;
   selectedSlots: SelectedSlotType;
-  setSelectedSlots: (selectedSlots: SelectedSlotsType) => void;
+  setSelectedSlots: (selectedSlots: SelectedSlotType) => void;
 };
 
 export const TimetableContext = createContext<TimetableContextType>({
diff --git a/src/pages/legacy/selectSchedule/SelectModal.tsx b/src/pages/legacy/selectSchedule/SelectModal.tsx
index a19e6bec..7a7e9dec 100644
--- a/src/pages/legacy/selectSchedule/SelectModal.tsx
+++ b/src/pages/legacy/selectSchedule/SelectModal.tsx
@@ -1,21 +1,15 @@
-import {
-  formatHostScheduleScheme,
-  formatMemberScheduleScheme,
-  formatSchedulePostScheme,
-} from 'pages/selectSchedule/utils';
+import { formatHostScheduleScheme, formatMemberScheduleScheme } from 'pages/selectSchedule/utils';
 import { hostAvailableApi, userAvailableApi } from 'utils/apis/legacy/createHostAvailableSchedule';
-import { scheduleAtom, userNameAtom } from 'atoms/atom';
-import { transformHostScheduleType, transformUserScheduleType } from './utils/changeApiReq';
 import { useNavigate, useParams } from 'react-router';
-import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { ExitIc } from 'components/Icon/icon';
-import { ScheduleStates } from './types/Schedule';
 import Text from 'components/atomComponents/Text';
 import { isAxiosError } from 'axios';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
+import { useRecoilValue } from 'recoil';
 import { useTimetableContext } from 'components/timetableComponents/context';
+import { userNameAtom } from 'atoms/atom';
 
 interface ModalProps {
   setShowModal: (isModalOpen: boolean) => void;
diff --git a/src/pages/legacy/selectSchedule/utils/changeApiReq.ts b/src/pages/legacy/selectSchedule/utils/changeApiReq.ts
deleted file mode 100644
index 2aac57f0..00000000
--- a/src/pages/legacy/selectSchedule/utils/changeApiReq.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import {
-  HostAvailableSchduleRequestType,
-  UserAvailableScheduleRequestType,
-} from 'src/types/createAvailableSchduleType';
-
-import { ScheduleStates } from '../types/Schedule';
-
-export const transformHostScheduleType = (
-  scheduleList: ScheduleStates[],
-): (HostAvailableSchduleRequestType | null)[] => {
-  return scheduleList.map((item) => {
-    const matchedResult = item.date.match(/(\d+)월 (\d+)일 \((\S+)\)/);
-    if (!matchedResult) {
-      return null;
-    }
-    const [, month, day, dateOfWeek] = matchedResult;
-
-    return {
-      id: item.id.toString(),
-      month: month.padStart(2, '0'),
-      day: day.padStart(2, '0'),
-      dayOfWeek: dateOfWeek,
-      startTime: item.startTime,
-      endTime: item.endTime,
-      priority: item.priority,
-    };
-  });
-};
-
-export const transformUserScheduleType = (
-  scheduleList: ScheduleStates[],
-  meetInfo: string,
-): UserAvailableScheduleRequestType => {
-  const availableTimes = scheduleList.map((item) => {
-    const matchedResult = item.date.match(/(\d+)월 (\d+)일 \((\S+)\)/);
-    if (!matchedResult) {
-      return {
-        id: '',
-        month: '',
-        day: '',
-        dayOfWeek: '',
-        startTime: '',
-        endTime: '',
-        priority: 0,
-      };
-    }
-    // const [, month, day, dateOfWeek]: string[] | null = item.date.match(
-    //   /(\d+)월 (\d+)일 \((\S+)\)/,
-    // );
-    const [, month, day, dateOfWeek] = matchedResult;
-    return {
-      id: item.id.toString(),
-      month: month.padStart(2, '0'),
-      day: day.padStart(2, '0'),
-      dayOfWeek: dateOfWeek,
-      startTime: item.startTime,
-      endTime: item.endTime,
-      priority: item.priority,
-    };
-  });
-
-  const final: UserAvailableScheduleRequestType = {
-    name: meetInfo,
-    availableTimes,
-  };
-  return final;
-};
diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx
index 55489fc8..267d2e05 100644
--- a/src/pages/selectSchedule/SelectSchedule.tsx
+++ b/src/pages/selectSchedule/SelectSchedule.tsx
@@ -12,10 +12,7 @@ import { useState } from 'react';
 function SelectSchedule() {
   const [step, setStep] = useState<Step>('selectTimeSlot');
   const { meetingId } = useParams();
-  const { data, isLoading, isError, error } = useGetTimetable(meetingId);
-  if (isError) {
-    console.log(err);
-  }
+  const { data, isLoading } = useGetTimetable(meetingId);
   interface TitlesType {
     [key: string]: {
       main: string;
diff --git a/src/utils/apis/useGetTimetable.ts b/src/utils/apis/useGetTimetable.ts
index d2fbb833..be7f4ea0 100644
--- a/src/utils/apis/useGetTimetable.ts
+++ b/src/utils/apis/useGetTimetable.ts
@@ -1,4 +1,7 @@
+import { DURATION, PLACE } from 'pages/selectSchedule/utils';
+
 import { client } from './axios';
+import { isAxiosError } from 'axios';
 import { useNavigate } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 
@@ -14,8 +17,8 @@ interface TimeSlot {
 
 interface getTimetableResponse {
   data: {
-    duration: string;
-    place: string;
+    duration: keyof typeof DURATION;
+    place: keyof typeof PLACE;
     placeDetail: string;
     availableDates: Date[];
     preferTimes: TimeSlot[];
@@ -27,7 +30,9 @@ const getTimetable = async (meetingId: string) => {
     const res = await client.get<getTimetableResponse>(`/meeting/${meetingId}/schedule`);
     return res.data.data;
   } catch (err) {
-    throw new Error(err);
+    if (isAxiosError(err) && err.response) {
+      throw new Error(err.response.data.message);
+    }
   }
 };
 
@@ -37,10 +42,10 @@ export const useGetTimetable = (meetingId?: string) => {
     navigate('/error');
     throw new Error('잘못된 회의 아이디입니다.');
   }
-  const { data, isError, error, isLoading } = useQuery({
+  const { data, isLoading } = useQuery({
     queryKey: ['getTimetable', meetingId],
     queryFn: () => getTimetable(meetingId),
   });
 
-  return { data, isError, error, isLoading };
+  return { data, isLoading };
 };

From d68f6b3a02b7f183c98d58c518bc3456a892e529 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 23 Jun 2024 05:21:25 +0900
Subject: [PATCH 44/62] =?UTF-8?q?fix:=20=EC=98=A8=EB=B3=B4=EB=94=A9=20swip?=
 =?UTF-8?q?er=20css=20=EC=A0=81=EC=9A=A9=20=EC=95=88=EB=90=98=EB=8A=94=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.css                               | 57 +++++++++++------------
 src/App.tsx                               |  2 +-
 src/pages/createMeeting/CreateMeeting.tsx |  4 --
 src/pages/onBoarding/OnBoarding.tsx       | 16 +++----
 4 files changed, 37 insertions(+), 42 deletions(-)

diff --git a/src/App.css b/src/App.css
index a19e07a5..a37449c4 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,58 +1,57 @@
 #app {
-    height: 100%;
+  height: 100%;
 }
 
 html,
 body {
-    position: relative;
-    height: 100%;
+  position: relative;
+  height: 100%;
 }
 
 body {
-    margin: 0;
-    background: #eee;
-    padding: 0;
-    color: #000;
-    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-    font-size: 14px;
+  margin: 0;
+  padding: 0;
+  color: #000;
+  font-size: 14px;
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  background: #eee;
 }
 
 .swiper {
-    z-index: 0;
-    width: 100%;
-    height: 100%;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
 }
 
 .swiper-slide {
-
-    /* Center slide text vertically */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: #141414;
-    text-align: center;
-    font-size: 18px;
+  /* Center slide text vertically */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  text-align: center;
+  background: #141414;
 }
 
 .swiper-slide img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .swiper-button-prev {
-    display: none;
+  display: none;
 }
 
 .swiper-button-next {
-    display: none;
+  display: none;
 }
 
 .swiper-pagination-bullet {
-    background-color: #A4A4A4;
+  background-color: #a4a4a4 !important;
 }
 
 .swiper-pagination-bullet-active {
-    background-color: #3253FF;
-}
\ No newline at end of file
+  background-color: #3253ff !important;
+}
diff --git a/src/App.tsx b/src/App.tsx
index b279d2c2..75914087 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
-import './App.css';
 /**카카오톡 인앱브라우저 종료후 크롬 및 사파리로 오픈하는 utils file */
 import './utils/changeBrowser';
 import 'react-toastify/dist/ReactToastify.css';
+import './App.css';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
diff --git a/src/pages/createMeeting/CreateMeeting.tsx b/src/pages/createMeeting/CreateMeeting.tsx
index 006e077f..b99eeccd 100644
--- a/src/pages/createMeeting/CreateMeeting.tsx
+++ b/src/pages/createMeeting/CreateMeeting.tsx
@@ -43,10 +43,6 @@ function CreateMeeting() {
 
 export default CreateMeeting;
 
-const Button = styled.div`
-  font-size: 5rem;
-  color: white;
-`;
 const CreateMeetingWrapper = styled.div`
   display: flex;
   flex-direction: column;
diff --git a/src/pages/onBoarding/OnBoarding.tsx b/src/pages/onBoarding/OnBoarding.tsx
index aafc912a..3457f444 100644
--- a/src/pages/onBoarding/OnBoarding.tsx
+++ b/src/pages/onBoarding/OnBoarding.tsx
@@ -2,19 +2,19 @@ import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 
+import { Autoplay, Navigation, Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import Button from 'components/atomComponents/Button';
 import CardPng from 'assets/images/card.png';
+import Explain from './components/Explain';
+import Header from 'components/moleculesComponents/Header';
 import InsertPng from 'assets/images/insert.png';
+import { Link } from 'react-router-dom';
 import MakePng from 'assets/images/make.png';
 import PointPng from 'assets/images/point.png';
-import Button from 'components/atomComponents/Button';
 import Text from 'components/atomComponents/Text';
-import Header from 'components/moleculesComponents/Header';
-import { Link } from 'react-router-dom';
 import styled from 'styled-components/macro';
-import { Autoplay, Navigation, Pagination } from 'swiper/modules';
-import { Swiper, SwiperSlide } from 'swiper/react';
-
-import Explain from './components/Explain';
 
 const slides = [
   {
@@ -60,7 +60,7 @@ function OnBoarding() {
               pagination={{
                 clickable: true,
               }}
-              navigation={true}
+              navigation={false}
               modules={[Autoplay, Pagination, Navigation]}
               className="mySwiper"
             >

From 9596db2413eb95642a3f705e38748a0d60407ea9 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 23 Jun 2024 22:17:09 +0900
Subject: [PATCH 45/62] =?UTF-8?q?chore:=20=EC=95=88=EC=93=B0=EB=8A=94=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/selectSchedule/components/Title.tsx | 11 -----------
 1 file changed, 11 deletions(-)
 delete mode 100644 src/pages/selectSchedule/components/Title.tsx

diff --git a/src/pages/selectSchedule/components/Title.tsx b/src/pages/selectSchedule/components/Title.tsx
deleted file mode 100644
index ee954399..00000000
--- a/src/pages/selectSchedule/components/Title.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import TitleComponents from 'components/moleculesComponents/TitleComponents';
-
-interface TitleProps {
-  mainText: string;
-  subText: string;
-}
-function Title({ mainText, subText }: TitleProps) {
-  return <TitleComponents main={mainText} sub={subText} />;
-}
-
-export default Title;

From a0c97c306c7c6096ea8a1746b70abedba23c2b13 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 23 Jun 2024 22:20:47 +0900
Subject: [PATCH 46/62] =?UTF-8?q?chore:=20=EC=BD=94=EB=93=9C=20=EA=B0=80?=
 =?UTF-8?q?=EB=8F=85=EC=84=B1=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/selectSchedule/SelectSchedule.tsx   | 13 ++++++-----
 .../components/SelectScheduleTable.tsx        | 22 ++++++++++---------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx
index 63ed0a4e..6d8129f4 100644
--- a/src/pages/selectSchedule/SelectSchedule.tsx
+++ b/src/pages/selectSchedule/SelectSchedule.tsx
@@ -1,13 +1,14 @@
-import Button from 'components/atomComponents/Button';
-import { DateType } from 'components/timetableComponents/types';
-import Description from './components/Description';
+import { useState } from 'react';
+
 import Header from 'components/moleculesComponents/Header';
-import SelectScheduleTable from './components/SelectScheduleTable';
-import { Step } from './types';
 import TitleComponents from 'components/moleculesComponents/TitleComponents';
+import { DateType } from 'components/timetableComponents/types';
 import { getAvailableTimes } from 'components/timetableComponents/utils';
 import styled from 'styled-components';
-import { useState } from 'react';
+
+import Description from './components/Description';
+import SelectScheduleTable from './components/SelectScheduleTable';
+import { Step } from './types';
 
 /***** api 연결 후 지울 것*****/
 
diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
index 33a759b1..74af1c80 100644
--- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx
+++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
@@ -1,18 +1,19 @@
-import { ColumnStructure, TimetableStructure } from 'components/timetableComponents/types';
-import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context';
-import { Step, StepBtnsType, StepSlotsType } from '../types';
+import { useState } from 'react';
 
 import Button from 'components/atomComponents/Button';
+import Text from 'components/atomComponents/Text';
+import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context';
+import Timetable from 'components/timetableComponents/Timetable';
+import { ColumnStructure, TimetableStructure } from 'components/timetableComponents/types';
+import styled from 'styled-components';
+
 import PriorityCta from './selectPriority/PriorityCta';
 import PriorityDropdown from './selectPriority/PriorityDropdown';
 import PrioritySlots from './selectPriority/PrioritySlots';
 import SelectionSlots from './selectTimeSlot/SelectionSlots';
-import Text from 'components/atomComponents/Text';
 import TimeSlotCta from './selectTimeSlot/TimeSlotCta';
-import Timetable from 'components/timetableComponents/Timetable';
+import { Step, StepBtnsType, StepSlotsType } from '../types';
 import { resetPriorities } from '../utils';
-import styled from 'styled-components';
-import { useState } from 'react';
 
 interface SelectScheduleTableProps extends TimetableStructure {
   step: Step;
@@ -36,13 +37,14 @@ function SelectScheduleTable({
       <PrioritySlots date={date} timeSlots={timeSlots} />
     ),
   };
+  const stepSlot = stepSlots[step];
 
   const isValidSelection = Object.keys(selectedSlots).length !== 0;
-
   const stepBtns: StepBtnsType = {
     selectTimeSlot: <TimeSlotCta isValidSelection={isValidSelection} setStep={setStep} />,
     selectPriority: <PriorityCta />,
   };
+  const stepBtn = stepBtns[step];
 
   return (
     <TimetableContext.Provider
@@ -54,10 +56,10 @@ function SelectScheduleTable({
       }}
     >
       <Timetable timeSlots={timeSlots} availableDates={availableDates}>
-        {stepSlots[step]}
+        {stepSlot}
       </Timetable>
       {step === 'selectPriority' && <PriorityDropdown />}
-      {stepBtns[step]}
+      {stepBtn}
     </TimetableContext.Provider>
   );
 }

From d66d3e4c63ee394fc65402406771a29b23b2d226 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 23 Jun 2024 22:52:07 +0900
Subject: [PATCH 47/62] =?UTF-8?q?fix:=20selectSchedule=EC=97=90=EC=84=9C?=
 =?UTF-8?q?=20step=20state=20=EC=A0=9C=EA=B1=B0=ED=95=98=EA=B3=A0=20contex?=
 =?UTF-8?q?t=20api=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/components/moleculesComponents/Header.tsx | 29 ++++++++-------
 src/pages/selectSchedule/SelectSchedule.tsx   | 36 +++++++++----------
 .../components/SelectScheduleTable.tsx        | 28 +++++----------
 .../components/selectTimeSlot/TimeSlotCta.tsx |  8 ++---
 src/pages/selectSchedule/context.ts           | 21 +++++++++++
 src/pages/selectSchedule/types.ts             |  9 ++---
 6 files changed, 69 insertions(+), 62 deletions(-)
 create mode 100644 src/pages/selectSchedule/context.ts

diff --git a/src/components/moleculesComponents/Header.tsx b/src/components/moleculesComponents/Header.tsx
index 0fbfa93e..ea3d6242 100644
--- a/src/components/moleculesComponents/Header.tsx
+++ b/src/components/moleculesComponents/Header.tsx
@@ -2,7 +2,8 @@ import { Dispatch, SetStateAction, useState } from 'react';
 
 import Text from 'components/atomComponents/Text';
 import { BackIc, ExitIc, HambergerIc, LinkIc, MainLogoIc } from 'components/Icon/icon';
-import { Step as SelectScheduleStep } from 'pages/selectSchedule/types';
+import { useScheduleStepContext } from 'pages/selectSchedule/context';
+import { ScheduleStepType } from 'pages/selectSchedule/types';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { useParams } from 'react-router';
 import { useNavigate } from 'react-router-dom';
@@ -16,10 +17,11 @@ import Navigation from './Navigation';
 interface HeaderProps {
   position: string;
   setFunnelStep?: Dispatch<SetStateAction<number>>;
-  setSelectScheduleStep?: Dispatch<SetStateAction<SelectScheduleStep>>;
+  setSelectScheduleStep?: Dispatch<SetStateAction<ScheduleStepType>>;
 }
 
-function Header({ position, setFunnelStep, setSelectScheduleStep }: HeaderProps) {
+function Header({ position, setFunnelStep }: HeaderProps) {
+  const { scheduleStep, setScheduleStep } = useScheduleStepContext();
   const navigationOptions = [
     {
       title: '약속 생성하기',
@@ -44,19 +46,16 @@ function Header({ position, setFunnelStep, setSelectScheduleStep }: HeaderProps)
       });
     }
   };
-  const backToSelectSchedule = () =>{
-    if (setSelectScheduleStep !== undefined){
-      setSelectScheduleStep((prev:SelectScheduleStep)=>{
-        if (prev === 'selectTimeSlot'){
-          window.history.back()
-          return prev;
-        } else if (prev === 'selectPriority'){
-          return 'selectTimeSlot'
-        }
-        return prev;
-      })
+  const backToSelectSchedule = () => {
+    if (setScheduleStep !== undefined) {
+      if (scheduleStep === 'selectTimeSlot') {
+        window.history.back();
+        return;
+      } else if (scheduleStep === 'selectPriority') {
+        setScheduleStep('selectTimeSlot');
+      }
     }
-  }
+  };
 
   const { meetingId } = useParams();
   return (
diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx
index 6d8129f4..e0435132 100644
--- a/src/pages/selectSchedule/SelectSchedule.tsx
+++ b/src/pages/selectSchedule/SelectSchedule.tsx
@@ -8,7 +8,8 @@ import styled from 'styled-components';
 
 import Description from './components/Description';
 import SelectScheduleTable from './components/SelectScheduleTable';
-import { Step } from './types';
+import { ScheduleStepContext } from './context';
+import { ScheduleStepType } from './types';
 
 /***** api 연결 후 지울 것*****/
 
@@ -52,7 +53,7 @@ const placeDetail = undefined;
 /***** api 연결 후 지울 것*****/
 
 function SelectSchedule() {
-  const [step, setStep] = useState<Step>('selectTimeSlot');
+  const [scheduleStep, setScheduleStep] = useState<ScheduleStepType>('selectTimeSlot');
 
   interface TitlesType {
     [key: string]: {
@@ -71,23 +72,20 @@ function SelectSchedule() {
   };
 
   return (
-    <SelectScheduleWrapper>
-      <Header position="schedule" setSelectScheduleStep={setStep} />
-      {step === 'selectTimeSlot' && (
-        <Description duration={duration} place={place} placeDetail={placeDetail} />
-      )}
-      <TitleComponents
-        main={titles[step].main}
-        sub={titles[step].sub}
-        padding={step === 'selectTimeSlot' ? `0 0 2.6rem` : `4.4rem 0 3.2rem 0`}
-      />
-      <SelectScheduleTable
-        step={step}
-        setStep={setStep}
-        timeSlots={timeSlots}
-        availableDates={availableDates}
-      />
-    </SelectScheduleWrapper>
+    <ScheduleStepContext.Provider value={{ scheduleStep, setScheduleStep }}>
+      <SelectScheduleWrapper>
+        <Header position="schedule" />
+        {scheduleStep === 'selectTimeSlot' && (
+          <Description duration={duration} place={place} placeDetail={placeDetail} />
+        )}
+        <TitleComponents
+          main={titles[scheduleStep].main}
+          sub={titles[scheduleStep].sub}
+          padding={scheduleStep === 'selectTimeSlot' ? `0 0 2.6rem` : `4.4rem 0 3.2rem 0`}
+        />
+        <SelectScheduleTable timeSlots={timeSlots} availableDates={availableDates} />
+      </SelectScheduleWrapper>
+    </ScheduleStepContext.Provider>
   );
 }
 
diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
index 74af1c80..12bbe941 100644
--- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx
+++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
@@ -1,31 +1,19 @@
 import { useState } from 'react';
 
-import Button from 'components/atomComponents/Button';
-import Text from 'components/atomComponents/Text';
 import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context';
 import Timetable from 'components/timetableComponents/Timetable';
 import { ColumnStructure, TimetableStructure } from 'components/timetableComponents/types';
-import styled from 'styled-components';
 
 import PriorityCta from './selectPriority/PriorityCta';
 import PriorityDropdown from './selectPriority/PriorityDropdown';
 import PrioritySlots from './selectPriority/PrioritySlots';
 import SelectionSlots from './selectTimeSlot/SelectionSlots';
 import TimeSlotCta from './selectTimeSlot/TimeSlotCta';
-import { Step, StepBtnsType, StepSlotsType } from '../types';
-import { resetPriorities } from '../utils';
+import { useScheduleStepContext } from '../context';
+import { StepBtnsType, StepSlotsType } from '../types';
 
-interface SelectScheduleTableProps extends TimetableStructure {
-  step: Step;
-  setStep: (step: Step) => void;
-}
-
-function SelectScheduleTable({
-  step,
-  setStep,
-  timeSlots,
-  availableDates,
-}: SelectScheduleTableProps) {
+function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure) {
+  const { scheduleStep } = useScheduleStepContext();
   const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
   const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({});
 
@@ -37,14 +25,14 @@ function SelectScheduleTable({
       <PrioritySlots date={date} timeSlots={timeSlots} />
     ),
   };
-  const stepSlot = stepSlots[step];
+  const stepSlot = stepSlots[scheduleStep];
 
   const isValidSelection = Object.keys(selectedSlots).length !== 0;
   const stepBtns: StepBtnsType = {
-    selectTimeSlot: <TimeSlotCta isValidSelection={isValidSelection} setStep={setStep} />,
+    selectTimeSlot: <TimeSlotCta isValidSelection={isValidSelection} />,
     selectPriority: <PriorityCta />,
   };
-  const stepBtn = stepBtns[step];
+  const stepBtn = stepBtns[scheduleStep];
 
   return (
     <TimetableContext.Provider
@@ -58,7 +46,7 @@ function SelectScheduleTable({
       <Timetable timeSlots={timeSlots} availableDates={availableDates}>
         {stepSlot}
       </Timetable>
-      {step === 'selectPriority' && <PriorityDropdown />}
+      {scheduleStep === 'selectPriority' && <PriorityDropdown />}
       {stepBtn}
     </TimetableContext.Provider>
   );
diff --git a/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx b/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx
index 375386b0..5db0c99b 100644
--- a/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx
+++ b/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx
@@ -1,20 +1,20 @@
 import Button from 'components/atomComponents/Button';
-import { Step } from 'pages/selectSchedule/types';
 import Text from 'components/atomComponents/Text';
+import { useScheduleStepContext } from 'pages/selectSchedule/context';
 import styled from 'styled-components';
 
 interface TimeSlotCtaProps {
   isValidSelection: boolean;
-  setStep: (step: Step) => void;
 }
 
-function TimeSlotCta({ isValidSelection, setStep }: TimeSlotCtaProps) {
+function TimeSlotCta({ isValidSelection }: TimeSlotCtaProps) {
+  const { setScheduleStep } = useScheduleStepContext();
   return (
     <BtnDim>
       <Button
         typeState={isValidSelection ? 'primaryActive' : 'secondaryDisabled'}
         onClick={() => {
-          setStep('selectPriority');
+          setScheduleStep('selectPriority');
         }}
       >
         <Text font={'button2'}>다음</Text>
diff --git a/src/pages/selectSchedule/context.ts b/src/pages/selectSchedule/context.ts
new file mode 100644
index 00000000..a211ee8d
--- /dev/null
+++ b/src/pages/selectSchedule/context.ts
@@ -0,0 +1,21 @@
+import { createContext, useContext } from 'react';
+
+import { ScheduleStepType } from './types';
+
+interface ScheduleStepContextType {
+  scheduleStep: ScheduleStepType;
+  setScheduleStep: (scheduleStep: ScheduleStepType) => void;
+}
+
+export const ScheduleStepContext = createContext<ScheduleStepContextType>({
+  scheduleStep: 'selectTimeSlot',
+  setScheduleStep: () => undefined,
+});
+
+export function useScheduleStepContext() {
+  const context = useContext(ScheduleStepContext);
+  if (context == null) {
+    throw new Error('ScheduleStepContext Error');
+  }
+  return context;
+}
diff --git a/src/pages/selectSchedule/types.ts b/src/pages/selectSchedule/types.ts
index 7886a814..49a22a9e 100644
--- a/src/pages/selectSchedule/types.ts
+++ b/src/pages/selectSchedule/types.ts
@@ -1,6 +1,7 @@
-import { ColumnStructure } from 'components/timetableComponents/types';
 import { ReactNode } from 'react';
 
-export type Step = 'selectTimeSlot' | 'selectPriority';
-export type StepSlotsType = { [key in Step]: (props: ColumnStructure) => ReactNode };
-export type StepBtnsType = { [key in Step]: ReactNode };
+import { ColumnStructure } from 'components/timetableComponents/types';
+
+export type ScheduleStepType = 'selectTimeSlot' | 'selectPriority';
+export type StepSlotsType = { [key in ScheduleStepType]: (props: ColumnStructure) => ReactNode };
+export type StepBtnsType = { [key in ScheduleStepType]: ReactNode };

From 5c95f13edce27487666f3a027e4de0179665a625 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 23 Jun 2024 22:56:40 +0900
Subject: [PATCH 48/62] =?UTF-8?q?fix:=20Timetable=20Context=EB=A5=BC=20Sel?=
 =?UTF-8?q?ectSchedule=EC=97=90=EC=84=9C=20=EC=A3=BC=EC=9E=85=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20=EA=B2=83=EC=9D=B4=20=EC=95=84=EB=8B=88=EB=9D=BC=20?=
 =?UTF-8?q?Timetable=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EC=A3=BC=EC=9E=85=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../timetableComponents/Timetable.tsx         | 46 ++++++++++++-------
 .../components/SelectScheduleTable.tsx        | 19 ++------
 .../components/selectTimeSlot/TimeSlotCta.tsx |  9 ++--
 3 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/src/components/timetableComponents/Timetable.tsx b/src/components/timetableComponents/Timetable.tsx
index d29823e1..9f8c3ff7 100644
--- a/src/components/timetableComponents/Timetable.tsx
+++ b/src/components/timetableComponents/Timetable.tsx
@@ -1,9 +1,11 @@
-import { ColumnStructure, DateType } from './types';
+import { ReactNode, useState } from 'react';
+
+import styled from 'styled-components';
 
+import { SelectedSlotType, TimetableContext } from './context';
 import DateTitle from './parts/ColumnTitle';
-import { ReactNode } from 'react';
 import SlotTitle from './parts/SlotTitle';
-import styled from 'styled-components';
+import { ColumnStructure, DateType } from './types';
 
 interface TimetableProps {
   timeSlots: string[];
@@ -12,22 +14,34 @@ interface TimetableProps {
 }
 
 function Timetable({ timeSlots, availableDates, children }: TimetableProps) {
+  const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
+  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({});
+
   const emptyDates = Array.from({ length: 7 - availableDates.length }, (_, i) => `empty${i + 1}`);
 
   return (
-    <TimetableWrapper>
-      <SlotTitle timeSlots={timeSlots} />
-      <TableWrapper>
-        <DateTitle availableDates={availableDates} />
-        <Table>
-          {availableDates.map((date) => {
-            const dateKey = Object.values(date).join('/');
-            return <Column key={dateKey}>{children({ date: dateKey, timeSlots })}</Column>;
-          })}
-          {emptyDates && emptyDates.map((value) => <EmptyColumn key={value} />)}
-        </Table>
-      </TableWrapper>
-    </TimetableWrapper>
+    <TimetableContext.Provider
+      value={{
+        startSlot,
+        setStartSlot,
+        selectedSlots,
+        setSelectedSlots,
+      }}
+    >
+      <TimetableWrapper>
+        <SlotTitle timeSlots={timeSlots} />
+        <TableWrapper>
+          <DateTitle availableDates={availableDates} />
+          <Table>
+            {availableDates.map((date) => {
+              const dateKey = Object.values(date).join('/');
+              return <Column key={dateKey}>{children({ date: dateKey, timeSlots })}</Column>;
+            })}
+            {emptyDates && emptyDates.map((value) => <EmptyColumn key={value} />)}
+          </Table>
+        </TableWrapper>
+      </TimetableWrapper>
+    </TimetableContext.Provider>
   );
 }
 
diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
index 12bbe941..e518df4a 100644
--- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx
+++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
@@ -1,6 +1,3 @@
-import { useState } from 'react';
-
-import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context';
 import Timetable from 'components/timetableComponents/Timetable';
 import { ColumnStructure, TimetableStructure } from 'components/timetableComponents/types';
 
@@ -14,8 +11,6 @@ import { StepBtnsType, StepSlotsType } from '../types';
 
 function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure) {
   const { scheduleStep } = useScheduleStepContext();
-  const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
-  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({});
 
   const stepSlots: StepSlotsType = {
     selectTimeSlot: ({ date, timeSlots }: ColumnStructure) => (
@@ -27,28 +22,20 @@ function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure)
   };
   const stepSlot = stepSlots[scheduleStep];
 
-  const isValidSelection = Object.keys(selectedSlots).length !== 0;
   const stepBtns: StepBtnsType = {
-    selectTimeSlot: <TimeSlotCta isValidSelection={isValidSelection} />,
+    selectTimeSlot: <TimeSlotCta />,
     selectPriority: <PriorityCta />,
   };
   const stepBtn = stepBtns[scheduleStep];
 
   return (
-    <TimetableContext.Provider
-      value={{
-        startSlot,
-        setStartSlot,
-        selectedSlots,
-        setSelectedSlots,
-      }}
-    >
+    <>
       <Timetable timeSlots={timeSlots} availableDates={availableDates}>
         {stepSlot}
       </Timetable>
       {scheduleStep === 'selectPriority' && <PriorityDropdown />}
       {stepBtn}
-    </TimetableContext.Provider>
+    </>
   );
 }
 
diff --git a/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx b/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx
index 5db0c99b..6656907c 100644
--- a/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx
+++ b/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx
@@ -1,14 +1,13 @@
 import Button from 'components/atomComponents/Button';
 import Text from 'components/atomComponents/Text';
+import { useTimetableContext } from 'components/timetableComponents/context';
 import { useScheduleStepContext } from 'pages/selectSchedule/context';
 import styled from 'styled-components';
 
-interface TimeSlotCtaProps {
-  isValidSelection: boolean;
-}
-
-function TimeSlotCta({ isValidSelection }: TimeSlotCtaProps) {
+function TimeSlotCta() {
   const { setScheduleStep } = useScheduleStepContext();
+  const { selectedSlots } = useTimetableContext();
+  const isValidSelection = Object.keys(selectedSlots).length !== 0;
   return (
     <BtnDim>
       <Button

From 6bb589e404d2a285e593f2b6978dae2ed4991754 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 23 Jun 2024 23:29:28 +0900
Subject: [PATCH 49/62] =?UTF-8?q?fix:=20TimetableContext=EC=97=90=20?=
 =?UTF-8?q?=EC=9D=98=EC=A1=B4=EC=84=B1=EC=9D=B4=20=EC=9E=88=EB=8A=94=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20Timetable=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=82=B4=EB=B6=80?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../timetableComponents/Timetable.tsx         |  4 +++-
 .../components/SelectScheduleTable.tsx        | 23 ++++++++++---------
 .../components/selectPriority/PriorityCta.tsx |  8 ++++---
 .../selectPriority/PriorityDropdown.tsx       |  6 ++---
 src/pages/selectSchedule/types.ts             |  2 +-
 5 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/components/timetableComponents/Timetable.tsx b/src/components/timetableComponents/Timetable.tsx
index 9f8c3ff7..81bf49fd 100644
--- a/src/components/timetableComponents/Timetable.tsx
+++ b/src/components/timetableComponents/Timetable.tsx
@@ -11,9 +11,10 @@ interface TimetableProps {
   timeSlots: string[];
   availableDates: DateType[];
   children: (props: ColumnStructure) => ReactNode;
+  bottomItem?: ReactNode;
 }
 
-function Timetable({ timeSlots, availableDates, children }: TimetableProps) {
+function Timetable({ timeSlots, availableDates, children, bottomItem }: TimetableProps) {
   const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
   const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({});
 
@@ -41,6 +42,7 @@ function Timetable({ timeSlots, availableDates, children }: TimetableProps) {
           </Table>
         </TableWrapper>
       </TimetableWrapper>
+      {bottomItem}
     </TimetableContext.Provider>
   );
 }
diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
index e518df4a..65492546 100644
--- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx
+++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
@@ -7,7 +7,7 @@ import PrioritySlots from './selectPriority/PrioritySlots';
 import SelectionSlots from './selectTimeSlot/SelectionSlots';
 import TimeSlotCta from './selectTimeSlot/TimeSlotCta';
 import { useScheduleStepContext } from '../context';
-import { StepBtnsType, StepSlotsType } from '../types';
+import { StepSlotsType, StepbottomItemsType } from '../types';
 
 function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure) {
   const { scheduleStep } = useScheduleStepContext();
@@ -22,20 +22,21 @@ function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure)
   };
   const stepSlot = stepSlots[scheduleStep];
 
-  const stepBtns: StepBtnsType = {
+  const bottomItems: StepbottomItemsType = {
     selectTimeSlot: <TimeSlotCta />,
-    selectPriority: <PriorityCta />,
+    selectPriority: (
+      <>
+        <PriorityDropdown />
+        <PriorityCta />
+      </>
+    ),
   };
-  const stepBtn = stepBtns[scheduleStep];
+  const bottomItem = bottomItems[scheduleStep];
 
   return (
-    <>
-      <Timetable timeSlots={timeSlots} availableDates={availableDates}>
-        {stepSlot}
-      </Timetable>
-      {scheduleStep === 'selectPriority' && <PriorityDropdown />}
-      {stepBtn}
-    </>
+    <Timetable timeSlots={timeSlots} availableDates={availableDates} bottomItem={bottomItem}>
+      {stepSlot}
+    </Timetable>
   );
 }
 
diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx
index 83c3e8f9..61709cdd 100644
--- a/src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx
+++ b/src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
+
 import Button from 'components/atomComponents/Button';
-import SelectModal from 'pages/legacy/selectSchedule/SelectModal';
 import Text from 'components/atomComponents/Text';
+import SelectModal from 'pages/legacy/selectSchedule/SelectModal';
 import styled from 'styled-components';
-import { useState } from 'react';
 
 function PriorityCta() {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -36,10 +37,11 @@ export default PriorityCta;
 const BtnDim = styled.div`
   display: flex;
   position: fixed;
-  gap: 1rem;
   bottom: 0;
+  gap: 1rem;
   align-items: end;
   justify-content: center;
+  z-index: 2;
 
   margin-top: 3rem;
   background: ${({ theme }) => theme.colors.dim_gradient};
diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
index b7dd6a63..007318f2 100644
--- a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
+++ b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
@@ -1,15 +1,15 @@
+import { useState } from 'react';
+
+import Text from 'components/atomComponents/Text';
 import { Circle1Ic, Circle2Ic, Circle3Ic, DropDownIc, DropUpIc } from 'components/Icon/icon';
 import {
   SelectedSlotType,
   SlotInfoType,
   useTimetableContext,
 } from 'components/timetableComponents/context';
-
-import Text from 'components/atomComponents/Text';
 import { addMinutes } from 'components/timetableComponents/utils';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
-import { useState } from 'react';
 
 /**
  *
diff --git a/src/pages/selectSchedule/types.ts b/src/pages/selectSchedule/types.ts
index 49a22a9e..de210574 100644
--- a/src/pages/selectSchedule/types.ts
+++ b/src/pages/selectSchedule/types.ts
@@ -4,4 +4,4 @@ import { ColumnStructure } from 'components/timetableComponents/types';
 
 export type ScheduleStepType = 'selectTimeSlot' | 'selectPriority';
 export type StepSlotsType = { [key in ScheduleStepType]: (props: ColumnStructure) => ReactNode };
-export type StepBtnsType = { [key in ScheduleStepType]: ReactNode };
+export type StepbottomItemsType = { [key in ScheduleStepType]: ReactNode };

From 49e16518ebf894f9b72ed824fffb172cd961e586 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 23 Jun 2024 23:37:30 +0900
Subject: [PATCH 50/62] =?UTF-8?q?fix:=20=EC=9D=B8=ED=84=B0=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=8A=A4=EC=97=90=EC=84=9C=EB=8A=94=20no-unused-value?=
 =?UTF-8?q?=20lint=20error=EA=B0=80=20=EB=B0=9C=EC=83=9D=ED=95=98=EC=A7=80?=
 =?UTF-8?q?=EC=95=8A=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 10f001f8..2180e0d1 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -28,7 +28,8 @@
 
     "no-duplicate-imports": "error", //중복 Import 안돼
     "no-console": ["warn", { "allow": ["warn", "error", "info"] }], //콘솔은 확인 뒤 지우기
-    "no-unused-vars": "error", //사용하지 않은 변수면 없애기
+    "no-unused-vars": "off", //사용하지 않은 변수면 없애기
+    "@typescript-eslint/no-unused-vars": ["error"], //사용하지 않은 변수면 없애기
     "no-multiple-empty-lines": "error", //공백 금지
     "no-undef": "error", //정의 안 한 변수 사용 x
     "indent": "off", // 프리티어 충돌로 인한 OFF

From af422e57f564cd23da5512b0a6dedc0676aefc1d Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 23 Jun 2024 23:39:59 +0900
Subject: [PATCH 51/62] =?UTF-8?q?fix:=20=EA=B0=80=EB=8A=A5=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=84=20POST=EC=8B=9C=20endTime=EC=9D=B4=2030=EB=B6=84=20?=
 =?UTF-8?q?=EC=A0=81=EA=B2=8C=20=EB=93=A4=EC=96=B4=EA=B0=80=EB=8A=94=20?=
 =?UTF-8?q?=EC=98=A4=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

---
 .../legacy/selectSchedule/SelectModal.tsx     | 26 ++++++++++---------
 src/pages/selectSchedule/utils.ts             |  5 ++--
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/pages/legacy/selectSchedule/SelectModal.tsx b/src/pages/legacy/selectSchedule/SelectModal.tsx
index 7a7e9dec..145a9e65 100644
--- a/src/pages/legacy/selectSchedule/SelectModal.tsx
+++ b/src/pages/legacy/selectSchedule/SelectModal.tsx
@@ -1,15 +1,14 @@
+import { userNameAtom } from 'atoms/atom';
+import { isAxiosError } from 'axios';
+import Text from 'components/atomComponents/Text';
+import { ExitIc } from 'components/Icon/icon';
+import { useTimetableContext } from 'components/timetableComponents/context';
 import { formatHostScheduleScheme, formatMemberScheduleScheme } from 'pages/selectSchedule/utils';
-import { hostAvailableApi, userAvailableApi } from 'utils/apis/legacy/createHostAvailableSchedule';
 import { useNavigate, useParams } from 'react-router';
-
-import { ExitIc } from 'components/Icon/icon';
-import Text from 'components/atomComponents/Text';
-import { isAxiosError } from 'axios';
+import { useRecoilValue } from 'recoil';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
-import { useRecoilValue } from 'recoil';
-import { useTimetableContext } from 'components/timetableComponents/context';
-import { userNameAtom } from 'atoms/atom';
+import { hostAvailableApi, userAvailableApi } from 'utils/apis/legacy/createHostAvailableSchedule';
 
 interface ModalProps {
   setShowModal: (isModalOpen: boolean) => void;
@@ -162,12 +161,15 @@ const MentContainer = styled.div`
 `;
 
 const ModalMent = styled.span`
-  color: ${({ theme }) => theme.colors.white};
-  ${({ theme }) => theme.fonts.body2};
+  margin-top: 2.4rem;
+  margin-bottom: 0.8rem;
+
   width: 14.4rem;
+
   text-align: center;
-  margin-bottom: 0.8rem;
-  margin-top: 2.4rem;
+
+  color: ${({ theme }) => theme.colors.white};
+  ${({ theme }) => theme.fonts.body2};
 `;
 
 const ModalHighlight = styled.span`
diff --git a/src/pages/selectSchedule/utils.ts b/src/pages/selectSchedule/utils.ts
index c67e1152..b69239ca 100644
--- a/src/pages/selectSchedule/utils.ts
+++ b/src/pages/selectSchedule/utils.ts
@@ -1,4 +1,5 @@
 import { SelectedSlotType } from 'components/timetableComponents/context';
+import { addMinutes } from 'components/timetableComponents/utils';
 
 export const DURATION = {
   HALF: '30분',
@@ -49,7 +50,7 @@ export const formatHostScheduleScheme = (selectedSlots: SelectedSlotType) => {
       day: day.padStart(2, '0'),
       dayOfWeek: dayOfWeek,
       startTime: slot.startSlot,
-      endTime: slot.endSlot,
+      endTime: addMinutes(slot.endSlot, 30),
       priority: slot.priority,
     };
   });
@@ -71,7 +72,7 @@ export const formatMemberScheduleScheme = (selectedSlots: SelectedSlotType, user
       day: day.padStart(2, '0'),
       dayOfWeek: dayOfWeek,
       startTime: slot.startSlot,
-      endTime: slot.endSlot,
+      endTime: addMinutes(slot.endSlot, 30),
       priority: slot.priority,
     };
   });

From 6a12ea60e2fd7a5d7f5a470027fdd086c3c86c65 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Mon, 24 Jun 2024 00:49:55 +0900
Subject: [PATCH 52/62] =?UTF-8?q?feat:=20getOverallTimetable=20api=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/timetableComponents/context.ts |  20 ++-
 src/pages/OverallSchedule/OverallSchedule.tsx | 165 +-----------------
 .../overallSchedule/OverallSchedule.tsx       | 165 ++++++++++++++++++
 .../overallSchedule}/components/Column.tsx    |   0
 .../overallSchedule}/components/Row.tsx       |   0
 .../overallSchedule}/components/TimeTable.tsx |   0
 .../utils/getFormattedAvailableDateTimes.ts   |   0
 .../overallSchedule}/utils/setUserNames.ts    |   0
 src/pages/selectSchedule/SelectSchedule.tsx   |  20 +--
 .../selectPriority/PriorityDropdown.tsx       |   4 +-
 src/pages/selectSchedule/types.ts             |   7 +
 src/pages/selectSchedule/utils.ts             |  12 ++
 src/utils/apis/useGetOverallTimetable.ts      |  56 ++++++
 src/utils/apis/useGetTimetable.ts             |   6 +-
 14 files changed, 270 insertions(+), 185 deletions(-)
 create mode 100644 src/pages/legacy/overallSchedule/OverallSchedule.tsx
 rename src/pages/{OverallSchedule => legacy/overallSchedule}/components/Column.tsx (100%)
 rename src/pages/{OverallSchedule => legacy/overallSchedule}/components/Row.tsx (100%)
 rename src/pages/{OverallSchedule => legacy/overallSchedule}/components/TimeTable.tsx (100%)
 rename src/pages/{OverallSchedule => legacy/overallSchedule}/utils/getFormattedAvailableDateTimes.ts (100%)
 rename src/pages/{OverallSchedule => legacy/overallSchedule}/utils/setUserNames.ts (100%)
 create mode 100644 src/utils/apis/useGetOverallTimetable.ts

diff --git a/src/components/timetableComponents/context.ts b/src/components/timetableComponents/context.ts
index 0d984c5b..d91b1e6b 100644
--- a/src/components/timetableComponents/context.ts
+++ b/src/components/timetableComponents/context.ts
@@ -1,17 +1,31 @@
 import { createContext, useContext } from 'react';
 
-export interface SlotInfoType {
+interface BaseSlotType {
   date: string;
   startSlot: string;
   endSlot: string;
+}
+
+/**
+ * desc 가능시간, 우선순위 테이블에 사용되는 Slot Type
+ */
+export interface SelectSlotType extends BaseSlotType {
   priority: 0 | 1 | 2 | 3;
 }
+
+/**
+ * desc 종합일정시간표 테이블에 사용되는 Slot Type
+ */
+export interface OverallSlotType extends BaseSlotType {
+  userNames: string[];
+  colorLevel: 1 | 2 | 3 | 4;
+}
 export interface SelectedSlotType {
-  [key: number]: SlotInfoType;
+  [key: number]: SelectSlotType | OverallSlotType;
 }
 
 type TimetableContextType = {
-  startSlot?: string;
+  startSlot: string | undefined;
   setStartSlot: (startSlot?: string) => void;
   selectedSlots: SelectedSlotType;
   setSelectedSlots: (selectedSlots: SelectedSlotType) => void;
diff --git a/src/pages/OverallSchedule/OverallSchedule.tsx b/src/pages/OverallSchedule/OverallSchedule.tsx
index e19b2805..4646e05f 100644
--- a/src/pages/OverallSchedule/OverallSchedule.tsx
+++ b/src/pages/OverallSchedule/OverallSchedule.tsx
@@ -1,165 +1,10 @@
-import React, { useEffect, useState } from 'react';
-import { availableDatesAtom, preferTimesAtom, timeSlotUserNameAtom } from 'atoms/atom';
-import { useRecoilState, useRecoilValue } from 'recoil';
-
-import LoadingPage from 'pages/errorLoading/LoadingPage';
-import { OverallScheduleData } from 'src/types/overallScheduleType';
-import Text from 'components/atomComponents/Text';
-import TimeTable from './components/TimeTable';
-import { availableScheduleOptionApi } from 'utils/apis/legacy/availbleScheduleOptionApi';
-import { getFormattedAvailableDateTimes } from './utils/getFormattedAvailableDateTimes';
-import { overallScheduleApi } from 'utils/apis/legacy/overallScheduleApi';
-import { styled } from 'styled-components';
-import { theme } from 'styles/theme';
 import { useParams } from 'react-router-dom';
+import { useGetOverallTimetable } from 'utils/apis/useGetOverallTimeTable';
 
-const OverallSchedule = () => {
+function OverallSchedule() {
   const { meetingId } = useParams();
-  const [overallScheduleData, setOverallScheduleData] = useState<OverallScheduleData>();
-
-  const [availableDates, setAvailableDates] = useRecoilState(availableDatesAtom);
-
-  const [preferTimes, setPreferTimes] = useRecoilState(preferTimesAtom);
-
-  const timeSlotUserNames = useRecoilValue(timeSlotUserNameAtom);
-
-  const [memberCount, setMemberCount] = useState<number>(0);
-  const [totalUserNames, setTotalUserNames] = useState<string[]>();
-
-  const getAvailableScheduleOption = async () => {
-    try {
-      const { data } = await availableScheduleOptionApi(meetingId);
-      setAvailableDates(data.data.availableDates);
-      setPreferTimes(data.data.preferTimes);
-    } catch (err) {
-      console.log(err);
-    }
-  };
-
-
-  const getOverallSchedule = async () => {
-    try {
-      const result = await overallScheduleApi(meetingId);
-      const { data } = result.data;
-      const uniqueData = [...new Set(data.totalUserNames)];
-      setOverallScheduleData(data);
-      setMemberCount(data.memberCount);
-      setTotalUserNames(uniqueData);
-    } catch (err) {
-      console.log(err);
-    }
-  };
-
-  useEffect(() => {
-    getAvailableScheduleOption();
-    getOverallSchedule();
-  }, []);
-
-  const formattedAvailableDateTimes =
-  overallScheduleData && getFormattedAvailableDateTimes(overallScheduleData);
-
-  return (
-    <OverallScheduleWrapper>
-      {overallScheduleData ? (
-        <>
-          <TextOneLine>
-            <Text font={'title1'} color={`${theme.colors.white}`}>
-              현재까지&nbsp;
-            </Text>
-            <Text font={'title1'} color={`${theme.colors.sub1}`}>
-              {memberCount.toString()}명
-            </Text>
-            <Text font={'title1'} color={`${theme.colors.white}`}>
-              이 입력했어요
-            </Text>
-          </TextOneLine>
-          <TotalUserNames>
-            {totalUserNames &&
-              totalUserNames.map((name, idx) => (
-                <Text key={idx + name} font={'body4'} color={`${theme.colors.grey5}`}>
-                  {name}
-                  {idx !== totalUserNames.length - 1 ? ',' : ''}&nbsp;
-                </Text>
-              ))}
-          </TotalUserNames>
-          <TimeTable
-            selectedSchedule={formattedAvailableDateTimes?.availableDateTimes}
-            availableDates={availableDates}
-            preferTimes={preferTimes}
-            scheduleType="available"
-          />
-          <UserNameWrapper>
-            {!timeSlotUserNames ? (
-              <TextTwoLine>
-              <Text font={'body4'} color={`${theme.colors.grey5}`}>
-                블럭을 선택하면 해당 시간대에 참여가능한
-              </Text>
-              <Text font={'body4'} color={`${theme.colors.grey5}`}>
-                인원을 확인할 수 있어요
-              </Text>
-              </TextTwoLine>
-            ) : (
-              timeSlotUserNames.map((name, idx) => (
-                <Text key={idx + name} font={'body2'} color={`${theme.colors.grey2}`}>
-                  {name}
-                  {idx !== timeSlotUserNames.length - 1 ? ',' : ''}&nbsp;
-                </Text>
-              ))
-            )}
-          </UserNameWrapper>
-        </>
-      ) : (
-        <LoadingWrapper>
-          <LoadingPage />
-        </LoadingWrapper>
-      )}
-    </OverallScheduleWrapper>
-  );
-};
+  const { data, isLoading } = useGetOverallTimetable(meetingId);
+  return <div>OverallSchedule</div>;
+}
 
 export default OverallSchedule;
-
-const UserNameWrapper = styled.aside`
-  display: flex;
-  position: fixed;
-  bottom: 4.4rem;
-  flex-wrap: wrap;
-  justify-content: center;
-  border: 1px solid ${({ theme }) => theme.colors.grey5};
-  border-radius: 0.8rem;
-  background: ${({ theme }) => theme.colors.grey9};
-  width: 33.5rem;
-  min-height: 8.3rem;
-  text-align: center;
-  color: ${({ theme }) => theme.colors.white};
-`;
-
-const OverallScheduleWrapper = styled.main`
-  margin-bottom: 16.1rem;
-`;
-
-const TextOneLine = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  margin-top: 3.7rem;
-  width: 100%;
-`;
-
-const TotalUserNames = styled.div`
-  display: flex;
-  margin-top: 1.2rem;
-  margin-bottom: 2.4rem;
-`;
-
-const LoadingWrapper = styled.div`
-  position: relative;
-  top: 25rem;
-  width: 100%;
-`;
-
-const TextTwoLine = styled.div`
-  display:flex;
-  flex-direction:column;
-  align-items: center;
-  justify-content:center;
-`
\ No newline at end of file
diff --git a/src/pages/legacy/overallSchedule/OverallSchedule.tsx b/src/pages/legacy/overallSchedule/OverallSchedule.tsx
new file mode 100644
index 00000000..e19b2805
--- /dev/null
+++ b/src/pages/legacy/overallSchedule/OverallSchedule.tsx
@@ -0,0 +1,165 @@
+import React, { useEffect, useState } from 'react';
+import { availableDatesAtom, preferTimesAtom, timeSlotUserNameAtom } from 'atoms/atom';
+import { useRecoilState, useRecoilValue } from 'recoil';
+
+import LoadingPage from 'pages/errorLoading/LoadingPage';
+import { OverallScheduleData } from 'src/types/overallScheduleType';
+import Text from 'components/atomComponents/Text';
+import TimeTable from './components/TimeTable';
+import { availableScheduleOptionApi } from 'utils/apis/legacy/availbleScheduleOptionApi';
+import { getFormattedAvailableDateTimes } from './utils/getFormattedAvailableDateTimes';
+import { overallScheduleApi } from 'utils/apis/legacy/overallScheduleApi';
+import { styled } from 'styled-components';
+import { theme } from 'styles/theme';
+import { useParams } from 'react-router-dom';
+
+const OverallSchedule = () => {
+  const { meetingId } = useParams();
+  const [overallScheduleData, setOverallScheduleData] = useState<OverallScheduleData>();
+
+  const [availableDates, setAvailableDates] = useRecoilState(availableDatesAtom);
+
+  const [preferTimes, setPreferTimes] = useRecoilState(preferTimesAtom);
+
+  const timeSlotUserNames = useRecoilValue(timeSlotUserNameAtom);
+
+  const [memberCount, setMemberCount] = useState<number>(0);
+  const [totalUserNames, setTotalUserNames] = useState<string[]>();
+
+  const getAvailableScheduleOption = async () => {
+    try {
+      const { data } = await availableScheduleOptionApi(meetingId);
+      setAvailableDates(data.data.availableDates);
+      setPreferTimes(data.data.preferTimes);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+
+  const getOverallSchedule = async () => {
+    try {
+      const result = await overallScheduleApi(meetingId);
+      const { data } = result.data;
+      const uniqueData = [...new Set(data.totalUserNames)];
+      setOverallScheduleData(data);
+      setMemberCount(data.memberCount);
+      setTotalUserNames(uniqueData);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  useEffect(() => {
+    getAvailableScheduleOption();
+    getOverallSchedule();
+  }, []);
+
+  const formattedAvailableDateTimes =
+  overallScheduleData && getFormattedAvailableDateTimes(overallScheduleData);
+
+  return (
+    <OverallScheduleWrapper>
+      {overallScheduleData ? (
+        <>
+          <TextOneLine>
+            <Text font={'title1'} color={`${theme.colors.white}`}>
+              현재까지&nbsp;
+            </Text>
+            <Text font={'title1'} color={`${theme.colors.sub1}`}>
+              {memberCount.toString()}명
+            </Text>
+            <Text font={'title1'} color={`${theme.colors.white}`}>
+              이 입력했어요
+            </Text>
+          </TextOneLine>
+          <TotalUserNames>
+            {totalUserNames &&
+              totalUserNames.map((name, idx) => (
+                <Text key={idx + name} font={'body4'} color={`${theme.colors.grey5}`}>
+                  {name}
+                  {idx !== totalUserNames.length - 1 ? ',' : ''}&nbsp;
+                </Text>
+              ))}
+          </TotalUserNames>
+          <TimeTable
+            selectedSchedule={formattedAvailableDateTimes?.availableDateTimes}
+            availableDates={availableDates}
+            preferTimes={preferTimes}
+            scheduleType="available"
+          />
+          <UserNameWrapper>
+            {!timeSlotUserNames ? (
+              <TextTwoLine>
+              <Text font={'body4'} color={`${theme.colors.grey5}`}>
+                블럭을 선택하면 해당 시간대에 참여가능한
+              </Text>
+              <Text font={'body4'} color={`${theme.colors.grey5}`}>
+                인원을 확인할 수 있어요
+              </Text>
+              </TextTwoLine>
+            ) : (
+              timeSlotUserNames.map((name, idx) => (
+                <Text key={idx + name} font={'body2'} color={`${theme.colors.grey2}`}>
+                  {name}
+                  {idx !== timeSlotUserNames.length - 1 ? ',' : ''}&nbsp;
+                </Text>
+              ))
+            )}
+          </UserNameWrapper>
+        </>
+      ) : (
+        <LoadingWrapper>
+          <LoadingPage />
+        </LoadingWrapper>
+      )}
+    </OverallScheduleWrapper>
+  );
+};
+
+export default OverallSchedule;
+
+const UserNameWrapper = styled.aside`
+  display: flex;
+  position: fixed;
+  bottom: 4.4rem;
+  flex-wrap: wrap;
+  justify-content: center;
+  border: 1px solid ${({ theme }) => theme.colors.grey5};
+  border-radius: 0.8rem;
+  background: ${({ theme }) => theme.colors.grey9};
+  width: 33.5rem;
+  min-height: 8.3rem;
+  text-align: center;
+  color: ${({ theme }) => theme.colors.white};
+`;
+
+const OverallScheduleWrapper = styled.main`
+  margin-bottom: 16.1rem;
+`;
+
+const TextOneLine = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 3.7rem;
+  width: 100%;
+`;
+
+const TotalUserNames = styled.div`
+  display: flex;
+  margin-top: 1.2rem;
+  margin-bottom: 2.4rem;
+`;
+
+const LoadingWrapper = styled.div`
+  position: relative;
+  top: 25rem;
+  width: 100%;
+`;
+
+const TextTwoLine = styled.div`
+  display:flex;
+  flex-direction:column;
+  align-items: center;
+  justify-content:center;
+`
\ No newline at end of file
diff --git a/src/pages/OverallSchedule/components/Column.tsx b/src/pages/legacy/overallSchedule/components/Column.tsx
similarity index 100%
rename from src/pages/OverallSchedule/components/Column.tsx
rename to src/pages/legacy/overallSchedule/components/Column.tsx
diff --git a/src/pages/OverallSchedule/components/Row.tsx b/src/pages/legacy/overallSchedule/components/Row.tsx
similarity index 100%
rename from src/pages/OverallSchedule/components/Row.tsx
rename to src/pages/legacy/overallSchedule/components/Row.tsx
diff --git a/src/pages/OverallSchedule/components/TimeTable.tsx b/src/pages/legacy/overallSchedule/components/TimeTable.tsx
similarity index 100%
rename from src/pages/OverallSchedule/components/TimeTable.tsx
rename to src/pages/legacy/overallSchedule/components/TimeTable.tsx
diff --git a/src/pages/OverallSchedule/utils/getFormattedAvailableDateTimes.ts b/src/pages/legacy/overallSchedule/utils/getFormattedAvailableDateTimes.ts
similarity index 100%
rename from src/pages/OverallSchedule/utils/getFormattedAvailableDateTimes.ts
rename to src/pages/legacy/overallSchedule/utils/getFormattedAvailableDateTimes.ts
diff --git a/src/pages/OverallSchedule/utils/setUserNames.ts b/src/pages/legacy/overallSchedule/utils/setUserNames.ts
similarity index 100%
rename from src/pages/OverallSchedule/utils/setUserNames.ts
rename to src/pages/legacy/overallSchedule/utils/setUserNames.ts
diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx
index 9884bdf4..a9d5dde2 100644
--- a/src/pages/selectSchedule/SelectSchedule.tsx
+++ b/src/pages/selectSchedule/SelectSchedule.tsx
@@ -11,26 +11,12 @@ import Description from './components/Description';
 import SelectScheduleTable from './components/SelectScheduleTable';
 import { ScheduleStepContext } from './context';
 import { ScheduleStepType } from './types';
+import { TITLES } from './utils';
 
 function SelectSchedule() {
   const [scheduleStep, setScheduleStep] = useState<ScheduleStepType>('selectTimeSlot');
   const { meetingId } = useParams();
   const { data, isLoading } = useGetTimetable(meetingId);
-  interface TitlesType {
-    [key: string]: {
-      main: string;
-      sub?: string;
-    };
-  }
-  const titles: TitlesType = {
-    selectTimeSlot: {
-      main: '가능한 시간대를 등록해주세요',
-      sub: '시작시간과 종료시간을 터치하여 블럭을 생성해주세요',
-    },
-    selectPriority: {
-      main: '우선순위를 입력해주세요',
-    },
-  };
 
   return (
     <ScheduleStepContext.Provider value={{ scheduleStep, setScheduleStep }}>
@@ -46,8 +32,8 @@ function SelectSchedule() {
               />
             )}
             <TitleComponents
-              main={titles[scheduleStep].main}
-              sub={titles[scheduleStep].sub}
+              main={TITLES[scheduleStep].main}
+              sub={TITLES[scheduleStep].sub}
               padding={scheduleStep === 'selectTimeSlot' ? `0 0 2.6rem` : `4.4rem 0 3.2rem 0`}
             />
             <SelectScheduleTable
diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
index 007318f2..d11a4f24 100644
--- a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
+++ b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
@@ -4,7 +4,7 @@ import Text from 'components/atomComponents/Text';
 import { Circle1Ic, Circle2Ic, Circle3Ic, DropDownIc, DropUpIc } from 'components/Icon/icon';
 import {
   SelectedSlotType,
-  SlotInfoType,
+  SelectSlotType,
   useTimetableContext,
 } from 'components/timetableComponents/context';
 import { addMinutes } from 'components/timetableComponents/utils';
@@ -56,7 +56,7 @@ function PriorityDropdown() {
     }
   };
 
-  const handlePriority = (i: number, item: SlotInfoType, itemKey: string) => {
+  const handlePriority = (i: number, item: SelectSlotType, itemKey: string) => {
     let temp: 0 | 1 | 2 | 3 = 0;
     switch (i) {
       case 0:
diff --git a/src/pages/selectSchedule/types.ts b/src/pages/selectSchedule/types.ts
index de210574..54ceb704 100644
--- a/src/pages/selectSchedule/types.ts
+++ b/src/pages/selectSchedule/types.ts
@@ -5,3 +5,10 @@ import { ColumnStructure } from 'components/timetableComponents/types';
 export type ScheduleStepType = 'selectTimeSlot' | 'selectPriority';
 export type StepSlotsType = { [key in ScheduleStepType]: (props: ColumnStructure) => ReactNode };
 export type StepbottomItemsType = { [key in ScheduleStepType]: ReactNode };
+
+export interface TitlesType {
+  [key: string]: {
+    main: string;
+    sub?: string;
+  };
+}
diff --git a/src/pages/selectSchedule/utils.ts b/src/pages/selectSchedule/utils.ts
index b69239ca..65f56b72 100644
--- a/src/pages/selectSchedule/utils.ts
+++ b/src/pages/selectSchedule/utils.ts
@@ -1,6 +1,8 @@
 import { SelectedSlotType } from 'components/timetableComponents/context';
 import { addMinutes } from 'components/timetableComponents/utils';
 
+import { TitlesType } from './types';
+
 export const DURATION = {
   HALF: '30분',
   HOUR: '1시간',
@@ -16,6 +18,16 @@ export const PLACE = {
   UNDEFINED: undefined,
 } as const;
 
+export const TITLES: TitlesType = {
+  selectTimeSlot: {
+    main: '가능한 시간대를 등록해주세요',
+    sub: '시작시간과 종료시간을 터치하여 블럭을 생성해주세요',
+  },
+  selectPriority: {
+    main: '우선순위를 입력해주세요',
+  },
+} as const;
+
 /**
  *
  * @desc 선택된 슬롯들의 우선순위를 0으로 초기화하는 함수
diff --git a/src/utils/apis/useGetOverallTimetable.ts b/src/utils/apis/useGetOverallTimetable.ts
new file mode 100644
index 00000000..83bd5da8
--- /dev/null
+++ b/src/utils/apis/useGetOverallTimetable.ts
@@ -0,0 +1,56 @@
+import { useQuery } from '@tanstack/react-query';
+import { isAxiosError } from 'axios';
+import { useNavigate } from 'react-router-dom';
+
+import { authClient, client } from './axios';
+
+interface Date {
+  month: string;
+  day: string;
+  dayOfWeek: string;
+}
+
+interface TimeSlot {
+  time: string;
+  userNames: string[];
+  colorLevel: 1 | 2 | 3 | 4 | 5;
+}
+
+interface AvailableDateTime extends Date {
+  timeSlots: TimeSlot[];
+}
+
+interface getOverallTimetableResponse {
+  data: {
+    memberCount: number;
+    totalUserNames: string[];
+    availableDateTimes: AvailableDateTime[];
+  };
+}
+
+const getOverallTimetable = async (meetingId: string) => {
+  try {
+    const res = await authClient.get<getOverallTimetableResponse>(
+      `/meeting/${meetingId}/timetable`,
+    );
+    return res.data.data;
+  } catch (err) {
+    if (isAxiosError(err) && err.response) {
+      throw new Error(err.response.data.message);
+    }
+  }
+};
+
+export const useGetOverallTimetable = (meetingId?: string) => {
+  const navigate = useNavigate();
+  if (meetingId === undefined) {
+    navigate('/error');
+    throw new Error('잘못된 회의 아이디입니다.');
+  }
+  const { data, isLoading } = useQuery({
+    queryKey: ['getOverallTimetable', meetingId],
+    queryFn: () => getOverallTimetable(meetingId),
+  });
+
+  return { data, isLoading };
+};
diff --git a/src/utils/apis/useGetTimetable.ts b/src/utils/apis/useGetTimetable.ts
index be7f4ea0..eb6ae73e 100644
--- a/src/utils/apis/useGetTimetable.ts
+++ b/src/utils/apis/useGetTimetable.ts
@@ -1,9 +1,9 @@
+import { useQuery } from '@tanstack/react-query';
+import { isAxiosError } from 'axios';
 import { DURATION, PLACE } from 'pages/selectSchedule/utils';
+import { useNavigate } from 'react-router-dom';
 
 import { client } from './axios';
-import { isAxiosError } from 'axios';
-import { useNavigate } from 'react-router-dom';
-import { useQuery } from '@tanstack/react-query';
 
 interface Date {
   month: string;

From 4475608645e8ca024b86b4df9b8d20b43a1ef71f Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Mon, 24 Jun 2024 01:44:36 +0900
Subject: [PATCH 53/62] =?UTF-8?q?feat:=20Timetable=20Context(->Select=20Co?=
 =?UTF-8?q?ntext)=EB=A5=BC=20Timetable=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=EC=97=90=EC=84=9C=20=EB=B6=84=EB=A6=AC=ED=95=98?=
 =?UTF-8?q?=EC=97=AC=20SelectSchedule=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=EC=97=90=20=EC=9D=98=EC=A1=B4=EC=84=B1=20=EB=B6=80?=
 =?UTF-8?q?=EC=97=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/moleculesComponents/Header.tsx |  2 +-
 .../timetableComponents/Timetable.tsx         | 19 ++------
 src/components/timetableComponents/context.ts | 47 -------------------
 src/pages/OverallSchedule/OverallSchedule.tsx | 27 +++++++++--
 .../components/OverallScheduleSlots.tsx       |  7 +++
 .../legacy/selectSchedule/SelectModal.tsx     |  4 +-
 src/pages/selectSchedule/SelectSchedule.tsx   | 46 +++++++++---------
 .../components/SelectScheduleTable.tsx        | 23 +++++++--
 .../selectPriority/PriorityDropdown.tsx       |  8 ++--
 .../selectPriority/PrioritySlots.tsx          |  9 ++--
 .../selectTimeSlot/SelectionSlots.tsx         |  7 +--
 .../components/selectTimeSlot/TimeSlotCta.tsx |  6 +--
 .../selectTimeSlot/hooks/useSlotSelection.ts  |  4 +-
 .../useScheduleStepContext.ts}                |  2 +-
 .../contexts/useSelectContext.ts              | 34 ++++++++++++++
 src/types/createAvailableSchduleType.ts       |  2 +-
 ...lTimetable.ts => useGetOverallSchedule.ts} | 16 +++----
 17 files changed, 143 insertions(+), 120 deletions(-)
 delete mode 100644 src/components/timetableComponents/context.ts
 create mode 100644 src/pages/OverallSchedule/components/OverallScheduleSlots.tsx
 rename src/pages/selectSchedule/{context.ts => contexts/useScheduleStepContext.ts} (92%)
 create mode 100644 src/pages/selectSchedule/contexts/useSelectContext.ts
 rename src/utils/apis/{useGetOverallTimetable.ts => useGetOverallSchedule.ts} (67%)

diff --git a/src/components/moleculesComponents/Header.tsx b/src/components/moleculesComponents/Header.tsx
index ea3d6242..0ac32bf3 100644
--- a/src/components/moleculesComponents/Header.tsx
+++ b/src/components/moleculesComponents/Header.tsx
@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction, useState } from 'react';
 
 import Text from 'components/atomComponents/Text';
 import { BackIc, ExitIc, HambergerIc, LinkIc, MainLogoIc } from 'components/Icon/icon';
-import { useScheduleStepContext } from 'pages/selectSchedule/context';
+import { useScheduleStepContext } from 'pages/selectSchedule/contexts/useScheduleStepContext';
 import { ScheduleStepType } from 'pages/selectSchedule/types';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { useParams } from 'react-router';
diff --git a/src/components/timetableComponents/Timetable.tsx b/src/components/timetableComponents/Timetable.tsx
index 81bf49fd..0eee98f5 100644
--- a/src/components/timetableComponents/Timetable.tsx
+++ b/src/components/timetableComponents/Timetable.tsx
@@ -1,8 +1,8 @@
-import { ReactNode, useState } from 'react';
+import { ReactNode } from 'react';
 
 import styled from 'styled-components';
+import { getOverallScheduleResponse } from 'utils/apis/useGetOverallSchedule';
 
-import { SelectedSlotType, TimetableContext } from './context';
 import DateTitle from './parts/ColumnTitle';
 import SlotTitle from './parts/SlotTitle';
 import { ColumnStructure, DateType } from './types';
@@ -12,23 +12,14 @@ interface TimetableProps {
   availableDates: DateType[];
   children: (props: ColumnStructure) => ReactNode;
   bottomItem?: ReactNode;
+  dataOverallSchedule?: getOverallScheduleResponse['data'];
 }
 
 function Timetable({ timeSlots, availableDates, children, bottomItem }: TimetableProps) {
-  const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
-  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({});
-
   const emptyDates = Array.from({ length: 7 - availableDates.length }, (_, i) => `empty${i + 1}`);
 
   return (
-    <TimetableContext.Provider
-      value={{
-        startSlot,
-        setStartSlot,
-        selectedSlots,
-        setSelectedSlots,
-      }}
-    >
+    <>
       <TimetableWrapper>
         <SlotTitle timeSlots={timeSlots} />
         <TableWrapper>
@@ -43,7 +34,7 @@ function Timetable({ timeSlots, availableDates, children, bottomItem }: Timetabl
         </TableWrapper>
       </TimetableWrapper>
       {bottomItem}
-    </TimetableContext.Provider>
+    </>
   );
 }
 
diff --git a/src/components/timetableComponents/context.ts b/src/components/timetableComponents/context.ts
deleted file mode 100644
index d91b1e6b..00000000
--- a/src/components/timetableComponents/context.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { createContext, useContext } from 'react';
-
-interface BaseSlotType {
-  date: string;
-  startSlot: string;
-  endSlot: string;
-}
-
-/**
- * desc 가능시간, 우선순위 테이블에 사용되는 Slot Type
- */
-export interface SelectSlotType extends BaseSlotType {
-  priority: 0 | 1 | 2 | 3;
-}
-
-/**
- * desc 종합일정시간표 테이블에 사용되는 Slot Type
- */
-export interface OverallSlotType extends BaseSlotType {
-  userNames: string[];
-  colorLevel: 1 | 2 | 3 | 4;
-}
-export interface SelectedSlotType {
-  [key: number]: SelectSlotType | OverallSlotType;
-}
-
-type TimetableContextType = {
-  startSlot: string | undefined;
-  setStartSlot: (startSlot?: string) => void;
-  selectedSlots: SelectedSlotType;
-  setSelectedSlots: (selectedSlots: SelectedSlotType) => void;
-};
-
-export const TimetableContext = createContext<TimetableContextType>({
-  startSlot: undefined,
-  setStartSlot: () => undefined,
-  selectedSlots: {},
-  setSelectedSlots: () => undefined,
-});
-
-export function useTimetableContext() {
-  const context = useContext(TimetableContext);
-  if (context == null) {
-    throw new Error('TimetableContext Error');
-  }
-  return context;
-}
diff --git a/src/pages/OverallSchedule/OverallSchedule.tsx b/src/pages/OverallSchedule/OverallSchedule.tsx
index 4646e05f..fdae5055 100644
--- a/src/pages/OverallSchedule/OverallSchedule.tsx
+++ b/src/pages/OverallSchedule/OverallSchedule.tsx
@@ -1,10 +1,31 @@
+import Timetable from 'components/timetableComponents/Timetable';
+import { ColumnStructure } from 'components/timetableComponents/types';
+import { getAvailableTimes } from 'components/timetableComponents/utils';
 import { useParams } from 'react-router-dom';
-import { useGetOverallTimetable } from 'utils/apis/useGetOverallTimeTable';
+import { useGetOverallSchedule } from 'utils/apis/useGetOverallSchedule';
+import { useGetTimetable } from 'utils/apis/useGetTimetable';
 
 function OverallSchedule() {
   const { meetingId } = useParams();
-  const { data, isLoading } = useGetOverallTimetable(meetingId);
-  return <div>OverallSchedule</div>;
+  const { data: dataTimetable, isLoading: isLoadingTimetable } = useGetTimetable(meetingId);
+  const { data: dataOverallSchedule, isLoading: isLoadingOverallSchedule } = useGetOverallSchedule(
+    meetingId,
+  );
+  return (
+    <>
+      {!isLoadingTimetable &&
+        !isLoadingOverallSchedule &&
+        dataTimetable &&
+        dataOverallSchedule && (
+          <Timetable
+            timeSlots={getAvailableTimes(dataTimetable.preferTimes[0])}
+            availableDates={dataTimetable.availableDates}
+          >
+            {({ date, timeSlots }: ColumnStructure) => <div>OverallScheduleSlots</div>}
+          </Timetable>
+        )}
+    </>
+  );
 }
 
 export default OverallSchedule;
diff --git a/src/pages/OverallSchedule/components/OverallScheduleSlots.tsx b/src/pages/OverallSchedule/components/OverallScheduleSlots.tsx
new file mode 100644
index 00000000..b62e6159
--- /dev/null
+++ b/src/pages/OverallSchedule/components/OverallScheduleSlots.tsx
@@ -0,0 +1,7 @@
+import { ColumnStructure } from 'components/timetableComponents/types';
+
+function OverallScheduleSlots({ date, timeSlots }: ColumnStructure) {
+  return <div>OverallScheduleSlots</div>;
+}
+
+export default OverallScheduleSlots;
diff --git a/src/pages/legacy/selectSchedule/SelectModal.tsx b/src/pages/legacy/selectSchedule/SelectModal.tsx
index 145a9e65..484f8e8e 100644
--- a/src/pages/legacy/selectSchedule/SelectModal.tsx
+++ b/src/pages/legacy/selectSchedule/SelectModal.tsx
@@ -2,7 +2,7 @@ import { userNameAtom } from 'atoms/atom';
 import { isAxiosError } from 'axios';
 import Text from 'components/atomComponents/Text';
 import { ExitIc } from 'components/Icon/icon';
-import { useTimetableContext } from 'components/timetableComponents/context';
+import { useSelectContext } from 'pages/selectSchedule/contexts/useSelectContext';
 import { formatHostScheduleScheme, formatMemberScheduleScheme } from 'pages/selectSchedule/utils';
 import { useNavigate, useParams } from 'react-router';
 import { useRecoilValue } from 'recoil';
@@ -15,7 +15,7 @@ interface ModalProps {
 }
 
 function SelectModal({ setShowModal }: ModalProps) {
-  const { selectedSlots } = useTimetableContext();
+  const { selectedSlots } = useSelectContext();
   const userName = useRecoilValue(userNameAtom);
 
   const navigate = useNavigate();
diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx
index a9d5dde2..7be6912b 100644
--- a/src/pages/selectSchedule/SelectSchedule.tsx
+++ b/src/pages/selectSchedule/SelectSchedule.tsx
@@ -9,7 +9,7 @@ import { useGetTimetable } from 'utils/apis/useGetTimetable';
 
 import Description from './components/Description';
 import SelectScheduleTable from './components/SelectScheduleTable';
-import { ScheduleStepContext } from './context';
+import { ScheduleStepContext } from './contexts/useScheduleStepContext';
 import { ScheduleStepType } from './types';
 import { TITLES } from './utils';
 
@@ -20,28 +20,30 @@ function SelectSchedule() {
 
   return (
     <ScheduleStepContext.Provider value={{ scheduleStep, setScheduleStep }}>
-      {!isLoading &&
-        data && (
-          <SelectScheduleWrapper>
-            <Header position="schedule" />
-            {scheduleStep === 'selectTimeSlot' && (
-              <Description
-                duration={data.duration}
-                place={data.place}
-                placeDetail={data.placeDetail}
+      <SelectScheduleWrapper>
+        <Header position="schedule" />
+        {!isLoading &&
+          data && (
+            <>
+              {scheduleStep === 'selectTimeSlot' && (
+                <Description
+                  duration={data.duration}
+                  place={data.place}
+                  placeDetail={data.placeDetail}
+                />
+              )}
+              <TitleComponents
+                main={TITLES[scheduleStep].main}
+                sub={TITLES[scheduleStep].sub}
+                padding={scheduleStep === 'selectTimeSlot' ? `0 0 2.6rem` : `4.4rem 0 3.2rem 0`}
               />
-            )}
-            <TitleComponents
-              main={TITLES[scheduleStep].main}
-              sub={TITLES[scheduleStep].sub}
-              padding={scheduleStep === 'selectTimeSlot' ? `0 0 2.6rem` : `4.4rem 0 3.2rem 0`}
-            />
-            <SelectScheduleTable
-              timeSlots={getAvailableTimes(data.preferTimes[0])}
-              availableDates={data.availableDates}
-            />
-          </SelectScheduleWrapper>
-        )}
+              <SelectScheduleTable
+                timeSlots={getAvailableTimes(data.preferTimes[0])}
+                availableDates={data.availableDates}
+              />
+            </>
+          )}
+      </SelectScheduleWrapper>
     </ScheduleStepContext.Provider>
   );
 }
diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
index 65492546..cc629c04 100644
--- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx
+++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 import Timetable from 'components/timetableComponents/Timetable';
 import { ColumnStructure, TimetableStructure } from 'components/timetableComponents/types';
 
@@ -6,10 +8,14 @@ import PriorityDropdown from './selectPriority/PriorityDropdown';
 import PrioritySlots from './selectPriority/PrioritySlots';
 import SelectionSlots from './selectTimeSlot/SelectionSlots';
 import TimeSlotCta from './selectTimeSlot/TimeSlotCta';
-import { useScheduleStepContext } from '../context';
+import { useScheduleStepContext } from '../contexts/useScheduleStepContext';
+import { SelectContext, SelectedSlotType } from '../contexts/useSelectContext';
 import { StepSlotsType, StepbottomItemsType } from '../types';
 
 function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure) {
+  const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
+  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({});
+
   const { scheduleStep } = useScheduleStepContext();
 
   const stepSlots: StepSlotsType = {
@@ -34,9 +40,18 @@ function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure)
   const bottomItem = bottomItems[scheduleStep];
 
   return (
-    <Timetable timeSlots={timeSlots} availableDates={availableDates} bottomItem={bottomItem}>
-      {stepSlot}
-    </Timetable>
+    <SelectContext.Provider
+      value={{
+        startSlot,
+        setStartSlot,
+        selectedSlots,
+        setSelectedSlots,
+      }}
+    >
+      <Timetable timeSlots={timeSlots} availableDates={availableDates} bottomItem={bottomItem}>
+        {stepSlot}
+      </Timetable>
+    </SelectContext.Provider>
   );
 }
 
diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
index d11a4f24..10a317a5 100644
--- a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
+++ b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
@@ -2,12 +2,12 @@ import { useState } from 'react';
 
 import Text from 'components/atomComponents/Text';
 import { Circle1Ic, Circle2Ic, Circle3Ic, DropDownIc, DropUpIc } from 'components/Icon/icon';
+import { addMinutes } from 'components/timetableComponents/utils';
 import {
   SelectedSlotType,
   SelectSlotType,
-  useTimetableContext,
-} from 'components/timetableComponents/context';
-import { addMinutes } from 'components/timetableComponents/utils';
+  useSelectContext,
+} from 'pages/selectSchedule/contexts/useSelectContext';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
 
@@ -17,7 +17,7 @@ import { theme } from 'styles/theme';
  */
 
 function PriorityDropdown() {
-  const { selectedSlots, setSelectedSlots } = useTimetableContext();
+  const { selectedSlots, setSelectedSlots } = useSelectContext();
   const [timeSelect, setTimeSelect] = useState([false, false, false]);
 
   const formatDate = (date: string) => {
diff --git a/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx b/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx
index 23187136..1dd0c809 100644
--- a/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx
+++ b/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx
@@ -1,11 +1,12 @@
-import { ColumnStructure } from 'components/timetableComponents/types';
-import Slot from '../../../../components/timetableComponents/parts/Slot';
 import Text from 'components/atomComponents/Text';
+import { ColumnStructure } from 'components/timetableComponents/types';
+import { useSelectContext } from 'pages/selectSchedule/contexts/useSelectContext';
 import { theme } from 'styles/theme';
-import { useTimetableContext } from '../../../../components/timetableComponents/context';
+
+import Slot from '../../../../components/timetableComponents/parts/Slot';
 
 function PrioritySlots({ date, timeSlots }: ColumnStructure) {
-  const { selectedSlots } = useTimetableContext();
+  const { selectedSlots } = useSelectContext();
   const selectedSlotsPerDate = Object.entries(selectedSlots).filter(
     ([, slot]) => slot.date === date,
   );
diff --git a/src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx b/src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx
index b49bb142..6dbc16d9 100644
--- a/src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx
+++ b/src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx
@@ -1,11 +1,12 @@
 import { ColumnStructure } from 'components/timetableComponents/types';
-import Slot from '../../../../components/timetableComponents/parts/Slot';
+import { useSelectContext } from 'pages/selectSchedule/contexts/useSelectContext';
 import { theme } from 'styles/theme';
+
 import useSlotSeletion from './hooks/useSlotSelection';
-import { useTimetableContext } from '../../../../components/timetableComponents/context';
+import Slot from '../../../../components/timetableComponents/parts/Slot';
 
 function SelectionSlots({ date, timeSlots }: ColumnStructure) {
-  const { selectedSlots } = useTimetableContext();
+  const { selectedSlots } = useSelectContext();
   const selectedSlotsPerDate = Object.entries(selectedSlots).filter(
     ([, slot]) => slot.date === date,
   );
diff --git a/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx b/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx
index 6656907c..d021e1aa 100644
--- a/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx
+++ b/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx
@@ -1,12 +1,12 @@
 import Button from 'components/atomComponents/Button';
 import Text from 'components/atomComponents/Text';
-import { useTimetableContext } from 'components/timetableComponents/context';
-import { useScheduleStepContext } from 'pages/selectSchedule/context';
+import { useScheduleStepContext } from 'pages/selectSchedule/contexts/useScheduleStepContext';
+import { useSelectContext } from 'pages/selectSchedule/contexts/useSelectContext';
 import styled from 'styled-components';
 
 function TimeSlotCta() {
   const { setScheduleStep } = useScheduleStepContext();
-  const { selectedSlots } = useTimetableContext();
+  const { selectedSlots } = useSelectContext();
   const isValidSelection = Object.keys(selectedSlots).length !== 0;
   return (
     <BtnDim>
diff --git a/src/pages/selectSchedule/components/selectTimeSlot/hooks/useSlotSelection.ts b/src/pages/selectSchedule/components/selectTimeSlot/hooks/useSlotSelection.ts
index b4810c9e..3d269310 100644
--- a/src/pages/selectSchedule/components/selectTimeSlot/hooks/useSlotSelection.ts
+++ b/src/pages/selectSchedule/components/selectTimeSlot/hooks/useSlotSelection.ts
@@ -1,7 +1,7 @@
-import { useTimetableContext } from '../../../../../components/timetableComponents/context'
+import { useSelectContext } from 'pages/selectSchedule/contexts/useSelectContext';
 
 const useSlotSeletion = () => {
-    const {startSlot, setStartSlot, selectedSlots, setSelectedSlots} = useTimetableContext();
+    const {startSlot, setStartSlot, selectedSlots, setSelectedSlots} = useSelectContext();
 
     const handleSelectSlot = (targetSlot: string) => {
         setStartSlot(targetSlot);
diff --git a/src/pages/selectSchedule/context.ts b/src/pages/selectSchedule/contexts/useScheduleStepContext.ts
similarity index 92%
rename from src/pages/selectSchedule/context.ts
rename to src/pages/selectSchedule/contexts/useScheduleStepContext.ts
index a211ee8d..95ee9694 100644
--- a/src/pages/selectSchedule/context.ts
+++ b/src/pages/selectSchedule/contexts/useScheduleStepContext.ts
@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react';
 
-import { ScheduleStepType } from './types';
+import { ScheduleStepType } from '../types';
 
 interface ScheduleStepContextType {
   scheduleStep: ScheduleStepType;
diff --git a/src/pages/selectSchedule/contexts/useSelectContext.ts b/src/pages/selectSchedule/contexts/useSelectContext.ts
new file mode 100644
index 00000000..dd180135
--- /dev/null
+++ b/src/pages/selectSchedule/contexts/useSelectContext.ts
@@ -0,0 +1,34 @@
+import { createContext, useContext } from 'react';
+
+export interface SelectSlotType {
+  date: string;
+  startSlot?: string;
+  endSlot: string;
+  priority: number;
+}
+
+export interface SelectedSlotType {
+  [key: number]: SelectSlotType;
+}
+
+interface SelectContextType {
+  startSlot: string | undefined;
+  setStartSlot: (startSlot?: string) => void;
+  selectedSlots: SelectedSlotType;
+  setSelectedSlots: (selectedSlots: SelectedSlotType) => void;
+}
+
+export const SelectContext = createContext<SelectContextType>({
+  startSlot: undefined,
+  setStartSlot: () => undefined,
+  selectedSlots: {},
+  setSelectedSlots: () => undefined,
+});
+
+export function useSelectContext() {
+  const context = useContext(SelectContext);
+  if (context == null) {
+    throw new Error('SelectContext Error');
+  }
+  return context;
+}
diff --git a/src/types/createAvailableSchduleType.ts b/src/types/createAvailableSchduleType.ts
index a088bfcd..9f0d7e29 100644
--- a/src/types/createAvailableSchduleType.ts
+++ b/src/types/createAvailableSchduleType.ts
@@ -5,7 +5,7 @@ export interface HostAvailableSchduleRequestType {
   dayOfWeek: string;
   startTime: string;
   endTime: string;
-  priority: 0 | 1 | 2 | 3;
+  priority: number;
 }
 
 export interface HostAvailableScheduleResponseType {
diff --git a/src/utils/apis/useGetOverallTimetable.ts b/src/utils/apis/useGetOverallSchedule.ts
similarity index 67%
rename from src/utils/apis/useGetOverallTimetable.ts
rename to src/utils/apis/useGetOverallSchedule.ts
index 83bd5da8..bda6d889 100644
--- a/src/utils/apis/useGetOverallTimetable.ts
+++ b/src/utils/apis/useGetOverallSchedule.ts
@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { isAxiosError } from 'axios';
 import { useNavigate } from 'react-router-dom';
 
-import { authClient, client } from './axios';
+import { authClient } from './axios';
 
 interface Date {
   month: string;
@@ -20,7 +20,7 @@ interface AvailableDateTime extends Date {
   timeSlots: TimeSlot[];
 }
 
-interface getOverallTimetableResponse {
+export interface getOverallScheduleResponse {
   data: {
     memberCount: number;
     totalUserNames: string[];
@@ -28,11 +28,9 @@ interface getOverallTimetableResponse {
   };
 }
 
-const getOverallTimetable = async (meetingId: string) => {
+const getOverallSchedule = async (meetingId: string) => {
   try {
-    const res = await authClient.get<getOverallTimetableResponse>(
-      `/meeting/${meetingId}/timetable`,
-    );
+    const res = await authClient.get<getOverallScheduleResponse>(`/meeting/${meetingId}/timetable`);
     return res.data.data;
   } catch (err) {
     if (isAxiosError(err) && err.response) {
@@ -41,15 +39,15 @@ const getOverallTimetable = async (meetingId: string) => {
   }
 };
 
-export const useGetOverallTimetable = (meetingId?: string) => {
+export const useGetOverallSchedule = (meetingId?: string) => {
   const navigate = useNavigate();
   if (meetingId === undefined) {
     navigate('/error');
     throw new Error('잘못된 회의 아이디입니다.');
   }
   const { data, isLoading } = useQuery({
-    queryKey: ['getOverallTimetable', meetingId],
-    queryFn: () => getOverallTimetable(meetingId),
+    queryKey: ['getOverallSchedule', meetingId],
+    queryFn: () => getOverallSchedule(meetingId),
   });
 
   return { data, isLoading };

From 33d9b553accd5875c330b862bd5831a90a4fb459 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Mon, 24 Jun 2024 02:26:58 +0900
Subject: [PATCH 54/62] =?UTF-8?q?feat:=20=EC=A2=85=ED=95=A9=20=EC=9D=BC?=
 =?UTF-8?q?=EC=A0=95=20=EC=8B=9C=EA=B0=84=ED=91=9C=20=EA=B8=B0=EB=B3=B8=20?=
 =?UTF-8?q?UI=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/OverallSchedule/OverallSchedule.tsx | 33 +++++++++++++++--
 .../components/OverallScheduleSlots.tsx       | 35 +++++++++++++++++--
 src/utils/apis/useGetOverallSchedule.ts       |  6 ++--
 3 files changed, 67 insertions(+), 7 deletions(-)

diff --git a/src/pages/OverallSchedule/OverallSchedule.tsx b/src/pages/OverallSchedule/OverallSchedule.tsx
index fdae5055..0a12182f 100644
--- a/src/pages/OverallSchedule/OverallSchedule.tsx
+++ b/src/pages/OverallSchedule/OverallSchedule.tsx
@@ -2,15 +2,35 @@ import Timetable from 'components/timetableComponents/Timetable';
 import { ColumnStructure } from 'components/timetableComponents/types';
 import { getAvailableTimes } from 'components/timetableComponents/utils';
 import { useParams } from 'react-router-dom';
-import { useGetOverallSchedule } from 'utils/apis/useGetOverallSchedule';
+import {
+  AvailableDateTime,
+  TimeSlot,
+  useGetOverallSchedule,
+} from 'utils/apis/useGetOverallSchedule';
 import { useGetTimetable } from 'utils/apis/useGetTimetable';
 
+import OverallScheduleSlots from './components/OverallScheduleSlots';
+
 function OverallSchedule() {
   const { meetingId } = useParams();
   const { data: dataTimetable, isLoading: isLoadingTimetable } = useGetTimetable(meetingId);
   const { data: dataOverallSchedule, isLoading: isLoadingOverallSchedule } = useGetOverallSchedule(
     meetingId,
   );
+
+  const getAvailableTimesPerDate = (
+    availableDates: AvailableDateTime[],
+    date: string,
+  ): TimeSlot[] => {
+    const [month, day, dayOfWeek] = date.split('/');
+
+    const matchedDate = availableDates.find(
+      (date) => date.month === month && date.day === day && date.dayOfWeek === dayOfWeek,
+    );
+
+    return matchedDate ? matchedDate.timeSlots : [];
+  };
+
   return (
     <>
       {!isLoadingTimetable &&
@@ -21,7 +41,16 @@ function OverallSchedule() {
             timeSlots={getAvailableTimes(dataTimetable.preferTimes[0])}
             availableDates={dataTimetable.availableDates}
           >
-            {({ date, timeSlots }: ColumnStructure) => <div>OverallScheduleSlots</div>}
+            {({ date, timeSlots }: ColumnStructure) => (
+              <OverallScheduleSlots
+                date={date}
+                timeSlots={timeSlots}
+                availableSlotInfo={getAvailableTimesPerDate(
+                  dataOverallSchedule.availableDateTimes,
+                  date,
+                )}
+              />
+            )}
           </Timetable>
         )}
     </>
diff --git a/src/pages/OverallSchedule/components/OverallScheduleSlots.tsx b/src/pages/OverallSchedule/components/OverallScheduleSlots.tsx
index b62e6159..e779394e 100644
--- a/src/pages/OverallSchedule/components/OverallScheduleSlots.tsx
+++ b/src/pages/OverallSchedule/components/OverallScheduleSlots.tsx
@@ -1,7 +1,38 @@
+import Slot from 'components/timetableComponents/parts/Slot';
 import { ColumnStructure } from 'components/timetableComponents/types';
+import { theme } from 'styles/theme';
+import { TimeSlot } from 'utils/apis/useGetOverallSchedule';
 
-function OverallScheduleSlots({ date, timeSlots }: ColumnStructure) {
-  return <div>OverallScheduleSlots</div>;
+interface OverallScheduleSlotsProps extends ColumnStructure {
+  availableSlotInfo: TimeSlot[];
+}
+
+function OverallScheduleSlots({ date, timeSlots, availableSlotInfo }: OverallScheduleSlotsProps) {
+  const getTimeSlotStyle = (colorLevel: number) => {
+    const COLOR :{ [key : number]: string } = {
+      0: 'transparent',
+      1: theme.colors.level1,
+      2: theme.colors.level2,
+      3: theme.colors.level3,
+      4: theme.colors.level4,
+      5: theme.colors.level5,
+    };
+    return `
+      background-color: ${COLOR[colorLevel]};
+    `
+  }
+
+
+  return (
+    <>
+      {timeSlots.map((timeSlot) => {
+        const colorLevel = (availableSlotInfo.find((info) => info.time === timeSlot))?.colorLevel ?? 0;
+        const slotId = `${date}/${timeSlot}`;
+
+        return <Slot key={slotId} slotId={slotId} slotStyle={getTimeSlotStyle(colorLevel)}/>;
+      })}
+    </>
+  );
 }
 
 export default OverallScheduleSlots;
diff --git a/src/utils/apis/useGetOverallSchedule.ts b/src/utils/apis/useGetOverallSchedule.ts
index bda6d889..1e501114 100644
--- a/src/utils/apis/useGetOverallSchedule.ts
+++ b/src/utils/apis/useGetOverallSchedule.ts
@@ -10,13 +10,13 @@ interface Date {
   dayOfWeek: string;
 }
 
-interface TimeSlot {
+export interface TimeSlot {
   time: string;
   userNames: string[];
-  colorLevel: 1 | 2 | 3 | 4 | 5;
+  colorLevel: number;
 }
 
-interface AvailableDateTime extends Date {
+export interface AvailableDateTime extends Date {
   timeSlots: TimeSlot[];
 }
 

From 21e71906c84d3df23ac126f6ed10a416ed8716fc Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Mon, 24 Jun 2024 03:10:44 +0900
Subject: [PATCH 55/62] =?UTF-8?q?feat:=20=EC=A2=85=ED=95=A9=EC=9D=BC?=
 =?UTF-8?q?=EC=A0=95=EC=8B=9C=EA=B0=84=ED=91=9C=20=ED=81=B4=EB=A6=AD=20?=
 =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/OverallSchedule/OverallSchedule.tsx | 39 ++---------
 .../components/OverallScheduleSlots.tsx       | 17 +++--
 .../components/OverallScheduleTable.tsx       | 64 +++++++++++++++++++
 .../contexts/useClickContext.ts               | 23 +++++++
 .../OverallSchedule/hooks/useSlotClick.ts     | 12 ++++
 5 files changed, 116 insertions(+), 39 deletions(-)
 create mode 100644 src/pages/OverallSchedule/components/OverallScheduleTable.tsx
 create mode 100644 src/pages/OverallSchedule/contexts/useClickContext.ts
 create mode 100644 src/pages/OverallSchedule/hooks/useSlotClick.ts

diff --git a/src/pages/OverallSchedule/OverallSchedule.tsx b/src/pages/OverallSchedule/OverallSchedule.tsx
index 0a12182f..f6b60de7 100644
--- a/src/pages/OverallSchedule/OverallSchedule.tsx
+++ b/src/pages/OverallSchedule/OverallSchedule.tsx
@@ -1,15 +1,9 @@
-import Timetable from 'components/timetableComponents/Timetable';
-import { ColumnStructure } from 'components/timetableComponents/types';
 import { getAvailableTimes } from 'components/timetableComponents/utils';
 import { useParams } from 'react-router-dom';
-import {
-  AvailableDateTime,
-  TimeSlot,
-  useGetOverallSchedule,
-} from 'utils/apis/useGetOverallSchedule';
+import { useGetOverallSchedule } from 'utils/apis/useGetOverallSchedule';
 import { useGetTimetable } from 'utils/apis/useGetTimetable';
 
-import OverallScheduleSlots from './components/OverallScheduleSlots';
+import OverallScheduleTable from './components/OverallScheduleTable';
 
 function OverallSchedule() {
   const { meetingId } = useParams();
@@ -18,40 +12,17 @@ function OverallSchedule() {
     meetingId,
   );
 
-  const getAvailableTimesPerDate = (
-    availableDates: AvailableDateTime[],
-    date: string,
-  ): TimeSlot[] => {
-    const [month, day, dayOfWeek] = date.split('/');
-
-    const matchedDate = availableDates.find(
-      (date) => date.month === month && date.day === day && date.dayOfWeek === dayOfWeek,
-    );
-
-    return matchedDate ? matchedDate.timeSlots : [];
-  };
-
   return (
     <>
       {!isLoadingTimetable &&
         !isLoadingOverallSchedule &&
         dataTimetable &&
         dataOverallSchedule && (
-          <Timetable
+          <OverallScheduleTable
             timeSlots={getAvailableTimes(dataTimetable.preferTimes[0])}
             availableDates={dataTimetable.availableDates}
-          >
-            {({ date, timeSlots }: ColumnStructure) => (
-              <OverallScheduleSlots
-                date={date}
-                timeSlots={timeSlots}
-                availableSlotInfo={getAvailableTimesPerDate(
-                  dataOverallSchedule.availableDateTimes,
-                  date,
-                )}
-              />
-            )}
-          </Timetable>
+            dataOverallSchedule={dataOverallSchedule}
+          />
         )}
     </>
   );
diff --git a/src/pages/OverallSchedule/components/OverallScheduleSlots.tsx b/src/pages/OverallSchedule/components/OverallScheduleSlots.tsx
index e779394e..d6d7626a 100644
--- a/src/pages/OverallSchedule/components/OverallScheduleSlots.tsx
+++ b/src/pages/OverallSchedule/components/OverallScheduleSlots.tsx
@@ -3,12 +3,17 @@ import { ColumnStructure } from 'components/timetableComponents/types';
 import { theme } from 'styles/theme';
 import { TimeSlot } from 'utils/apis/useGetOverallSchedule';
 
+import { useSlotClick } from '../hooks/useSlotClick';
+
 interface OverallScheduleSlotsProps extends ColumnStructure {
   availableSlotInfo: TimeSlot[];
 }
 
 function OverallScheduleSlots({ date, timeSlots, availableSlotInfo }: OverallScheduleSlotsProps) {
-  const getTimeSlotStyle = (colorLevel: number) => {
+
+  const { clickedSlot, onClickSlot } = useSlotClick();
+
+  const getTimeSlotStyle = (colorLevel: number, slotId:string) => {
     const COLOR :{ [key : number]: string } = {
       0: 'transparent',
       1: theme.colors.level1,
@@ -17,19 +22,21 @@ function OverallScheduleSlots({ date, timeSlots, availableSlotInfo }: OverallSch
       4: theme.colors.level4,
       5: theme.colors.level5,
     };
+
+    const isClickedSlot = clickedSlot === slotId;
     return `
-      background-color: ${COLOR[colorLevel]};
+      background-color: ${isClickedSlot && colorLevel!==0 ? theme.colors.sub1 : COLOR[colorLevel]};
+      cursor: ${colorLevel !== 0 ? 'pointer' : 'default'};
     `
   }
 
-
   return (
     <>
       {timeSlots.map((timeSlot) => {
-        const colorLevel = (availableSlotInfo.find((info) => info.time === timeSlot))?.colorLevel ?? 0;
+        const { colorLevel = 0, userNames = [] } = availableSlotInfo.find((info) => info.time === timeSlot) ?? {};
         const slotId = `${date}/${timeSlot}`;
 
-        return <Slot key={slotId} slotId={slotId} slotStyle={getTimeSlotStyle(colorLevel)}/>;
+        return <Slot key={slotId} slotId={slotId} slotStyle={getTimeSlotStyle(colorLevel, slotId)} onClick={()=>onClickSlot(slotId, userNames)}/>;
       })}
     </>
   );
diff --git a/src/pages/OverallSchedule/components/OverallScheduleTable.tsx b/src/pages/OverallSchedule/components/OverallScheduleTable.tsx
new file mode 100644
index 00000000..08da20aa
--- /dev/null
+++ b/src/pages/OverallSchedule/components/OverallScheduleTable.tsx
@@ -0,0 +1,64 @@
+import { useState } from 'react';
+
+import Timetable from 'components/timetableComponents/Timetable';
+import { ColumnStructure, TimetableStructure } from 'components/timetableComponents/types';
+import {
+  AvailableDateTime,
+  TimeSlot,
+  getOverallScheduleResponse,
+} from 'utils/apis/useGetOverallSchedule';
+
+import OverallScheduleSlots from './OverallScheduleSlots';
+import { ClickContext } from '../contexts/useClickContext';
+
+interface OverallScheduleTableProps extends TimetableStructure {
+  dataOverallSchedule: getOverallScheduleResponse['data'];
+}
+
+function OverallScheduleTable({
+  timeSlots,
+  availableDates,
+  dataOverallSchedule,
+}: OverallScheduleTableProps) {
+  const [clickedSlot, setClickedSlot] = useState<string | undefined>(undefined);
+  const [clickedUserNames, setClickedUserNames] = useState<string[]>([]);
+
+  const getAvailableTimesPerDate = (
+    availableDates: AvailableDateTime[],
+    date: string,
+  ): TimeSlot[] => {
+    const [month, day, dayOfWeek] = date.split('/');
+
+    const matchedDate = availableDates.find(
+      (date) => date.month === month && date.day === day && date.dayOfWeek === dayOfWeek,
+    );
+
+    return matchedDate ? matchedDate.timeSlots : [];
+  };
+
+  return (
+    <ClickContext.Provider
+      value={{
+        clickedSlot,
+        setClickedSlot,
+        clickedUserNames,
+        setClickedUserNames,
+      }}
+    >
+      <Timetable timeSlots={timeSlots} availableDates={availableDates}>
+        {({ date, timeSlots }: ColumnStructure) => (
+          <OverallScheduleSlots
+            date={date}
+            timeSlots={timeSlots}
+            availableSlotInfo={getAvailableTimesPerDate(
+              dataOverallSchedule.availableDateTimes,
+              date,
+            )}
+          />
+        )}
+      </Timetable>
+    </ClickContext.Provider>
+  );
+}
+
+export default OverallScheduleTable;
diff --git a/src/pages/OverallSchedule/contexts/useClickContext.ts b/src/pages/OverallSchedule/contexts/useClickContext.ts
new file mode 100644
index 00000000..2e7b350f
--- /dev/null
+++ b/src/pages/OverallSchedule/contexts/useClickContext.ts
@@ -0,0 +1,23 @@
+import { createContext, useContext } from 'react';
+
+interface ClickContextType {
+  clickedSlot: string | undefined;
+  setClickedSlot: (clickedSlot?: string) => void;
+  clickedUserNames: string[];
+  setClickedUserNames: (clickedUserNames: string[]) => void;
+}
+
+export const ClickContext = createContext<ClickContextType>({
+  clickedSlot: undefined,
+  setClickedSlot: () => undefined,
+  clickedUserNames: [],
+  setClickedUserNames: () => [],
+});
+
+export function useClickContext() {
+  const context = useContext(ClickContext);
+  if (context == null) {
+    throw new Error('ClickContext Error');
+  }
+  return context;
+}
diff --git a/src/pages/OverallSchedule/hooks/useSlotClick.ts b/src/pages/OverallSchedule/hooks/useSlotClick.ts
new file mode 100644
index 00000000..f49c5cd7
--- /dev/null
+++ b/src/pages/OverallSchedule/hooks/useSlotClick.ts
@@ -0,0 +1,12 @@
+import { useClickContext } from '../contexts/useClickContext';
+
+export const useSlotClick = () => {
+  const { clickedSlot, setClickedSlot, setClickedUserNames } = useClickContext();
+
+  const onClickSlot = (targetSlot: string, targetUserNames: string[]) => {
+    setClickedSlot(targetSlot);
+    setClickedUserNames(targetUserNames);
+  };
+
+  return { clickedSlot, onClickSlot };
+};

From 15c7966f8a9319f42e2a73701f1a0db5eed2e8a1 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Mon, 24 Jun 2024 03:25:54 +0900
Subject: [PATCH 56/62] =?UTF-8?q?feat:=20=ED=83=80=EC=9D=B4=ED=8B=80,=20?=
 =?UTF-8?q?=EC=84=A0=ED=83=9D=EB=90=9C=20=EC=8A=AC=EB=A1=AF=EC=97=90=20?=
 =?UTF-8?q?=EC=B0=B8=EC=97=AC=20=EA=B0=80=EB=8A=A5=ED=95=9C=20=EC=9D=B8?=
 =?UTF-8?q?=EC=9B=90=20=EB=AA=A9=EB=A1=9D=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/OverallSchedule/OverallSchedule.tsx | 17 +++++-
 .../components/OverallScheduleTable.tsx       |  3 +-
 .../OverallSchedule/components/Title.tsx      | 51 +++++++++++++++++
 .../OverallSchedule/components/UserNames.tsx  | 55 +++++++++++++++++++
 4 files changed, 123 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/OverallSchedule/components/Title.tsx
 create mode 100644 src/pages/OverallSchedule/components/UserNames.tsx

diff --git a/src/pages/OverallSchedule/OverallSchedule.tsx b/src/pages/OverallSchedule/OverallSchedule.tsx
index f6b60de7..0ad82738 100644
--- a/src/pages/OverallSchedule/OverallSchedule.tsx
+++ b/src/pages/OverallSchedule/OverallSchedule.tsx
@@ -1,9 +1,11 @@
 import { getAvailableTimes } from 'components/timetableComponents/utils';
 import { useParams } from 'react-router-dom';
+import styled from 'styled-components';
 import { useGetOverallSchedule } from 'utils/apis/useGetOverallSchedule';
 import { useGetTimetable } from 'utils/apis/useGetTimetable';
 
 import OverallScheduleTable from './components/OverallScheduleTable';
+import Title from './components/Title';
 
 function OverallSchedule() {
   const { meetingId } = useParams();
@@ -13,7 +15,8 @@ function OverallSchedule() {
   );
 
   return (
-    <>
+    <OverallScheduleWrapper>
+      <Title memberCount={dataOverallSchedule?.memberCount} totalUserNames={dataOverallSchedule?.totalUserNames}/>
       {!isLoadingTimetable &&
         !isLoadingOverallSchedule &&
         dataTimetable &&
@@ -24,8 +27,18 @@ function OverallSchedule() {
             dataOverallSchedule={dataOverallSchedule}
           />
         )}
-    </>
+    </OverallScheduleWrapper>
   );
 }
 
 export default OverallSchedule;
+
+const OverallScheduleWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16.4rem;
+`;
+
+
diff --git a/src/pages/OverallSchedule/components/OverallScheduleTable.tsx b/src/pages/OverallSchedule/components/OverallScheduleTable.tsx
index 08da20aa..7a6d8fbb 100644
--- a/src/pages/OverallSchedule/components/OverallScheduleTable.tsx
+++ b/src/pages/OverallSchedule/components/OverallScheduleTable.tsx
@@ -9,6 +9,7 @@ import {
 } from 'utils/apis/useGetOverallSchedule';
 
 import OverallScheduleSlots from './OverallScheduleSlots';
+import UserNames from './UserNames';
 import { ClickContext } from '../contexts/useClickContext';
 
 interface OverallScheduleTableProps extends TimetableStructure {
@@ -45,7 +46,7 @@ function OverallScheduleTable({
         setClickedUserNames,
       }}
     >
-      <Timetable timeSlots={timeSlots} availableDates={availableDates}>
+      <Timetable timeSlots={timeSlots} availableDates={availableDates} bottomItem={<UserNames />}>
         {({ date, timeSlots }: ColumnStructure) => (
           <OverallScheduleSlots
             date={date}
diff --git a/src/pages/OverallSchedule/components/Title.tsx b/src/pages/OverallSchedule/components/Title.tsx
new file mode 100644
index 00000000..38a45448
--- /dev/null
+++ b/src/pages/OverallSchedule/components/Title.tsx
@@ -0,0 +1,51 @@
+import Text from 'components/atomComponents/Text';
+import styled from 'styled-components';
+import { theme } from 'styles/theme';
+
+interface TitleProps {
+  memberCount?: number;
+  totalUserNames?: string[];
+}
+
+function Title({ memberCount, totalUserNames }: TitleProps) {
+  return (
+    <>
+      <TextOneLine>
+        <Text font={'title1'} color={`${theme.colors.white}`}>
+          현재까지&nbsp;
+        </Text>
+        <Text font={'title1'} color={`${theme.colors.sub1}`}>
+          {memberCount !== undefined ? memberCount.toString() : ''}명
+        </Text>
+        <Text font={'title1'} color={`${theme.colors.white}`}>
+          이 입력했어요
+        </Text>
+      </TextOneLine>
+      <TotalUserNames>
+        {totalUserNames &&
+          totalUserNames.map((name, idx) => (
+            <Text key={idx + name} font={'body4'} color={`${theme.colors.grey5}`}>
+              {name}
+              {idx !== totalUserNames.length - 1 ? ',' : ''}&nbsp;
+            </Text>
+          ))}
+      </TotalUserNames>
+    </>
+  );
+}
+
+export default Title;
+
+const TextOneLine = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 3.7rem;
+  width: 100%;
+`;
+
+const TotalUserNames = styled.div`
+  display: flex;
+  margin-top: 1.2rem;
+  margin-bottom: 2.4rem;
+  width: 100%;
+`;
diff --git a/src/pages/OverallSchedule/components/UserNames.tsx b/src/pages/OverallSchedule/components/UserNames.tsx
new file mode 100644
index 00000000..d555d27a
--- /dev/null
+++ b/src/pages/OverallSchedule/components/UserNames.tsx
@@ -0,0 +1,55 @@
+import Text from 'components/atomComponents/Text';
+import styled from 'styled-components';
+import { theme } from 'styles/theme';
+
+import { useClickContext } from '../contexts/useClickContext';
+
+function UserNames() {
+  const { clickedUserNames } = useClickContext();
+
+  return (
+    <UserNamesWrapper>
+      {clickedUserNames.length === 0 ? (
+        <Texts>
+          <Text font={'body4'} color={`${theme.colors.grey5}`}>
+            블럭을 선택하면 해당 시간대에 참여가능한
+          </Text>
+          <Text font={'body4'} color={`${theme.colors.grey5}`}>
+            인원을 확인할 수 있어요
+          </Text>
+        </Texts>
+      ) : (
+        clickedUserNames.map((name, idx) => (
+          <Text key={idx + name} font={'body2'} color={`${theme.colors.grey2}`}>
+            {name}
+            {idx !== clickedUserNames.length - 1 ? ',' : ''}&nbsp;
+          </Text>
+        ))
+      )}
+    </UserNamesWrapper>
+  );
+}
+
+export default UserNames;
+
+const UserNamesWrapper = styled.aside`
+  display: flex;
+  position: fixed;
+  bottom: 4.4rem;
+  flex-wrap: wrap;
+  justify-content: center;
+  border: 1px solid ${({ theme }) => theme.colors.grey5};
+  border-radius: 0.8rem;
+  background: ${({ theme }) => theme.colors.grey9};
+  width: 33.5rem;
+  min-height: 8.3rem;
+  text-align: center;
+  color: ${({ theme }) => theme.colors.white};
+`;
+
+const Texts = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;

From 59d24bc88db52060dfeea95482f70e840dd11ae8 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Mon, 24 Jun 2024 03:40:37 +0900
Subject: [PATCH 57/62] =?UTF-8?q?fix:=20userNames=20=EB=A0=8C=EB=8D=94?=
 =?UTF-8?q?=EB=A7=81=20=EB=B0=A9=EC=8B=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/OverallSchedule/components/Title.tsx     | 12 +++++-------
 src/pages/OverallSchedule/components/UserNames.tsx |  9 +++------
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/pages/OverallSchedule/components/Title.tsx b/src/pages/OverallSchedule/components/Title.tsx
index 38a45448..5fea4c8a 100644
--- a/src/pages/OverallSchedule/components/Title.tsx
+++ b/src/pages/OverallSchedule/components/Title.tsx
@@ -22,13 +22,11 @@ function Title({ memberCount, totalUserNames }: TitleProps) {
         </Text>
       </TextOneLine>
       <TotalUserNames>
-        {totalUserNames &&
-          totalUserNames.map((name, idx) => (
-            <Text key={idx + name} font={'body4'} color={`${theme.colors.grey5}`}>
-              {name}
-              {idx !== totalUserNames.length - 1 ? ',' : ''}&nbsp;
-            </Text>
-          ))}
+        {totalUserNames && (
+          <Text font={'body4'} color={`${theme.colors.grey5}`}>
+            {totalUserNames.join(',')}
+          </Text>
+        )}
       </TotalUserNames>
     </>
   );
diff --git a/src/pages/OverallSchedule/components/UserNames.tsx b/src/pages/OverallSchedule/components/UserNames.tsx
index d555d27a..48c04a8c 100644
--- a/src/pages/OverallSchedule/components/UserNames.tsx
+++ b/src/pages/OverallSchedule/components/UserNames.tsx
@@ -19,12 +19,9 @@ function UserNames() {
           </Text>
         </Texts>
       ) : (
-        clickedUserNames.map((name, idx) => (
-          <Text key={idx + name} font={'body2'} color={`${theme.colors.grey2}`}>
-            {name}
-            {idx !== clickedUserNames.length - 1 ? ',' : ''}&nbsp;
-          </Text>
-        ))
+        <Text font={'body2'} color={theme.colors.grey2}>
+          {clickedUserNames.join(', ')}
+        </Text>
       )}
     </UserNamesWrapper>
   );

From a5361e926c1b9ed0580622e02669a134dfc0bbba Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Tue, 25 Jun 2024 23:35:58 +0900
Subject: [PATCH 58/62] =?UTF-8?q?fix:=20ts=EC=97=90=EB=9F=AC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/OverallSchedule/OverallSchedule.tsx             | 5 ++++-
 src/pages/selectSchedule/SelectSchedule.tsx               | 5 ++++-
 .../components/selectPriority/PriorityDropdown.tsx        | 3 ++-
 .../components/selectTimeSlot/hooks/useSlotSelection.ts   | 6 ++++--
 src/pages/selectSchedule/contexts/useSelectContext.ts     | 8 ++++----
 src/pages/selectSchedule/utils.ts                         | 2 +-
 6 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/pages/OverallSchedule/OverallSchedule.tsx b/src/pages/OverallSchedule/OverallSchedule.tsx
index 0ad82738..84a2d4ef 100644
--- a/src/pages/OverallSchedule/OverallSchedule.tsx
+++ b/src/pages/OverallSchedule/OverallSchedule.tsx
@@ -14,6 +14,9 @@ function OverallSchedule() {
     meetingId,
   );
 
+  // 시간대 선택 단계가 없어질 것을 고려하여 상수값을 설정해놓음
+  const PREFER_TIMES = { startTime: '06:00', endTime: '24:00' };
+
   return (
     <OverallScheduleWrapper>
       <Title memberCount={dataOverallSchedule?.memberCount} totalUserNames={dataOverallSchedule?.totalUserNames}/>
@@ -22,7 +25,7 @@ function OverallSchedule() {
         dataTimetable &&
         dataOverallSchedule && (
           <OverallScheduleTable
-            timeSlots={getAvailableTimes(dataTimetable.preferTimes[0])}
+            timeSlots={getAvailableTimes(PREFER_TIMES)}
             availableDates={dataTimetable.availableDates}
             dataOverallSchedule={dataOverallSchedule}
           />
diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx
index 7be6912b..6e8dadc1 100644
--- a/src/pages/selectSchedule/SelectSchedule.tsx
+++ b/src/pages/selectSchedule/SelectSchedule.tsx
@@ -18,6 +18,9 @@ function SelectSchedule() {
   const { meetingId } = useParams();
   const { data, isLoading } = useGetTimetable(meetingId);
 
+  // 시간대 선택 단계가 없어질 것을 고려하여 상수값을 설정해놓음
+  const PREFER_TIMES = { startTime: '06:00', endTime: '24:00' };
+
   return (
     <ScheduleStepContext.Provider value={{ scheduleStep, setScheduleStep }}>
       <SelectScheduleWrapper>
@@ -38,7 +41,7 @@ function SelectSchedule() {
                 padding={scheduleStep === 'selectTimeSlot' ? `0 0 2.6rem` : `4.4rem 0 3.2rem 0`}
               />
               <SelectScheduleTable
-                timeSlots={getAvailableTimes(data.preferTimes[0])}
+                timeSlots={getAvailableTimes(PREFER_TIMES)}
                 availableDates={data.availableDates}
               />
             </>
diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
index 10a317a5..2631b4e2 100644
--- a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
+++ b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
@@ -72,8 +72,9 @@ function PriorityDropdown() {
         temp = 0;
         break;
     }
+
     setSelectedSlots((prev: SelectedSlotType) => {
-      const updatedSelectedSlots = Object.entries(prev).map(([key, value]) => {
+      const updatedSelectedSlots = Object.entries(prev).map(([_, value]) => {
         if (value.priority === temp) {
           return { ...value, priority: 0 };
         }
diff --git a/src/pages/selectSchedule/components/selectTimeSlot/hooks/useSlotSelection.ts b/src/pages/selectSchedule/components/selectTimeSlot/hooks/useSlotSelection.ts
index 3d269310..abfadf2a 100644
--- a/src/pages/selectSchedule/components/selectTimeSlot/hooks/useSlotSelection.ts
+++ b/src/pages/selectSchedule/components/selectTimeSlot/hooks/useSlotSelection.ts
@@ -10,7 +10,7 @@ const useSlotSeletion = () => {
     const handleCompleteSlot = (targetSlot: string) => {
         const dateOfStartSlot = startSlot?.substring(0, startSlot.lastIndexOf('/'));
         const dateOfTargetSlot = targetSlot.substring(0, targetSlot.lastIndexOf('/'))
-        if (dateOfStartSlot === dateOfTargetSlot){
+        if (startSlot && dateOfStartSlot === dateOfTargetSlot){
             const newSelectedSlot = {
                 date:dateOfStartSlot,
                 startSlot:startSlot?.substring(startSlot.lastIndexOf('/')+1),
@@ -20,7 +20,9 @@ const useSlotSeletion = () => {
 
             const keys = Object.keys(selectedSlots).map(Number)
             const newKey = keys.length ? Math.max(...keys) + 1 : 0;
-            setSelectedSlots({...selectedSlots, [newKey]:newSelectedSlot})
+            const newSelectedSlots = {...selectedSlots};
+            newSelectedSlots[newKey] = newSelectedSlot;
+            setSelectedSlots(newSelectedSlots)
         }
         setStartSlot(undefined);
     }
diff --git a/src/pages/selectSchedule/contexts/useSelectContext.ts b/src/pages/selectSchedule/contexts/useSelectContext.ts
index dd180135..2ab073d0 100644
--- a/src/pages/selectSchedule/contexts/useSelectContext.ts
+++ b/src/pages/selectSchedule/contexts/useSelectContext.ts
@@ -1,8 +1,8 @@
-import { createContext, useContext } from 'react';
+import { Dispatch, SetStateAction, createContext, useContext } from 'react';
 
 export interface SelectSlotType {
   date: string;
-  startSlot?: string;
+  startSlot: string;
   endSlot: string;
   priority: number;
 }
@@ -13,9 +13,9 @@ export interface SelectedSlotType {
 
 interface SelectContextType {
   startSlot: string | undefined;
-  setStartSlot: (startSlot?: string) => void;
+  setStartSlot: Dispatch<SetStateAction<SelectContextType['startSlot']>>;
   selectedSlots: SelectedSlotType;
-  setSelectedSlots: (selectedSlots: SelectedSlotType) => void;
+  setSelectedSlots: Dispatch<SetStateAction<SelectedSlotType>>;
 }
 
 export const SelectContext = createContext<SelectContextType>({
diff --git a/src/pages/selectSchedule/utils.ts b/src/pages/selectSchedule/utils.ts
index 65f56b72..f05805a3 100644
--- a/src/pages/selectSchedule/utils.ts
+++ b/src/pages/selectSchedule/utils.ts
@@ -1,6 +1,6 @@
-import { SelectedSlotType } from 'components/timetableComponents/context';
 import { addMinutes } from 'components/timetableComponents/utils';
 
+import { SelectedSlotType } from './contexts/useSelectContext';
 import { TitlesType } from './types';
 
 export const DURATION = {

From 64da00a2a2ee7148c6f01f24df6d3a58d0e545d8 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Wed, 26 Jun 2024 01:26:25 +0900
Subject: [PATCH 59/62] =?UTF-8?q?fix:=20setState=20type=20=EC=A0=95?=
 =?UTF-8?q?=ED=99=95=ED=9E=88=20=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/OverallSchedule/contexts/useClickContext.ts       | 6 +++---
 src/pages/selectSchedule/contexts/useScheduleStepContext.ts | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/OverallSchedule/contexts/useClickContext.ts b/src/pages/OverallSchedule/contexts/useClickContext.ts
index 2e7b350f..4723cb90 100644
--- a/src/pages/OverallSchedule/contexts/useClickContext.ts
+++ b/src/pages/OverallSchedule/contexts/useClickContext.ts
@@ -1,10 +1,10 @@
-import { createContext, useContext } from 'react';
+import { Dispatch, SetStateAction, createContext, useContext } from 'react';
 
 interface ClickContextType {
   clickedSlot: string | undefined;
-  setClickedSlot: (clickedSlot?: string) => void;
+  setClickedSlot: Dispatch<SetStateAction<ClickContextType['clickedSlot']>>;
   clickedUserNames: string[];
-  setClickedUserNames: (clickedUserNames: string[]) => void;
+  setClickedUserNames: Dispatch<SetStateAction<ClickContextType['clickedUserNames']>>;
 }
 
 export const ClickContext = createContext<ClickContextType>({
diff --git a/src/pages/selectSchedule/contexts/useScheduleStepContext.ts b/src/pages/selectSchedule/contexts/useScheduleStepContext.ts
index 95ee9694..9488eaa4 100644
--- a/src/pages/selectSchedule/contexts/useScheduleStepContext.ts
+++ b/src/pages/selectSchedule/contexts/useScheduleStepContext.ts
@@ -1,10 +1,10 @@
-import { createContext, useContext } from 'react';
+import { Dispatch, SetStateAction, createContext, useContext } from 'react';
 
 import { ScheduleStepType } from '../types';
 
 interface ScheduleStepContextType {
   scheduleStep: ScheduleStepType;
-  setScheduleStep: (scheduleStep: ScheduleStepType) => void;
+  setScheduleStep: Dispatch<SetStateAction<ScheduleStepType>>;
 }
 
 export const ScheduleStepContext = createContext<ScheduleStepContextType>({

From b1579ea0b562c786b57178245be0d3a558dafe55 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Wed, 26 Jun 2024 02:11:25 +0900
Subject: [PATCH 60/62] =?UTF-8?q?fix:=20Slots=20->=20Column=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...OverallScheduleSlots.tsx => OverallScheduleColumn.tsx} | 6 +++---
 .../OverallSchedule/components/OverallScheduleTable.tsx   | 4 ++--
 .../selectSchedule/components/SelectScheduleTable.tsx     | 8 ++++----
 .../{PrioritySlots.tsx => PriorityColumn.tsx}             | 8 ++++----
 .../{SelectionSlots.tsx => SelectionColumn.tsx}           | 4 ++--
 5 files changed, 15 insertions(+), 15 deletions(-)
 rename src/pages/OverallSchedule/components/{OverallScheduleSlots.tsx => OverallScheduleColumn.tsx} (86%)
 rename src/pages/selectSchedule/components/selectPriority/{PrioritySlots.tsx => PriorityColumn.tsx} (88%)
 rename src/pages/selectSchedule/components/selectTimeSlot/{SelectionSlots.tsx => SelectionColumn.tsx} (94%)

diff --git a/src/pages/OverallSchedule/components/OverallScheduleSlots.tsx b/src/pages/OverallSchedule/components/OverallScheduleColumn.tsx
similarity index 86%
rename from src/pages/OverallSchedule/components/OverallScheduleSlots.tsx
rename to src/pages/OverallSchedule/components/OverallScheduleColumn.tsx
index d6d7626a..96853a6d 100644
--- a/src/pages/OverallSchedule/components/OverallScheduleSlots.tsx
+++ b/src/pages/OverallSchedule/components/OverallScheduleColumn.tsx
@@ -5,11 +5,11 @@ import { TimeSlot } from 'utils/apis/useGetOverallSchedule';
 
 import { useSlotClick } from '../hooks/useSlotClick';
 
-interface OverallScheduleSlotsProps extends ColumnStructure {
+interface OverallScheduleColumnProps extends ColumnStructure {
   availableSlotInfo: TimeSlot[];
 }
 
-function OverallScheduleSlots({ date, timeSlots, availableSlotInfo }: OverallScheduleSlotsProps) {
+function OverallScheduleColumn({ date, timeSlots, availableSlotInfo }: OverallScheduleColumnProps) {
 
   const { clickedSlot, onClickSlot } = useSlotClick();
 
@@ -42,4 +42,4 @@ function OverallScheduleSlots({ date, timeSlots, availableSlotInfo }: OverallSch
   );
 }
 
-export default OverallScheduleSlots;
+export default OverallScheduleColumn;
diff --git a/src/pages/OverallSchedule/components/OverallScheduleTable.tsx b/src/pages/OverallSchedule/components/OverallScheduleTable.tsx
index 7a6d8fbb..1553de8d 100644
--- a/src/pages/OverallSchedule/components/OverallScheduleTable.tsx
+++ b/src/pages/OverallSchedule/components/OverallScheduleTable.tsx
@@ -8,7 +8,7 @@ import {
   getOverallScheduleResponse,
 } from 'utils/apis/useGetOverallSchedule';
 
-import OverallScheduleSlots from './OverallScheduleSlots';
+import OverallScheduleColumn from './OverallScheduleColumn';
 import UserNames from './UserNames';
 import { ClickContext } from '../contexts/useClickContext';
 
@@ -48,7 +48,7 @@ function OverallScheduleTable({
     >
       <Timetable timeSlots={timeSlots} availableDates={availableDates} bottomItem={<UserNames />}>
         {({ date, timeSlots }: ColumnStructure) => (
-          <OverallScheduleSlots
+          <OverallScheduleColumn
             date={date}
             timeSlots={timeSlots}
             availableSlotInfo={getAvailableTimesPerDate(
diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
index cc629c04..fdb8c261 100644
--- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx
+++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
@@ -3,10 +3,10 @@ import { useState } from 'react';
 import Timetable from 'components/timetableComponents/Timetable';
 import { ColumnStructure, TimetableStructure } from 'components/timetableComponents/types';
 
+import PriorityColumn from './selectPriority/PriorityColumn';
 import PriorityCta from './selectPriority/PriorityCta';
 import PriorityDropdown from './selectPriority/PriorityDropdown';
-import PrioritySlots from './selectPriority/PrioritySlots';
-import SelectionSlots from './selectTimeSlot/SelectionSlots';
+import SelectionColumn from './selectTimeSlot/SelectionColumn';
 import TimeSlotCta from './selectTimeSlot/TimeSlotCta';
 import { useScheduleStepContext } from '../contexts/useScheduleStepContext';
 import { SelectContext, SelectedSlotType } from '../contexts/useSelectContext';
@@ -20,10 +20,10 @@ function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure)
 
   const stepSlots: StepSlotsType = {
     selectTimeSlot: ({ date, timeSlots }: ColumnStructure) => (
-      <SelectionSlots date={date} timeSlots={timeSlots} />
+      <SelectionColumn date={date} timeSlots={timeSlots} />
     ),
     selectPriority: ({ date, timeSlots }: ColumnStructure) => (
-      <PrioritySlots date={date} timeSlots={timeSlots} />
+      <PriorityColumn date={date} timeSlots={timeSlots} />
     ),
   };
   const stepSlot = stepSlots[scheduleStep];
diff --git a/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityColumn.tsx
similarity index 88%
rename from src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx
rename to src/pages/selectSchedule/components/selectPriority/PriorityColumn.tsx
index 1dd0c809..7c30d2b4 100644
--- a/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx
+++ b/src/pages/selectSchedule/components/selectPriority/PriorityColumn.tsx
@@ -5,13 +5,13 @@ import { theme } from 'styles/theme';
 
 import Slot from '../../../../components/timetableComponents/parts/Slot';
 
-function PrioritySlots({ date, timeSlots }: ColumnStructure) {
+function PriorityColumn({ date, timeSlots }: ColumnStructure) {
   const { selectedSlots } = useSelectContext();
   const selectedSlotsPerDate = Object.entries(selectedSlots).filter(
     ([, slot]) => slot.date === date,
   );
 
-  const getPrioritySlotStyle = (selectedEntryId?: number, priority?: number) => {
+  const getPriorityColumntyle = (selectedEntryId?: number, priority?: number) => {
     const isSelectedSlot = selectedEntryId !== undefined;
     const slotColor =
       priority === 1
@@ -50,7 +50,7 @@ function PrioritySlots({ date, timeSlots }: ColumnStructure) {
           <Slot
             key={slotId}
             slotId={slotId}
-            slotStyle={getPrioritySlotStyle(selectedEntryId, priority)}
+            slotStyle={getPriorityColumntyle(selectedEntryId, priority)}
           >
             <Text font="body1" color={theme.colors.white}>
               {isFirstSlot && priority !== 0 ? priority : ''}
@@ -62,4 +62,4 @@ function PrioritySlots({ date, timeSlots }: ColumnStructure) {
   );
 }
 
-export default PrioritySlots;
+export default PriorityColumn;
diff --git a/src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx b/src/pages/selectSchedule/components/selectTimeSlot/SelectionColumn.tsx
similarity index 94%
rename from src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx
rename to src/pages/selectSchedule/components/selectTimeSlot/SelectionColumn.tsx
index 6dbc16d9..17f97f40 100644
--- a/src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx
+++ b/src/pages/selectSchedule/components/selectTimeSlot/SelectionColumn.tsx
@@ -5,7 +5,7 @@ import { theme } from 'styles/theme';
 import useSlotSeletion from './hooks/useSlotSelection';
 import Slot from '../../../../components/timetableComponents/parts/Slot';
 
-function SelectionSlots({ date, timeSlots }: ColumnStructure) {
+function SelectionColumn({ date, timeSlots }: ColumnStructure) {
   const { selectedSlots } = useSelectContext();
   const selectedSlotsPerDate = Object.entries(selectedSlots).filter(
     ([, slot]) => slot.date === date,
@@ -48,4 +48,4 @@ function SelectionSlots({ date, timeSlots }: ColumnStructure) {
   );
 }
 
-export default SelectionSlots;
+export default SelectionColumn;

From 72282673f6ecd6c7c3709d4ed85d44fd975b432a Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Wed, 26 Jun 2024 02:59:47 +0900
Subject: [PATCH 61/62] =?UTF-8?q?fix:=20Timetable=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=ED=95=84=EC=9A=94=EC=97=86=EB=8A=94=20prop=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/timetableComponents/Timetable.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/timetableComponents/Timetable.tsx b/src/components/timetableComponents/Timetable.tsx
index 0eee98f5..07620c36 100644
--- a/src/components/timetableComponents/Timetable.tsx
+++ b/src/components/timetableComponents/Timetable.tsx
@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 
 import styled from 'styled-components';
-import { getOverallScheduleResponse } from 'utils/apis/useGetOverallSchedule';
 
 import DateTitle from './parts/ColumnTitle';
 import SlotTitle from './parts/SlotTitle';
@@ -12,7 +11,6 @@ interface TimetableProps {
   availableDates: DateType[];
   children: (props: ColumnStructure) => ReactNode;
   bottomItem?: ReactNode;
-  dataOverallSchedule?: getOverallScheduleResponse['data'];
 }
 
 function Timetable({ timeSlots, availableDates, children, bottomItem }: TimetableProps) {

From f72b6293b6337f78c103286f1b970f8d63ea7422 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Wed, 26 Jun 2024 03:25:50 +0900
Subject: [PATCH 62/62] =?UTF-8?q?fix:=20slots=20->=20column=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../timetableComponents/Timetable.tsx         | 24 +++++++++++--------
 .../components/SelectScheduleTable.tsx        |  6 ++---
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/timetableComponents/Timetable.tsx b/src/components/timetableComponents/Timetable.tsx
index 07620c36..aa2b904e 100644
--- a/src/components/timetableComponents/Timetable.tsx
+++ b/src/components/timetableComponents/Timetable.tsx
@@ -20,16 +20,20 @@ function Timetable({ timeSlots, availableDates, children, bottomItem }: Timetabl
     <>
       <TimetableWrapper>
         <SlotTitle timeSlots={timeSlots} />
-        <TableWrapper>
+        <TableWithDateWrapper>
           <DateTitle availableDates={availableDates} />
-          <Table>
+          <TableWrapper>
             {availableDates.map((date) => {
               const dateKey = Object.values(date).join('/');
-              return <Column key={dateKey}>{children({ date: dateKey, timeSlots })}</Column>;
+              return (
+                <ColumnWrapper key={dateKey}>
+                  {children({ date: dateKey, timeSlots })}
+                </ColumnWrapper>
+              );
             })}
-            {emptyDates && emptyDates.map((value) => <EmptyColumn key={value} />)}
-          </Table>
-        </TableWrapper>
+            {emptyDates && emptyDates.map((value) => <EmptyColumnWrapper key={value} />)}
+          </TableWrapper>
+        </TableWithDateWrapper>
       </TimetableWrapper>
       {bottomItem}
     </>
@@ -43,26 +47,26 @@ const TimetableWrapper = styled.div`
   gap: 0.75rem;
 `;
 
-const TableWrapper = styled.div`
+const TableWithDateWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
 `;
 
-const Table = styled.div`
+const TableWrapper = styled.div`
   display: flex;
   border-bottom: 1px solid ${({ theme }) => theme.colors.grey7};
   border-left: 1px solid ${({ theme }) => theme.colors.grey7};
 `;
 
-const Column = styled.div`
+const ColumnWrapper = styled.div`
   display: flex;
   flex-direction: column;
 
   border-right: 1px solid ${({ theme }) => theme.colors.grey7};
 `;
 
-const EmptyColumn = styled.div`
+const EmptyColumnWrapper = styled.div`
   display: flex;
   flex-direction: column;
   border-top: 1px solid ${({ theme }) => theme.colors.grey7};
diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
index fdb8c261..4134e8bc 100644
--- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx
+++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
@@ -18,7 +18,7 @@ function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure)
 
   const { scheduleStep } = useScheduleStepContext();
 
-  const stepSlots: StepSlotsType = {
+  const stepColumns: StepSlotsType = {
     selectTimeSlot: ({ date, timeSlots }: ColumnStructure) => (
       <SelectionColumn date={date} timeSlots={timeSlots} />
     ),
@@ -26,7 +26,7 @@ function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure)
       <PriorityColumn date={date} timeSlots={timeSlots} />
     ),
   };
-  const stepSlot = stepSlots[scheduleStep];
+  const stepColumn = stepColumns[scheduleStep];
 
   const bottomItems: StepbottomItemsType = {
     selectTimeSlot: <TimeSlotCta />,
@@ -49,7 +49,7 @@ function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure)
       }}
     >
       <Timetable timeSlots={timeSlots} availableDates={availableDates} bottomItem={bottomItem}>
-        {stepSlot}
+        {stepColumn}
       </Timetable>
     </SelectContext.Provider>
   );