From e3ddc7c6484610dcd5a12bf541ed13688ccd6ba2 Mon Sep 17 00:00:00 2001
From: hafnium1923 <hafnium1923@gmail.com>
Date: Wed, 19 Jul 2023 16:20:07 +0900
Subject: [PATCH 01/17] =?UTF-8?q?refactor:=20=EA=B8=B0=EA=B0=84=20?=
 =?UTF-8?q?=EC=9D=BC=EC=A0=95=20=EC=A1=B0=ED=9A=8C=20query=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=EB=AA=85=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                                          | 4 ++--
 .../hooks/queries/{useSchedules.ts => useFetchSchedules.ts}   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename frontend/src/hooks/queries/{useSchedules.ts => useFetchSchedules.ts} (89%)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1c832daac..ca449c2de 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,9 +1,9 @@
 import { styled } from 'styled-components';
 import Calendar from '~/components/Calendar/Calendar';
-import { useSchedules } from '~/hooks/queries/useSchedules';
+import { useFetchSchedules } from '~/hooks/queries/useFetchSchedules';
 
 const App = () => {
-  const { schedules } = useSchedules(1, 2023, 7);
+  const { schedules } = useFetchSchedules(1, 2023, 7);
 
   if (schedules === undefined) {
     return null;
diff --git a/frontend/src/hooks/queries/useSchedules.ts b/frontend/src/hooks/queries/useFetchSchedules.ts
similarity index 89%
rename from frontend/src/hooks/queries/useSchedules.ts
rename to frontend/src/hooks/queries/useFetchSchedules.ts
index b8ca24334..a90e7341c 100644
--- a/frontend/src/hooks/queries/useSchedules.ts
+++ b/frontend/src/hooks/queries/useFetchSchedules.ts
@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { fetchSchedules } from '~/apis/schedule';
 
-export const useSchedules = (
+export const useFetchSchedules = (
   teamPlaceId: number,
   year: number,
   month: number,

From 61aa58fbcced17e898e48e02a3ef554329ff3a17 Mon Sep 17 00:00:00 2001
From: hafnium1923 <hafnium1923@gmail.com>
Date: Thu, 20 Jul 2023 10:40:20 +0900
Subject: [PATCH 02/17] =?UTF-8?q?feat:=20=EC=9D=BC=EC=A0=95=20=EC=A1=B0?=
 =?UTF-8?q?=ED=9A=8C,=20=EC=82=AD=EC=A0=9C=20API=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/apis/schedule.ts                  | 12 ++++++++++++
 .../src/hooks/queries/useDeleteSchedule.ts     | 18 ++++++++++++++++++
 frontend/src/hooks/queries/useFetchSchedule.ts | 13 +++++++++++++
 frontend/src/mocks/fixtures/schedules.ts       |  4 ++--
 4 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/hooks/queries/useDeleteSchedule.ts
 create mode 100644 frontend/src/hooks/queries/useFetchSchedule.ts

diff --git a/frontend/src/apis/schedule.ts b/frontend/src/apis/schedule.ts
index 6e6df444b..d26eb1729 100644
--- a/frontend/src/apis/schedule.ts
+++ b/frontend/src/apis/schedule.ts
@@ -10,3 +10,15 @@ export const fetchSchedules = (
     `/api/team-place/${teamPlaceId}/calendar/schedules?year=${year}&month=${month}`,
   );
 };
+
+export const fetchScheduleById = (teamPlaceId: number, scheduleId: number) => {
+  return http.get<Schedule>(
+    `/api/team-place/${teamPlaceId}/calendar/schedules/${scheduleId}`,
+  );
+};
+
+export const deleteSchedule = (teamPlaceId: number, scheduleId: number) => {
+  return http.delete(
+    `/api/team-place/${teamPlaceId}/calendar/schedules/${scheduleId}`,
+  );
+};
diff --git a/frontend/src/hooks/queries/useDeleteSchedule.ts b/frontend/src/hooks/queries/useDeleteSchedule.ts
new file mode 100644
index 000000000..8632d23ec
--- /dev/null
+++ b/frontend/src/hooks/queries/useDeleteSchedule.ts
@@ -0,0 +1,18 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { deleteSchedule } from '~/apis/schedule';
+
+export const useDeleteSchedule = (teamPlaceId: number, scheduleId: number) => {
+  const queryClient = useQueryClient();
+
+  const { mutate } = useMutation(
+    () => deleteSchedule(teamPlaceId, scheduleId),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: ['schedules'] });
+        queryClient.invalidateQueries({ queryKey: ['schedule'] });
+      },
+    },
+  );
+
+  return { mutateScheduleDelete: mutate };
+};
diff --git a/frontend/src/hooks/queries/useFetchSchedule.ts b/frontend/src/hooks/queries/useFetchSchedule.ts
new file mode 100644
index 000000000..494fc87bb
--- /dev/null
+++ b/frontend/src/hooks/queries/useFetchSchedule.ts
@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+import { fetchScheduleById } from '~/apis/schedule';
+
+export const useFetchScheduleById = (
+  teamPlaceId: number,
+  scheduleId: number,
+) => {
+  const { data: scheduleById } = useQuery(['schedule', scheduleId], () =>
+    fetchScheduleById(teamPlaceId, scheduleId),
+  );
+
+  return { scheduleById };
+};
diff --git a/frontend/src/mocks/fixtures/schedules.ts b/frontend/src/mocks/fixtures/schedules.ts
index 17f23d54d..587ee4dc4 100644
--- a/frontend/src/mocks/fixtures/schedules.ts
+++ b/frontend/src/mocks/fixtures/schedules.ts
@@ -39,13 +39,13 @@ export const schedules: Schedule[] = [
   },
   {
     id: 6,
-    title: 'test5',
+    title: 'test6',
     startDateTime: '2023-07-31 05:00',
     endDateTime: '2023-08-02 05:00',
   },
   {
     id: 7,
-    title: 'test5',
+    title: 'test7',
     startDateTime: '2023-06-30 05:00',
     endDateTime: '2023-07-02 05:00',
   },

From e0d4c92e79f9e92b1f88735af25967f45255a84d Mon Sep 17 00:00:00 2001
From: hafnium1923 <hafnium1923@gmail.com>
Date: Thu, 20 Jul 2023 10:41:09 +0900
Subject: [PATCH 03/17] =?UTF-8?q?refactor:=20=EC=8A=A4=EC=BC=80=EC=A4=84?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...edule.styled.ts => ScheduleModal.styled.ts} | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)
 rename frontend/src/components/ScheduleModal/{Schedule.styled.ts => ScheduleModal.styled.ts} (95%)

diff --git a/frontend/src/components/ScheduleModal/Schedule.styled.ts b/frontend/src/components/ScheduleModal/ScheduleModal.styled.ts
similarity index 95%
rename from frontend/src/components/ScheduleModal/Schedule.styled.ts
rename to frontend/src/components/ScheduleModal/ScheduleModal.styled.ts
index 906cc784b..790f28ca8 100644
--- a/frontend/src/components/ScheduleModal/Schedule.styled.ts
+++ b/frontend/src/components/ScheduleModal/ScheduleModal.styled.ts
@@ -45,14 +45,6 @@ export const TeamColor = styled.div`
   background-color: ${({ theme }) => theme.color.PRIMARY};
 `;
 
-export const TeamName = css`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  max-width: 200px;
-`;
-
 export const MenuWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -64,7 +56,15 @@ export const PeriodWrapper = styled.div`
   gap: 2px;
 `;
 
-export const Button = css`
+export const teamName = css`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  max-width: 200px;
+`;
+
+export const closeButton = css`
   display: flex;
   justify-content: center;
   align-items: center;

From b825c33b7debc6e3e539c7875f18e6e6eba2f81e Mon Sep 17 00:00:00 2001
From: hafnium1923 <hafnium1923@gmail.com>
Date: Thu, 20 Jul 2023 10:43:46 +0900
Subject: [PATCH 04/17] =?UTF-8?q?refactor:=20=EC=8A=A4=EC=BC=80=EC=A4=84?=
 =?UTF-8?q?=EB=B0=94=EC=97=90=20=EC=9D=BC=EC=A0=95=20=EC=A1=B0=ED=9A=8C=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ScheduleBar/ScheduleBar.stories.tsx          |  4 ++++
 .../components/ScheduleBar/ScheduleBar.styled.ts |  6 ++++--
 .../src/components/ScheduleBar/ScheduleBar.tsx   | 16 +++++++---------
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/ScheduleBar/ScheduleBar.stories.tsx b/frontend/src/components/ScheduleBar/ScheduleBar.stories.tsx
index aebcfeb7a..f550bc891 100644
--- a/frontend/src/components/ScheduleBar/ScheduleBar.stories.tsx
+++ b/frontend/src/components/ScheduleBar/ScheduleBar.stories.tsx
@@ -20,5 +20,9 @@ export const Default: Story = {
     column: 2,
     duration: 3,
     level: 0,
+    // eslint-disable-next-line
+    //@ts-ignore
+    ref: null,
+    handleClick: () => console.log('click'),
   },
 };
diff --git a/frontend/src/components/ScheduleBar/ScheduleBar.styled.ts b/frontend/src/components/ScheduleBar/ScheduleBar.styled.ts
index 5a660c5d1..a387810a0 100644
--- a/frontend/src/components/ScheduleBar/ScheduleBar.styled.ts
+++ b/frontend/src/components/ScheduleBar/ScheduleBar.styled.ts
@@ -1,7 +1,7 @@
 import { styled } from 'styled-components';
-import type { ScheduleBarProps } from '~/components/ScheduleBar/ScheduleBar';
+import type { ScheduleBar } from '~/components/ScheduleBar/ScheduleBar';
 
-export const Wrapper = styled.div<ScheduleBarProps>`
+export const Wrapper = styled.div<ScheduleBar>`
   position: absolute;
 
   top: ${({ level }) => level * 18 + 36}px;
@@ -10,4 +10,6 @@ export const Wrapper = styled.div<ScheduleBarProps>`
   height: 16px;
 
   background-color: ${({ color }) => color};
+
+  cursor: pointer;
 `;
diff --git a/frontend/src/components/ScheduleBar/ScheduleBar.tsx b/frontend/src/components/ScheduleBar/ScheduleBar.tsx
index b87ada07e..5e35384a3 100644
--- a/frontend/src/components/ScheduleBar/ScheduleBar.tsx
+++ b/frontend/src/components/ScheduleBar/ScheduleBar.tsx
@@ -1,6 +1,6 @@
 import * as S from './ScheduleBar.styled';
 
-export interface ScheduleBarProps {
+export interface ScheduleBar {
   id: string;
   scheduleId: number;
   title: string;
@@ -11,16 +11,14 @@ export interface ScheduleBarProps {
   color?: string;
 }
 
-const ScheduleBar = (props: ScheduleBarProps) => {
-  const { color = 'red', title, ...rest } = props;
+interface ScheduleBarProps extends ScheduleBar {
+  handleClick: () => void;
+}
 
+const ScheduleBar = (props: ScheduleBarProps) => {
+  const { color = 'red', title, handleClick, ...rest } = props;
   return (
-    <S.Wrapper
-      color={color}
-      title={title}
-      {...rest}
-      onClick={() => alert(title)}
-    />
+    <S.Wrapper color={color} title={title} onClick={handleClick} {...rest} />
   );
 };
 

From 7825f9f4a51dc7d2cd7290a59f641e4f32a8f007 Mon Sep 17 00:00:00 2001
From: hafnium1923 <hafnium1923@gmail.com>
Date: Thu, 20 Jul 2023 10:44:22 +0900
Subject: [PATCH 05/17] =?UTF-8?q?refactor:=20=EC=8A=A4=EC=BC=80=EC=A4=84?=
 =?UTF-8?q?=EB=B0=94=20ref=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ScheduleBar/ScheduleBar.stories.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend/src/components/ScheduleBar/ScheduleBar.stories.tsx b/frontend/src/components/ScheduleBar/ScheduleBar.stories.tsx
index f550bc891..02ab6a864 100644
--- a/frontend/src/components/ScheduleBar/ScheduleBar.stories.tsx
+++ b/frontend/src/components/ScheduleBar/ScheduleBar.stories.tsx
@@ -20,9 +20,6 @@ export const Default: Story = {
     column: 2,
     duration: 3,
     level: 0,
-    // eslint-disable-next-line
-    //@ts-ignore
-    ref: null,
     handleClick: () => console.log('click'),
   },
 };

From 37e7dc76d85b24289ad568a02161c28e687880a7 Mon Sep 17 00:00:00 2001
From: hafnium1923 <hafnium1923@gmail.com>
Date: Thu, 20 Jul 2023 10:46:24 +0900
Subject: [PATCH 06/17] =?UTF-8?q?refactor:=20=EC=9D=BC=EC=A0=95=EC=A1=B0?=
 =?UTF-8?q?=ED=9A=8C=EB=AA=A8=EB=8B=AC=20=EC=83=81=ED=83=9C=EA=B0=92?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=84=98=EA=B2=A8=EB=B0=9B=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ScheduleModal/ScheduleModal.stories.tsx   | 35 +++++++++++--
 .../ScheduleModal/ScheduleModal.tsx           | 50 +++++++++++--------
 frontend/src/types/schedule.ts                | 11 +++-
 3 files changed, 69 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/ScheduleModal/ScheduleModal.stories.tsx b/frontend/src/components/ScheduleModal/ScheduleModal.stories.tsx
index 4388f9361..12e1f3370 100644
--- a/frontend/src/components/ScheduleModal/ScheduleModal.stories.tsx
+++ b/frontend/src/components/ScheduleModal/ScheduleModal.stories.tsx
@@ -40,14 +40,39 @@ export const Default: Story = {
             </div>
           );
         })}
-        <ScheduleModal targetRef={targetRef} id={1} />
+        <ScheduleModal
+          schedule={{
+            id: 0,
+            title: 'test0',
+            startDateTime: '2023-07-13 00:00',
+            endDateTime: '2023-07-14 23:59',
+          }}
+          position={{
+            row: 0,
+            column: 0,
+            level: 0,
+          }}
+          handleScheduleDelete={() => {
+            alert('click');
+          }}
+        />
       </>
     );
   },
   args: {
-    id: 1,
-    // eslint-disable-next-line
-    //@ts-ignore
-    targetRef: null,
+    schedule: {
+      id: 0,
+      title: 'test0',
+      startDateTime: '2023-07-13 00:00',
+      endDateTime: '2023-07-14 23:59',
+    },
+    position: {
+      row: 0,
+      column: 0,
+      level: 0,
+    },
+    handleScheduleDelete: () => {
+      alert('click');
+    },
   },
 };
diff --git a/frontend/src/components/ScheduleModal/ScheduleModal.tsx b/frontend/src/components/ScheduleModal/ScheduleModal.tsx
index 510a5442a..45b98d531 100644
--- a/frontend/src/components/ScheduleModal/ScheduleModal.tsx
+++ b/frontend/src/components/ScheduleModal/ScheduleModal.tsx
@@ -2,22 +2,37 @@ import type { CSSProperties } from 'react';
 import Modal from '~/components/common/Modal/Modal';
 import Text from '~/components/common/Text/Text';
 import { useModal } from '~/hooks/useModal';
-import * as S from './Schedule.styled';
+import * as S from './ScheduleModal.styled';
 import { CloseIcon, DeleteIcon, EditIcon } from '~/assets/svg';
 import Button from '~/components/common/Button/Button';
+import { formatDateTime } from '~/utils/formatDateTime';
+import type { Schedule, SchedulePosition } from '~/types/schedule';
 
 interface ScheduleModalProps {
-  id: number;
-  targetRef: React.RefObject<HTMLDivElement>;
+  schedule: Schedule;
+  position: SchedulePosition;
+  handleScheduleDelete: () => void;
 }
 const ScheduleModal = (props: ScheduleModalProps) => {
-  const { targetRef } = props;
+  const { schedule, handleScheduleDelete, position } = props;
   const { closeModal } = useModal();
 
+  const { id, title, startDateTime, endDateTime } = schedule;
+
+  console.log(position);
   const modalLocation: CSSProperties = {
     position: 'absolute',
-    top: `${targetRef.current?.getBoundingClientRect().bottom}px`,
-    left: `${targetRef.current?.getBoundingClientRect().left}px`,
+    top:
+      position.row < 3
+        ? `${(position.row + 1) * 120 + position.level * 18 + 60}px`
+        : 'none',
+    bottom:
+      position.row >= 3
+        ? `${(6 - position.row) * 120 - position.level * 18}px`
+        : 'none',
+    left: position.column < 3 ? `${(position.column * 100) / 7}%` : 'none',
+    right:
+      position.column >= 3 ? `${((6 - position.column) * 100) / 7}%` : 'none',
   };
 
   return (
@@ -27,22 +42,15 @@ const ScheduleModal = (props: ScheduleModalProps) => {
         <S.Header>
           <S.TeamWrapper>
             <S.TeamColor />
-            <p
-              title={
-                '현대사회와 범죄 5조현대사회와 범죄 5조현대사회와 범죄5조현대사회와 범죄 5조현대사회와 범죄 5조'
-              }
-            >
-              <Text css={S.TeamName}>
-                현대사회와 범죄 5조현대사회와 범죄 5조현대사회와
-                범죄5조현대사회와 범죄 5조현대사회와 범죄 5조
-              </Text>
-            </p>
+            <div title={'현대사회와 범죄 5조'}>
+              <Text css={S.teamName}>현대사회와 범죄 5조</Text>
+            </div>
           </S.TeamWrapper>
           <S.MenuWrapper>
             <Button size="sm" variant="plain">
               <EditIcon />
             </Button>
-            <Button size="sm" variant="plain">
+            <Button size="sm" variant="plain" onClick={handleScheduleDelete}>
               <DeleteIcon />
             </Button>
             <Button size="sm" variant="plain" onClick={closeModal}>
@@ -50,16 +58,16 @@ const ScheduleModal = (props: ScheduleModalProps) => {
             </Button>
           </S.MenuWrapper>
         </S.Header>
-        <Text as="h4">1차 데모데이</Text>
+        <Text as="h4">{title}</Text>
         <S.PeriodWrapper>
-          <Text size="lg">07월 13일 15:00</Text>
+          <Text size="lg">{formatDateTime(startDateTime)}</Text>
           <Text size="lg">~</Text>
-          <Text size="lg">07월 13일 19:00</Text>
+          <Text size="lg">{formatDateTime(endDateTime)}</Text>
         </S.PeriodWrapper>
         <Button
           type="button"
           variant="primary"
-          css={S.Button}
+          css={S.closeButton}
           onClick={closeModal}
         >
           확인
diff --git a/frontend/src/types/schedule.ts b/frontend/src/types/schedule.ts
index e0488ed26..9c7bb007c 100644
--- a/frontend/src/types/schedule.ts
+++ b/frontend/src/types/schedule.ts
@@ -7,4 +7,13 @@ export interface Schedule {
 
 export type ScheduleWithoutId = Omit<Schedule, 'id'>;
 
-type YYYYMMDDHHMM = `${string}-${string}-${string} ${string}:${string}`;
+export type YYYYMMDDHHMM = `${string}-${string}-${string} ${string}:${string}`;
+
+export interface Position {
+  row: number;
+  column: number;
+}
+
+export interface SchedulePosition extends Position {
+  level: number;
+}

From a7b34751479b38680f35344e46b1f43f0256f744 Mon Sep 17 00:00:00 2001
From: hafnium1923 <hafnium1923@gmail.com>
Date: Thu, 20 Jul 2023 10:46:45 +0900
Subject: [PATCH 07/17] =?UTF-8?q?feat:=20=EB=85=84=EC=9B=94=EC=9D=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B0=98=ED=99=98=ED=95=98=EB=8A=94=20=EC=9C=A0?=
 =?UTF-8?q?=ED=8B=B8=ED=95=A8=EC=88=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/utils/formatDateTime.ts | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 frontend/src/utils/formatDateTime.ts

diff --git a/frontend/src/utils/formatDateTime.ts b/frontend/src/utils/formatDateTime.ts
new file mode 100644
index 000000000..a6a5a22bf
--- /dev/null
+++ b/frontend/src/utils/formatDateTime.ts
@@ -0,0 +1,8 @@
+import type { YYYYMMDDHHMM } from '~/types/schedule';
+
+export const formatDateTime = (rawDateTime: YYYYMMDDHHMM) => {
+  const [rawDate, time] = rawDateTime.split(' ');
+  const date = rawDate.split('-');
+
+  return `${date[0]}년 ${date[1]}월 ${date[0]}일 ${time}`;
+};

From 8c4de0e63218e5f9587d9ec6fc8253f23d0c97a2 Mon Sep 17 00:00:00 2001
From: hafnium1923 <hafnium1923@gmail.com>
Date: Thu, 20 Jul 2023 10:47:25 +0900
Subject: [PATCH 08/17] =?UTF-8?q?feat:=20=EC=BA=98=EB=A6=B0=EB=8D=94?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=8A=A4=EC=BC=80=EC=A4=84=EB=B0=94?=
 =?UTF-8?q?=EC=99=80=20=EC=9D=BC=EC=A0=95=EC=A1=B0=ED=9A=8C=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Calendar/Calendar.tsx | 70 +++++++++++++++++--
 frontend/src/utils/generateScheduleBars.ts    | 21 +++---
 2 files changed, 72 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/Calendar/Calendar.tsx b/frontend/src/components/Calendar/Calendar.tsx
index 13d03adcb..4c2a96038 100644
--- a/frontend/src/components/Calendar/Calendar.tsx
+++ b/frontend/src/components/Calendar/Calendar.tsx
@@ -5,8 +5,13 @@ import { ArrowLeftIcon, ArrowRightIcon } from '~/assets/svg';
 import useCalendar from '~/hooks/useCalendar';
 import * as S from './Calendar.styled';
 import ScheduleBar from '~/components/ScheduleBar/ScheduleBar';
-import type { Schedule } from '~/types/schedule';
+import type { Schedule, SchedulePosition } from '~/types/schedule';
 import { generateScheduleBars } from '~/utils/generateScheduleBars';
+import { useModal } from '~/hooks/useModal';
+import { useEffect, useState } from 'react';
+import ScheduleModal from '~/components/ScheduleModal/ScheduleModal';
+import { useFetchScheduleById } from '~/hooks/queries/useFetchSchedule';
+import { useDeleteSchedule } from '~/hooks/queries/useDeleteSchedule';
 
 const DAYS_OF_WEEK = ['일', '월', '화', '수', '목', '금', '토'] as const;
 
@@ -20,12 +25,43 @@ const Calendar = (props: CalendarProps) => {
     year,
     month,
     calendar,
-
     handlers: { handlePrevButtonClick, handleNextButtonClick },
   } = useCalendar();
 
+  const { openModal, closeModal } = useModal();
   const scheduleBars = generateScheduleBars(year, month, schedules);
 
+  const [modalScheduleId, setModalScheduleId] = useState<number>(
+    scheduleBars[0].scheduleId,
+  );
+
+  const { scheduleById } = useFetchScheduleById(1, modalScheduleId);
+  const { mutateScheduleDelete } = useDeleteSchedule(1, modalScheduleId);
+  const [modalPosition, setModalPosition] = useState<SchedulePosition>({
+    row: 0,
+    column: 0,
+    level: 0,
+  });
+
+  useEffect(() => {
+    setModalScheduleId(scheduleBars[0].scheduleId);
+  }, []);
+  const handleScheduleModalOpen = (
+    scheduleId: number,
+    row: number,
+    column: number,
+    level: number,
+  ) => {
+    setModalScheduleId(scheduleId);
+    setModalPosition({ row, column, level });
+    openModal();
+  };
+
+  const onScheduleDelete = () => {
+    closeModal();
+    mutateScheduleDelete();
+  };
+
   return (
     <>
       <S.CalendarHeader>
@@ -58,12 +94,27 @@ const Calendar = (props: CalendarProps) => {
             return (
               <>
                 <S.ScheduleBarContainer>
-                  {scheduleBars.map((scheduleBar) => {
-                    const { id, row, ...rest } = scheduleBar;
-
+                  {scheduleBars.map((scheduleBar, index) => {
+                    const { id, row, column, level, scheduleId, ...rest } =
+                      scheduleBar;
                     if (row === rowIndex)
                       return (
-                        <ScheduleBar key={id} id={id} row={row} {...rest} />
+                        <ScheduleBar
+                          id={id}
+                          scheduleId={scheduleId}
+                          row={row}
+                          column={column}
+                          level={level}
+                          handleClick={() =>
+                            handleScheduleModalOpen(
+                              scheduleId,
+                              row,
+                              column,
+                              level,
+                            )
+                          }
+                          {...rest}
+                        />
                       );
 
                     return null;
@@ -85,6 +136,13 @@ const Calendar = (props: CalendarProps) => {
           })}
         </S.DateContainer>
       </S.CalendarBody>
+      {scheduleById && (
+        <ScheduleModal
+          schedule={scheduleById}
+          position={modalPosition}
+          handleScheduleDelete={onScheduleDelete}
+        />
+      )}
     </>
   );
 };
diff --git a/frontend/src/utils/generateScheduleBars.ts b/frontend/src/utils/generateScheduleBars.ts
index 0ab1a3c92..fae64d75d 100644
--- a/frontend/src/utils/generateScheduleBars.ts
+++ b/frontend/src/utils/generateScheduleBars.ts
@@ -1,13 +1,8 @@
-import type { ScheduleBarProps } from '~/components/ScheduleBar/ScheduleBar';
+import type { ScheduleBar } from '~/components/ScheduleBar/ScheduleBar';
 import { CALENDAR, ONE_DAY } from '~/constants/calendar';
-import type { Schedule } from '~/types/schedule';
+import type { Position, Schedule } from '~/types/schedule';
 import { parseDate } from '~/utils/parseDate';
 
-interface Position {
-  row: number;
-  column: number;
-}
-
 type CalendarObject = Record<string, Position>;
 
 /**
@@ -90,7 +85,7 @@ const generateRawScheduleBars = (
   schedules: Schedule[],
   calendarObject: CalendarObject,
 ) => {
-  const rawScheduleBars: ScheduleBarProps[] = [];
+  const rawScheduleBars: ScheduleBar[] = [];
 
   schedules.forEach((schedule) => {
     const { startDateTime, endDateTime, id: scheduleId, title } = schedule;
@@ -139,7 +134,7 @@ const calcDuration = (start: Date, end: Date) => {
   return Math.abs(diff / ONE_DAY) + 1;
 };
 
-const sortScheduleBars = (scheduleBars: ScheduleBarProps[]) => {
+const sortScheduleBars = (scheduleBars: ScheduleBar[]) => {
   return [...scheduleBars].sort((a, b) => {
     if (a.row !== b.row) {
       return a.row - b.row;
@@ -153,8 +148,8 @@ const sortScheduleBars = (scheduleBars: ScheduleBarProps[]) => {
   });
 };
 
-const sliceScheduleBars = (rawScheduleBars: ScheduleBarProps[]) => {
-  const slicedScheduleBars: ScheduleBarProps[] = [];
+const sliceScheduleBars = (rawScheduleBars: ScheduleBar[]) => {
+  const slicedScheduleBars: ScheduleBar[] = [];
 
   rawScheduleBars.forEach((scheduleBar) => {
     const { row, column, duration } = scheduleBar;
@@ -184,8 +179,8 @@ const sliceScheduleBars = (rawScheduleBars: ScheduleBarProps[]) => {
   return slicedScheduleBars;
 };
 
-const giveLevelToScheduleBars = (scheduleBars: ScheduleBarProps[]) => {
-  const leveledScheduleBars: ScheduleBarProps[] = [];
+const giveLevelToScheduleBars = (scheduleBars: ScheduleBar[]) => {
+  const leveledScheduleBars: ScheduleBar[] = [];
   const lastIndexes: number[] = [];
   const sortedScheduleBars = sortScheduleBars(scheduleBars);
 

From 76acd94a18bb886eac1c65f4edcc7a0a59d6819a Mon Sep 17 00:00:00 2001
From: hafnium1923 <hafnium1923@gmail.com>
Date: Thu, 20 Jul 2023 11:05:35 +0900
Subject: [PATCH 09/17] fix: syntax Error fix

---
 frontend/src/apis/http.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/apis/http.ts b/frontend/src/apis/http.ts
index 782ec9383..f6b621554 100644
--- a/frontend/src/apis/http.ts
+++ b/frontend/src/apis/http.ts
@@ -19,8 +19,8 @@ export const http = {
   post: async (url: RequestInfo | URL, body: unknown) => {
     const response = await fetch(url, {
       method: 'POST',
-      body: JSON.stringify(body),
       ...options,
+      body: JSON.stringify(body),
     });
 
     if (!response.ok) {
@@ -33,8 +33,8 @@ export const http = {
   patch: async (url: RequestInfo | URL, body: unknown) => {
     const response = await fetch(url, {
       method: 'PATCH',
-      body: JSON.stringify(body),
       ...options,
+      body: JSON.stringify(body),
     });
 
     if (!response.ok) {

From 19841d4483e6b6106920c5872bacc1feb7452438 Mon Sep 17 00:00:00 2001
From: hafnium1923 <hafnium1923@gmail.com>
Date: Thu, 20 Jul 2023 11:06:04 +0900
Subject: [PATCH 10/17] =?UTF-8?q?refactor:=20=EC=9D=BC=EC=A0=95=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20API=20=ED=8C=8C=EC=9D=BC=20=EC=9D=B4?=
 =?UTF-8?q?=EB=A6=84=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../queries/{useFetchSchedule.ts => useFetchScheduleById.ts}      | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename frontend/src/hooks/queries/{useFetchSchedule.ts => useFetchScheduleById.ts} (100%)

diff --git a/frontend/src/hooks/queries/useFetchSchedule.ts b/frontend/src/hooks/queries/useFetchScheduleById.ts
similarity index 100%
rename from frontend/src/hooks/queries/useFetchSchedule.ts
rename to frontend/src/hooks/queries/useFetchScheduleById.ts

From 855eabc6d0fe84928ec544c24ff7f49cfab6f65d Mon Sep 17 00:00:00 2001
From: hafnium1923 <hafnium1923@gmail.com>
Date: Thu, 20 Jul 2023 11:06:55 +0900
Subject: [PATCH 11/17] =?UTF-8?q?refactor:=20=EC=9D=BC=EC=A0=95=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=ED=9B=84=20=EC=A0=84=EC=B2=B4=20=EC=9D=BC?=
 =?UTF-8?q?=EC=A0=95=20=EB=8B=A4=EC=8B=9C=20=EB=B6=88=EB=9F=AC=EC=98=A4?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Calendar/Calendar.tsx           | 2 +-
 frontend/src/components/ScheduleModal/ScheduleModal.tsx | 3 +--
 frontend/src/hooks/queries/useDeleteSchedule.ts         | 3 +--
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Calendar/Calendar.tsx b/frontend/src/components/Calendar/Calendar.tsx
index 4c2a96038..5c29ff1b1 100644
--- a/frontend/src/components/Calendar/Calendar.tsx
+++ b/frontend/src/components/Calendar/Calendar.tsx
@@ -10,7 +10,7 @@ import { generateScheduleBars } from '~/utils/generateScheduleBars';
 import { useModal } from '~/hooks/useModal';
 import { useEffect, useState } from 'react';
 import ScheduleModal from '~/components/ScheduleModal/ScheduleModal';
-import { useFetchScheduleById } from '~/hooks/queries/useFetchSchedule';
+import { useFetchScheduleById } from '~/hooks/queries/useFetchScheduleById';
 import { useDeleteSchedule } from '~/hooks/queries/useDeleteSchedule';
 
 const DAYS_OF_WEEK = ['일', '월', '화', '수', '목', '금', '토'] as const;
diff --git a/frontend/src/components/ScheduleModal/ScheduleModal.tsx b/frontend/src/components/ScheduleModal/ScheduleModal.tsx
index 45b98d531..061d541c7 100644
--- a/frontend/src/components/ScheduleModal/ScheduleModal.tsx
+++ b/frontend/src/components/ScheduleModal/ScheduleModal.tsx
@@ -17,9 +17,8 @@ const ScheduleModal = (props: ScheduleModalProps) => {
   const { schedule, handleScheduleDelete, position } = props;
   const { closeModal } = useModal();
 
-  const { id, title, startDateTime, endDateTime } = schedule;
+  const { title, startDateTime, endDateTime } = schedule;
 
-  console.log(position);
   const modalLocation: CSSProperties = {
     position: 'absolute',
     top:
diff --git a/frontend/src/hooks/queries/useDeleteSchedule.ts b/frontend/src/hooks/queries/useDeleteSchedule.ts
index 8632d23ec..7ca2bdf53 100644
--- a/frontend/src/hooks/queries/useDeleteSchedule.ts
+++ b/frontend/src/hooks/queries/useDeleteSchedule.ts
@@ -8,8 +8,7 @@ export const useDeleteSchedule = (teamPlaceId: number, scheduleId: number) => {
     () => deleteSchedule(teamPlaceId, scheduleId),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: ['schedules'] });
-        queryClient.invalidateQueries({ queryKey: ['schedule'] });
+        queryClient.refetchQueries({ queryKey: ['schedules'] });
       },
     },
   );

From 3dd8e69160dd23a81d227cdc8f73d5c810597dc7 Mon Sep 17 00:00:00 2001
From: hafnium1923 <hafnium1923@gmail.com>
Date: Thu, 20 Jul 2023 11:10:04 +0900
Subject: [PATCH 12/17] =?UTF-8?q?refactor:=20=EC=82=AD=EC=A0=9C=20?=
 =?UTF-8?q?=EB=B9=84=EB=8F=99=EA=B8=B0=EB=A1=9C=EC=A7=81=EC=97=90=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EC=B2=98=EB=A6=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/queries/useDeleteSchedule.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/hooks/queries/useDeleteSchedule.ts b/frontend/src/hooks/queries/useDeleteSchedule.ts
index 7ca2bdf53..491142a9b 100644
--- a/frontend/src/hooks/queries/useDeleteSchedule.ts
+++ b/frontend/src/hooks/queries/useDeleteSchedule.ts
@@ -10,6 +10,10 @@ export const useDeleteSchedule = (teamPlaceId: number, scheduleId: number) => {
       onSuccess: () => {
         queryClient.refetchQueries({ queryKey: ['schedules'] });
       },
+      onError: () => {
+        alert('오류가 발생했습니다. 잠시 후 다시 시도해주세요.');
+        throw new Error();
+      },
     },
   );
 

From d5f8f60f1bb18d13d5cf2251c9c82c267287c870 Mon Sep 17 00:00:00 2001
From: hafnium1923 <hafnium1923@gmail.com>
Date: Thu, 20 Jul 2023 11:21:34 +0900
Subject: [PATCH 13/17] =?UTF-8?q?refactor:=20useSchedulModal=20=ED=9B=85?=
 =?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

---
 frontend/src/components/Calendar/Calendar.tsx | 45 +++--------------
 frontend/src/hooks/useScheduleModal.ts        | 50 +++++++++++++++++++
 2 files changed, 57 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/hooks/useScheduleModal.ts

diff --git a/frontend/src/components/Calendar/Calendar.tsx b/frontend/src/components/Calendar/Calendar.tsx
index 5c29ff1b1..ea0f8ac72 100644
--- a/frontend/src/components/Calendar/Calendar.tsx
+++ b/frontend/src/components/Calendar/Calendar.tsx
@@ -5,13 +5,10 @@ import { ArrowLeftIcon, ArrowRightIcon } from '~/assets/svg';
 import useCalendar from '~/hooks/useCalendar';
 import * as S from './Calendar.styled';
 import ScheduleBar from '~/components/ScheduleBar/ScheduleBar';
-import type { Schedule, SchedulePosition } from '~/types/schedule';
+import type { Schedule } from '~/types/schedule';
 import { generateScheduleBars } from '~/utils/generateScheduleBars';
-import { useModal } from '~/hooks/useModal';
-import { useEffect, useState } from 'react';
 import ScheduleModal from '~/components/ScheduleModal/ScheduleModal';
-import { useFetchScheduleById } from '~/hooks/queries/useFetchScheduleById';
-import { useDeleteSchedule } from '~/hooks/queries/useDeleteSchedule';
+import { useScheduleModal } from '~/hooks/useScheduleModal';
 
 const DAYS_OF_WEEK = ['일', '월', '화', '수', '목', '금', '토'] as const;
 
@@ -27,40 +24,12 @@ const Calendar = (props: CalendarProps) => {
     calendar,
     handlers: { handlePrevButtonClick, handleNextButtonClick },
   } = useCalendar();
-
-  const { openModal, closeModal } = useModal();
   const scheduleBars = generateScheduleBars(year, month, schedules);
-
-  const [modalScheduleId, setModalScheduleId] = useState<number>(
-    scheduleBars[0].scheduleId,
-  );
-
-  const { scheduleById } = useFetchScheduleById(1, modalScheduleId);
-  const { mutateScheduleDelete } = useDeleteSchedule(1, modalScheduleId);
-  const [modalPosition, setModalPosition] = useState<SchedulePosition>({
-    row: 0,
-    column: 0,
-    level: 0,
-  });
-
-  useEffect(() => {
-    setModalScheduleId(scheduleBars[0].scheduleId);
-  }, []);
-  const handleScheduleModalOpen = (
-    scheduleId: number,
-    row: number,
-    column: number,
-    level: number,
-  ) => {
-    setModalScheduleId(scheduleId);
-    setModalPosition({ row, column, level });
-    openModal();
-  };
-
-  const onScheduleDelete = () => {
-    closeModal();
-    mutateScheduleDelete();
-  };
+  const {
+    modalPosition,
+    scheduleById,
+    handlers: { handleScheduleModalOpen, onScheduleDelete },
+  } = useScheduleModal(scheduleBars);
 
   return (
     <>
diff --git a/frontend/src/hooks/useScheduleModal.ts b/frontend/src/hooks/useScheduleModal.ts
new file mode 100644
index 000000000..7835be937
--- /dev/null
+++ b/frontend/src/hooks/useScheduleModal.ts
@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+import type { ScheduleBar } from '~/components/ScheduleBar/ScheduleBar';
+import { useDeleteSchedule } from '~/hooks/queries/useDeleteSchedule';
+import { useFetchScheduleById } from '~/hooks/queries/useFetchScheduleById';
+import { useModal } from '~/hooks/useModal';
+import type { SchedulePosition } from '~/types/schedule';
+
+export const useScheduleModal = (scheduleBars: ScheduleBar[]) => {
+  const [modalScheduleId, setModalScheduleId] = useState<number>(
+    scheduleBars[0].scheduleId,
+  );
+  const [modalPosition, setModalPosition] = useState<SchedulePosition>({
+    row: 0,
+    column: 0,
+    level: 0,
+  });
+  const { openModal, closeModal } = useModal();
+  const { scheduleById } = useFetchScheduleById(1, modalScheduleId);
+  const { mutateScheduleDelete } = useDeleteSchedule(1, modalScheduleId);
+
+  useEffect(() => {
+    setModalScheduleId(scheduleBars[0].scheduleId);
+  }, []);
+
+  const handleScheduleModalOpen = (
+    scheduleId: number,
+    row: number,
+    column: number,
+    level: number,
+  ) => {
+    setModalScheduleId(scheduleId);
+    setModalPosition({ row, column, level });
+    openModal();
+  };
+
+  const onScheduleDelete = () => {
+    closeModal();
+    mutateScheduleDelete();
+  };
+
+  return {
+    modalPosition,
+    scheduleById,
+
+    handlers: {
+      handleScheduleModalOpen,
+      onScheduleDelete,
+    },
+  };
+};

From 60a6970f300b6f2c05f874ff00479d3474d51cbd Mon Sep 17 00:00:00 2001
From: hafnium1923 <hafnium1923@gmail.com>
Date: Thu, 20 Jul 2023 14:28:40 +0900
Subject: [PATCH 14/17] =?UTF-8?q?refactor:=20=EB=A6=AC=EB=B7=B0=EB=B0=98?=
 =?UTF-8?q?=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Calendar/Calendar.tsx  | 15 +++++----------
 .../ScheduleBar/ScheduleBar.stories.tsx        |  2 +-
 .../src/components/ScheduleBar/ScheduleBar.tsx | 11 ++++++++---
 .../ScheduleModal/ScheduleModal.stories.tsx    | 18 ++++--------------
 .../ScheduleModal/ScheduleModal.styled.ts      |  1 +
 .../components/ScheduleModal/ScheduleModal.tsx |  6 +++---
 .../src/hooks/queries/useDeleteSchedule.ts     |  2 +-
 .../hooks/{ => schedule}/useScheduleModal.ts   |  7 ++-----
 frontend/src/utils/formatDateTime.ts           |  2 +-
 9 files changed, 26 insertions(+), 38 deletions(-)
 rename frontend/src/hooks/{ => schedule}/useScheduleModal.ts (91%)

diff --git a/frontend/src/components/Calendar/Calendar.tsx b/frontend/src/components/Calendar/Calendar.tsx
index ea0f8ac72..18cf1c05f 100644
--- a/frontend/src/components/Calendar/Calendar.tsx
+++ b/frontend/src/components/Calendar/Calendar.tsx
@@ -8,7 +8,7 @@ import ScheduleBar from '~/components/ScheduleBar/ScheduleBar';
 import type { Schedule } from '~/types/schedule';
 import { generateScheduleBars } from '~/utils/generateScheduleBars';
 import ScheduleModal from '~/components/ScheduleModal/ScheduleModal';
-import { useScheduleModal } from '~/hooks/useScheduleModal';
+import { useScheduleModal } from '~/hooks/schedule/useScheduleModal';
 
 const DAYS_OF_WEEK = ['일', '월', '화', '수', '목', '금', '토'] as const;
 
@@ -28,7 +28,7 @@ const Calendar = (props: CalendarProps) => {
   const {
     modalPosition,
     scheduleById,
-    handlers: { handleScheduleModalOpen, onScheduleDelete },
+    handlers: { onScheduleModalOpen, onScheduleDelete },
   } = useScheduleModal(scheduleBars);
 
   return (
@@ -74,13 +74,8 @@ const Calendar = (props: CalendarProps) => {
                           row={row}
                           column={column}
                           level={level}
-                          handleClick={() =>
-                            handleScheduleModalOpen(
-                              scheduleId,
-                              row,
-                              column,
-                              level,
-                            )
+                          onScheduleModalOpen={() =>
+                            onScheduleModalOpen(scheduleId, row, column, level)
                           }
                           {...rest}
                         />
@@ -109,7 +104,7 @@ const Calendar = (props: CalendarProps) => {
         <ScheduleModal
           schedule={scheduleById}
           position={modalPosition}
-          handleScheduleDelete={onScheduleDelete}
+          onScheduleDelete={onScheduleDelete}
         />
       )}
     </>
diff --git a/frontend/src/components/ScheduleBar/ScheduleBar.stories.tsx b/frontend/src/components/ScheduleBar/ScheduleBar.stories.tsx
index 02ab6a864..8a1dced5d 100644
--- a/frontend/src/components/ScheduleBar/ScheduleBar.stories.tsx
+++ b/frontend/src/components/ScheduleBar/ScheduleBar.stories.tsx
@@ -20,6 +20,6 @@ export const Default: Story = {
     column: 2,
     duration: 3,
     level: 0,
-    handleClick: () => console.log('click'),
+    onScheduleModalOpen: () => console.log('click'),
   },
 };
diff --git a/frontend/src/components/ScheduleBar/ScheduleBar.tsx b/frontend/src/components/ScheduleBar/ScheduleBar.tsx
index 5e35384a3..5bbf81ed2 100644
--- a/frontend/src/components/ScheduleBar/ScheduleBar.tsx
+++ b/frontend/src/components/ScheduleBar/ScheduleBar.tsx
@@ -12,13 +12,18 @@ export interface ScheduleBar {
 }
 
 interface ScheduleBarProps extends ScheduleBar {
-  handleClick: () => void;
+  onScheduleModalOpen: () => void;
 }
 
 const ScheduleBar = (props: ScheduleBarProps) => {
-  const { color = 'red', title, handleClick, ...rest } = props;
+  const { color = 'red', title, onScheduleModalOpen, ...rest } = props;
   return (
-    <S.Wrapper color={color} title={title} onClick={handleClick} {...rest} />
+    <S.Wrapper
+      color={color}
+      title={title}
+      onClick={onScheduleModalOpen}
+      {...rest}
+    />
   );
 };
 
diff --git a/frontend/src/components/ScheduleModal/ScheduleModal.stories.tsx b/frontend/src/components/ScheduleModal/ScheduleModal.stories.tsx
index 12e1f3370..c92558393 100644
--- a/frontend/src/components/ScheduleModal/ScheduleModal.stories.tsx
+++ b/frontend/src/components/ScheduleModal/ScheduleModal.stories.tsx
@@ -16,26 +16,16 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render: () => {
     const { openModal } = useModal();
-    const refs = arrayOf(5).map(() => useRef(null));
 
-    const [targetRef, setTargetRef] = useState<React.RefObject<HTMLDivElement>>(
-      refs[0],
-    );
-
-    const handleOpen = (index: number) => {
+    const handleOpen = () => {
       openModal();
-      setTargetRef(refs[index]);
     };
 
     return (
       <>
         {arrayOf(5).map((_, index) => {
           return (
-            <div
-              key={index}
-              ref={refs[index]}
-              onClick={() => handleOpen(index)}
-            >
+            <div key={index} onClick={() => handleOpen()}>
               모달 열기
             </div>
           );
@@ -52,7 +42,7 @@ export const Default: Story = {
             column: 0,
             level: 0,
           }}
-          handleScheduleDelete={() => {
+          onScheduleDelete={() => {
             alert('click');
           }}
         />
@@ -71,7 +61,7 @@ export const Default: Story = {
       column: 0,
       level: 0,
     },
-    handleScheduleDelete: () => {
+    onScheduleDelete: () => {
       alert('click');
     },
   },
diff --git a/frontend/src/components/ScheduleModal/ScheduleModal.styled.ts b/frontend/src/components/ScheduleModal/ScheduleModal.styled.ts
index 790f28ca8..f01419b05 100644
--- a/frontend/src/components/ScheduleModal/ScheduleModal.styled.ts
+++ b/frontend/src/components/ScheduleModal/ScheduleModal.styled.ts
@@ -18,6 +18,7 @@ export const Container = styled.div`
     0 15px 25px #1b1d1f33,
     0 5px 10px #1b1d1f1f;
 `;
+
 export const Backdrop = styled.div`
   position: fixed;
   top: 0;
diff --git a/frontend/src/components/ScheduleModal/ScheduleModal.tsx b/frontend/src/components/ScheduleModal/ScheduleModal.tsx
index 061d541c7..11988d938 100644
--- a/frontend/src/components/ScheduleModal/ScheduleModal.tsx
+++ b/frontend/src/components/ScheduleModal/ScheduleModal.tsx
@@ -11,10 +11,10 @@ import type { Schedule, SchedulePosition } from '~/types/schedule';
 interface ScheduleModalProps {
   schedule: Schedule;
   position: SchedulePosition;
-  handleScheduleDelete: () => void;
+  onScheduleDelete: () => void;
 }
 const ScheduleModal = (props: ScheduleModalProps) => {
-  const { schedule, handleScheduleDelete, position } = props;
+  const { schedule, onScheduleDelete, position } = props;
   const { closeModal } = useModal();
 
   const { title, startDateTime, endDateTime } = schedule;
@@ -49,7 +49,7 @@ const ScheduleModal = (props: ScheduleModalProps) => {
             <Button size="sm" variant="plain">
               <EditIcon />
             </Button>
-            <Button size="sm" variant="plain" onClick={handleScheduleDelete}>
+            <Button size="sm" variant="plain" onClick={onScheduleDelete}>
               <DeleteIcon />
             </Button>
             <Button size="sm" variant="plain" onClick={closeModal}>
diff --git a/frontend/src/hooks/queries/useDeleteSchedule.ts b/frontend/src/hooks/queries/useDeleteSchedule.ts
index 491142a9b..4f08db9d0 100644
--- a/frontend/src/hooks/queries/useDeleteSchedule.ts
+++ b/frontend/src/hooks/queries/useDeleteSchedule.ts
@@ -8,7 +8,7 @@ export const useDeleteSchedule = (teamPlaceId: number, scheduleId: number) => {
     () => deleteSchedule(teamPlaceId, scheduleId),
     {
       onSuccess: () => {
-        queryClient.refetchQueries({ queryKey: ['schedules'] });
+        queryClient.invalidateQueries({ queryKey: ['schedules'] });
       },
       onError: () => {
         alert('오류가 발생했습니다. 잠시 후 다시 시도해주세요.');
diff --git a/frontend/src/hooks/useScheduleModal.ts b/frontend/src/hooks/schedule/useScheduleModal.ts
similarity index 91%
rename from frontend/src/hooks/useScheduleModal.ts
rename to frontend/src/hooks/schedule/useScheduleModal.ts
index 7835be937..b465dc967 100644
--- a/frontend/src/hooks/useScheduleModal.ts
+++ b/frontend/src/hooks/schedule/useScheduleModal.ts
@@ -22,7 +22,7 @@ export const useScheduleModal = (scheduleBars: ScheduleBar[]) => {
     setModalScheduleId(scheduleBars[0].scheduleId);
   }, []);
 
-  const handleScheduleModalOpen = (
+  const onScheduleModalOpen = (
     scheduleId: number,
     row: number,
     column: number,
@@ -42,9 +42,6 @@ export const useScheduleModal = (scheduleBars: ScheduleBar[]) => {
     modalPosition,
     scheduleById,
 
-    handlers: {
-      handleScheduleModalOpen,
-      onScheduleDelete,
-    },
+    handlers: { onScheduleModalOpen, onScheduleDelete },
   };
 };
diff --git a/frontend/src/utils/formatDateTime.ts b/frontend/src/utils/formatDateTime.ts
index a6a5a22bf..a769824a2 100644
--- a/frontend/src/utils/formatDateTime.ts
+++ b/frontend/src/utils/formatDateTime.ts
@@ -4,5 +4,5 @@ export const formatDateTime = (rawDateTime: YYYYMMDDHHMM) => {
   const [rawDate, time] = rawDateTime.split(' ');
   const date = rawDate.split('-');
 
-  return `${date[0]}년 ${date[1]}월 ${date[0]}일 ${time}`;
+  return `${date[0]}년 ${date[1]}월 ${date[2]}일 ${time}`;
 };

From 9539b991bf162a018ab77399699e9a88daf118f5 Mon Sep 17 00:00:00 2001
From: hafnium1923 <hafnium1923@gmail.com>
Date: Thu, 20 Jul 2023 14:52:07 +0900
Subject: [PATCH 15/17] =?UTF-8?q?refactor:=20scheduleBar=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ScheduleBar/ScheduleBar.styled.ts   |  4 ++--
 .../src/components/ScheduleBar/ScheduleBar.tsx     |  7 ++-----
 frontend/src/utils/generateScheduleBars.ts         | 14 +++++++-------
 3 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/ScheduleBar/ScheduleBar.styled.ts b/frontend/src/components/ScheduleBar/ScheduleBar.styled.ts
index a387810a0..fcba340ab 100644
--- a/frontend/src/components/ScheduleBar/ScheduleBar.styled.ts
+++ b/frontend/src/components/ScheduleBar/ScheduleBar.styled.ts
@@ -1,7 +1,7 @@
 import { styled } from 'styled-components';
-import type { ScheduleBar } from '~/components/ScheduleBar/ScheduleBar';
+import type { ScheduleBarProps } from '~/components/ScheduleBar/ScheduleBar';
 
-export const Wrapper = styled.div<ScheduleBar>`
+export const Wrapper = styled.div<ScheduleBarProps>`
   position: absolute;
 
   top: ${({ level }) => level * 18 + 36}px;
diff --git a/frontend/src/components/ScheduleBar/ScheduleBar.tsx b/frontend/src/components/ScheduleBar/ScheduleBar.tsx
index 5bbf81ed2..f7bf8d68d 100644
--- a/frontend/src/components/ScheduleBar/ScheduleBar.tsx
+++ b/frontend/src/components/ScheduleBar/ScheduleBar.tsx
@@ -1,6 +1,6 @@
 import * as S from './ScheduleBar.styled';
 
-export interface ScheduleBar {
+export interface ScheduleBarProps {
   id: string;
   scheduleId: number;
   title: string;
@@ -9,10 +9,7 @@ export interface ScheduleBar {
   duration: number;
   level: number;
   color?: string;
-}
-
-interface ScheduleBarProps extends ScheduleBar {
-  onScheduleModalOpen: () => void;
+  onScheduleModalOpen?: () => void;
 }
 
 const ScheduleBar = (props: ScheduleBarProps) => {
diff --git a/frontend/src/utils/generateScheduleBars.ts b/frontend/src/utils/generateScheduleBars.ts
index fae64d75d..3a5571be8 100644
--- a/frontend/src/utils/generateScheduleBars.ts
+++ b/frontend/src/utils/generateScheduleBars.ts
@@ -1,4 +1,4 @@
-import type { ScheduleBar } from '~/components/ScheduleBar/ScheduleBar';
+import type { ScheduleBarProps } from '~/components/ScheduleBar/ScheduleBar';
 import { CALENDAR, ONE_DAY } from '~/constants/calendar';
 import type { Position, Schedule } from '~/types/schedule';
 import { parseDate } from '~/utils/parseDate';
@@ -85,7 +85,7 @@ const generateRawScheduleBars = (
   schedules: Schedule[],
   calendarObject: CalendarObject,
 ) => {
-  const rawScheduleBars: ScheduleBar[] = [];
+  const rawScheduleBars: ScheduleBarProps[] = [];
 
   schedules.forEach((schedule) => {
     const { startDateTime, endDateTime, id: scheduleId, title } = schedule;
@@ -134,7 +134,7 @@ const calcDuration = (start: Date, end: Date) => {
   return Math.abs(diff / ONE_DAY) + 1;
 };
 
-const sortScheduleBars = (scheduleBars: ScheduleBar[]) => {
+const sortScheduleBars = (scheduleBars: ScheduleBarProps[]) => {
   return [...scheduleBars].sort((a, b) => {
     if (a.row !== b.row) {
       return a.row - b.row;
@@ -148,8 +148,8 @@ const sortScheduleBars = (scheduleBars: ScheduleBar[]) => {
   });
 };
 
-const sliceScheduleBars = (rawScheduleBars: ScheduleBar[]) => {
-  const slicedScheduleBars: ScheduleBar[] = [];
+const sliceScheduleBars = (rawScheduleBars: ScheduleBarProps[]) => {
+  const slicedScheduleBars: ScheduleBarProps[] = [];
 
   rawScheduleBars.forEach((scheduleBar) => {
     const { row, column, duration } = scheduleBar;
@@ -179,8 +179,8 @@ const sliceScheduleBars = (rawScheduleBars: ScheduleBar[]) => {
   return slicedScheduleBars;
 };
 
-const giveLevelToScheduleBars = (scheduleBars: ScheduleBar[]) => {
-  const leveledScheduleBars: ScheduleBar[] = [];
+const giveLevelToScheduleBars = (scheduleBars: ScheduleBarProps[]) => {
+  const leveledScheduleBars: ScheduleBarProps[] = [];
   const lastIndexes: number[] = [];
   const sortedScheduleBars = sortScheduleBars(scheduleBars);
 

From 167ffaad622912456ed3b0c098448854c74fbe45 Mon Sep 17 00:00:00 2001
From: hafnium1923 <hafnium1923@gmail.com>
Date: Thu, 20 Jul 2023 15:27:40 +0900
Subject: [PATCH 16/17] =?UTF-8?q?fix:=20=EC=9D=BC=EC=A0=95=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=EC=8B=9C=20404=20=EB=9C=A8=EB=8A=94=20=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Calendar/Calendar.tsx | 23 +++++----
 .../ScheduleModal/ScheduleModal.stories.tsx   | 21 +-------
 .../ScheduleModal/ScheduleModal.tsx           | 41 ++++++++-------
 .../src/hooks/schedule/useScheduleModal.ts    | 51 ++++++++-----------
 4 files changed, 59 insertions(+), 77 deletions(-)

diff --git a/frontend/src/components/Calendar/Calendar.tsx b/frontend/src/components/Calendar/Calendar.tsx
index 18cf1c05f..03e6496d7 100644
--- a/frontend/src/components/Calendar/Calendar.tsx
+++ b/frontend/src/components/Calendar/Calendar.tsx
@@ -9,6 +9,7 @@ import type { Schedule } from '~/types/schedule';
 import { generateScheduleBars } from '~/utils/generateScheduleBars';
 import ScheduleModal from '~/components/ScheduleModal/ScheduleModal';
 import { useScheduleModal } from '~/hooks/schedule/useScheduleModal';
+import { useModal } from '~/hooks/useModal';
 
 const DAYS_OF_WEEK = ['일', '월', '화', '수', '목', '금', '토'] as const;
 
@@ -26,10 +27,11 @@ const Calendar = (props: CalendarProps) => {
   } = useCalendar();
   const scheduleBars = generateScheduleBars(year, month, schedules);
   const {
+    modalScheduleId,
     modalPosition,
-    scheduleById,
-    handlers: { onScheduleModalOpen, onScheduleDelete },
-  } = useScheduleModal(scheduleBars);
+    handlers: { onScheduleModalOpen },
+  } = useScheduleModal();
+  const { isModalOpen } = useModal();
 
   return (
     <>
@@ -75,7 +77,12 @@ const Calendar = (props: CalendarProps) => {
                           column={column}
                           level={level}
                           onScheduleModalOpen={() =>
-                            onScheduleModalOpen(scheduleId, row, column, level)
+                            onScheduleModalOpen({
+                              scheduleId,
+                              row,
+                              column,
+                              level,
+                            })
                           }
                           {...rest}
                         />
@@ -100,12 +107,8 @@ const Calendar = (props: CalendarProps) => {
           })}
         </S.DateContainer>
       </S.CalendarBody>
-      {scheduleById && (
-        <ScheduleModal
-          schedule={scheduleById}
-          position={modalPosition}
-          onScheduleDelete={onScheduleDelete}
-        />
+      {isModalOpen && (
+        <ScheduleModal scheduleId={modalScheduleId} position={modalPosition} />
       )}
     </>
   );
diff --git a/frontend/src/components/ScheduleModal/ScheduleModal.stories.tsx b/frontend/src/components/ScheduleModal/ScheduleModal.stories.tsx
index c92558393..cc35566ec 100644
--- a/frontend/src/components/ScheduleModal/ScheduleModal.stories.tsx
+++ b/frontend/src/components/ScheduleModal/ScheduleModal.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useModal } from '~/hooks/useModal';
 import ScheduleModal from '~/components/ScheduleModal/ScheduleModal';
-import { useRef, useState } from 'react';
 import { arrayOf } from '~/utils/arrayOf';
 
 const meta = {
@@ -31,38 +30,22 @@ export const Default: Story = {
           );
         })}
         <ScheduleModal
-          schedule={{
-            id: 0,
-            title: 'test0',
-            startDateTime: '2023-07-13 00:00',
-            endDateTime: '2023-07-14 23:59',
-          }}
+          scheduleId={1}
           position={{
             row: 0,
             column: 0,
             level: 0,
           }}
-          onScheduleDelete={() => {
-            alert('click');
-          }}
         />
       </>
     );
   },
   args: {
-    schedule: {
-      id: 0,
-      title: 'test0',
-      startDateTime: '2023-07-13 00:00',
-      endDateTime: '2023-07-14 23:59',
-    },
+    scheduleId: 1,
     position: {
       row: 0,
       column: 0,
       level: 0,
     },
-    onScheduleDelete: () => {
-      alert('click');
-    },
   },
 };
diff --git a/frontend/src/components/ScheduleModal/ScheduleModal.tsx b/frontend/src/components/ScheduleModal/ScheduleModal.tsx
index 11988d938..8df776825 100644
--- a/frontend/src/components/ScheduleModal/ScheduleModal.tsx
+++ b/frontend/src/components/ScheduleModal/ScheduleModal.tsx
@@ -6,32 +6,39 @@ import * as S from './ScheduleModal.styled';
 import { CloseIcon, DeleteIcon, EditIcon } from '~/assets/svg';
 import Button from '~/components/common/Button/Button';
 import { formatDateTime } from '~/utils/formatDateTime';
-import type { Schedule, SchedulePosition } from '~/types/schedule';
+import type { SchedulePosition } from '~/types/schedule';
+import { useFetchScheduleById } from '~/hooks/queries/useFetchScheduleById';
+import { useDeleteSchedule } from '~/hooks/queries/useDeleteSchedule';
 
 interface ScheduleModalProps {
-  schedule: Schedule;
+  scheduleId: number;
   position: SchedulePosition;
-  onScheduleDelete: () => void;
 }
+
 const ScheduleModal = (props: ScheduleModalProps) => {
-  const { schedule, onScheduleDelete, position } = props;
+  const { scheduleId, position } = props;
   const { closeModal } = useModal();
+  const { scheduleById } = useFetchScheduleById(1, scheduleId);
+  const { mutateScheduleDelete } = useDeleteSchedule(1, scheduleId);
 
-  const { title, startDateTime, endDateTime } = schedule;
+  if (scheduleById === undefined) return;
 
+  const { title, startDateTime, endDateTime } = scheduleById;
+  const { row, column, level } = position;
   const modalLocation: CSSProperties = {
     position: 'absolute',
-    top:
-      position.row < 3
-        ? `${(position.row + 1) * 120 + position.level * 18 + 60}px`
-        : 'none',
-    bottom:
-      position.row >= 3
-        ? `${(6 - position.row) * 120 - position.level * 18}px`
-        : 'none',
-    left: position.column < 3 ? `${(position.column * 100) / 7}%` : 'none',
-    right:
-      position.column >= 3 ? `${((6 - position.column) * 100) / 7}%` : 'none',
+    top: row < 3 ? `${(row + 1) * 120 + level * 18 + 60}px` : 'none',
+    bottom: row >= 3 ? `${(6 - row) * 120 - level * 18}px` : 'none',
+    left: column < 3 ? `${(column * 100) / 7}%` : 'none',
+    right: column >= 3 ? `${((6 - column) * 100) / 7}%` : 'none',
+  };
+
+  const handleScheduleDelete = () => {
+    if (confirm('일정을 삭제하시겠어요?')) {
+      mutateScheduleDelete(undefined, {
+        onSuccess: () => closeModal(),
+      });
+    }
   };
 
   return (
@@ -49,7 +56,7 @@ const ScheduleModal = (props: ScheduleModalProps) => {
             <Button size="sm" variant="plain">
               <EditIcon />
             </Button>
-            <Button size="sm" variant="plain" onClick={onScheduleDelete}>
+            <Button size="sm" variant="plain" onClick={handleScheduleDelete}>
               <DeleteIcon />
             </Button>
             <Button size="sm" variant="plain" onClick={closeModal}>
diff --git a/frontend/src/hooks/schedule/useScheduleModal.ts b/frontend/src/hooks/schedule/useScheduleModal.ts
index b465dc967..1e420a12e 100644
--- a/frontend/src/hooks/schedule/useScheduleModal.ts
+++ b/frontend/src/hooks/schedule/useScheduleModal.ts
@@ -1,47 +1,36 @@
-import { useEffect, useState } from 'react';
-import type { ScheduleBar } from '~/components/ScheduleBar/ScheduleBar';
-import { useDeleteSchedule } from '~/hooks/queries/useDeleteSchedule';
-import { useFetchScheduleById } from '~/hooks/queries/useFetchScheduleById';
+import { useState } from 'react';
 import { useModal } from '~/hooks/useModal';
 import type { SchedulePosition } from '~/types/schedule';
 
-export const useScheduleModal = (scheduleBars: ScheduleBar[]) => {
-  const [modalScheduleId, setModalScheduleId] = useState<number>(
-    scheduleBars[0].scheduleId,
-  );
+export const useScheduleModal = () => {
+  const [modalScheduleId, setModalScheduleId] = useState(0);
   const [modalPosition, setModalPosition] = useState<SchedulePosition>({
     row: 0,
     column: 0,
     level: 0,
   });
-  const { openModal, closeModal } = useModal();
-  const { scheduleById } = useFetchScheduleById(1, modalScheduleId);
-  const { mutateScheduleDelete } = useDeleteSchedule(1, modalScheduleId);
+  const { openModal } = useModal();
 
-  useEffect(() => {
-    setModalScheduleId(scheduleBars[0].scheduleId);
-  }, []);
-
-  const onScheduleModalOpen = (
-    scheduleId: number,
-    row: number,
-    column: number,
-    level: number,
-  ) => {
-    setModalScheduleId(scheduleId);
-    setModalPosition({ row, column, level });
+  const onScheduleModalOpen = ({
+    scheduleId,
+    row,
+    column,
+    level,
+  }: SchedulePosition & { scheduleId: number }) => {
+    setModalScheduleId(() => scheduleId);
+    setModalPosition(() => {
+      return {
+        row,
+        column,
+        level,
+      };
+    });
     openModal();
   };
 
-  const onScheduleDelete = () => {
-    closeModal();
-    mutateScheduleDelete();
-  };
-
   return {
     modalPosition,
-    scheduleById,
-
-    handlers: { onScheduleModalOpen, onScheduleDelete },
+    modalScheduleId,
+    handlers: { onScheduleModalOpen },
   };
 };

From 31c11baed78b260abb329719bba74c9a710993fd Mon Sep 17 00:00:00 2001
From: hafnium1923 <hafnium1923@gmail.com>
Date: Thu, 20 Jul 2023 15:46:37 +0900
Subject: [PATCH 17/17] =?UTF-8?q?refactor:=20calendar=20=ED=9B=85=20?=
 =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Calendar/Calendar.tsx       | 10 +++++-----
 frontend/src/components/ScheduleBar/ScheduleBar.tsx |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Calendar/Calendar.tsx b/frontend/src/components/Calendar/Calendar.tsx
index 946219841..c654ebd85 100644
--- a/frontend/src/components/Calendar/Calendar.tsx
+++ b/frontend/src/components/Calendar/Calendar.tsx
@@ -22,17 +22,17 @@ const Calendar = () => {
   } = useCalendar();
   const { schedules } = useFetchSchedules(1, year, month);
   const { isModalOpen, openModal } = useModal();
+  const {
+    modalScheduleId,
+    modalPosition,
+    handlers: { onScheduleModalOpen },
+  } = useScheduleModal();
 
   if (schedules === undefined) {
     return null;
   }
 
   const scheduleBars = generateScheduleBars(year, month, schedules);
-  const {
-    modalScheduleId,
-    modalPosition,
-    handlers: { onScheduleModalOpen },
-  } = useScheduleModal();
 
   return (
     <>
diff --git a/frontend/src/components/ScheduleBar/ScheduleBar.tsx b/frontend/src/components/ScheduleBar/ScheduleBar.tsx
index f87be8f98..dca6707b6 100644
--- a/frontend/src/components/ScheduleBar/ScheduleBar.tsx
+++ b/frontend/src/components/ScheduleBar/ScheduleBar.tsx
@@ -13,7 +13,7 @@ export interface ScheduleBarProps {
 }
 
 const ScheduleBar = (props: ScheduleBarProps) => {
-  const { color = 'r#516FFF', title, onScheduleModalOpen, ...rest } = props;
+  const { color = '#516FFF', title, onScheduleModalOpen, ...rest } = props;
 
   return (
     <S.Wrapper