From 6a732e93f3d15055bb0f9437e2688e94b224c92d Mon Sep 17 00:00:00 2001
From: hafnium1923 <hafnium1923@gmail.com>
Date: Thu, 20 Jul 2023 16:25:22 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=93=B1=EB=A1=9D,=20=EC=A1=B0=ED=9A=8C?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EB=8F=99=EC=8B=9C=EC=97=90=20=EC=97=B4?=
 =?UTF-8?q?=EB=A6=AC=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Calendar/Calendar.tsx | 32 +++++++++++++------
 frontend/src/constants/calendar.ts            |  7 ++++
 frontend/src/types/schedule.ts                |  4 +++
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Calendar/Calendar.tsx b/frontend/src/components/Calendar/Calendar.tsx
index c654ebd85..5564db454 100644
--- a/frontend/src/components/Calendar/Calendar.tsx
+++ b/frontend/src/components/Calendar/Calendar.tsx
@@ -9,9 +9,11 @@ import { generateScheduleBars } from '~/utils/generateScheduleBars';
 import ScheduleModal from '~/components/ScheduleModal/ScheduleModal';
 import { useScheduleModal } from '~/hooks/schedule/useScheduleModal';
 import { useModal } from '~/hooks/useModal';
-import { DAYS_OF_WEEK } from '~/constants/calendar';
+import { DAYS_OF_WEEK, MODAL_TYPE } from '~/constants/calendar';
 import ScheduleAddModal from '~/components/ScheduleAddModal/ScheduleAddModal';
 import { useFetchSchedules } from '~/hooks/queries/useFetchSchedules';
+import { useState } from 'react';
+import type { Modal } from '~/types/schedule';
 
 const Calendar = () => {
   const {
@@ -25,15 +27,21 @@ const Calendar = () => {
   const {
     modalScheduleId,
     modalPosition,
-    handlers: { onScheduleModalOpen },
+    handlers: { handleScheduleModalOpen },
   } = useScheduleModal();
 
+  const [modalType, setModalType] = useState<Modal>(MODAL_TYPE.ADD);
+
   if (schedules === undefined) {
     return null;
   }
-
   const scheduleBars = generateScheduleBars(year, month, schedules);
 
+  const handleAddModalOpen = () => {
+    setModalType(MODAL_TYPE.ADD);
+    openModal();
+  };
+
   return (
     <>
       <S.Container>
@@ -56,7 +64,7 @@ const Calendar = () => {
             >
               <ArrowRightIcon />
             </Button>
-            <Button css={S.scheduleAddButton} onClick={openModal}>
+            <Button css={S.scheduleAddButton} onClick={handleAddModalOpen}>
               <PlusIcon />
             </Button>
           </S.ButtonContainer>
@@ -84,14 +92,15 @@ const Calendar = () => {
                             row={row}
                             column={column}
                             level={level}
-                            onScheduleModalOpen={() =>
-                              onScheduleModalOpen({
+                            onScheduleModalOpen={() => {
+                              setModalType(MODAL_TYPE.VIEW);
+                              handleScheduleModalOpen({
                                 scheduleId,
                                 row,
                                 column,
                                 level,
-                              })
-                            }
+                              });
+                            }}
                             {...rest}
                           />
                         );
@@ -106,6 +115,7 @@ const Calendar = () => {
                           key={day.toISOString()}
                           rawDate={day}
                           currentMonth={month}
+                          onClick={handleAddModalOpen}
                         />
                       );
                     })}
@@ -116,8 +126,10 @@ const Calendar = () => {
           </div>
         </div>
       </S.Container>
-      {isModalOpen && <ScheduleAddModal teamPlaceName="팀바팀" />}
-      {isModalOpen && (
+      {isModalOpen && modalType === MODAL_TYPE.ADD && (
+        <ScheduleAddModal teamPlaceName="팀바팀" />
+      )}
+      {isModalOpen && modalType === MODAL_TYPE.VIEW && (
         <ScheduleModal scheduleId={modalScheduleId} position={modalPosition} />
       )}
     </>
diff --git a/frontend/src/constants/calendar.ts b/frontend/src/constants/calendar.ts
index 747186c8e..f194021e8 100644
--- a/frontend/src/constants/calendar.ts
+++ b/frontend/src/constants/calendar.ts
@@ -6,3 +6,10 @@ export const CALENDAR = {
   ROW_SIZE: 6,
   COLUMN_SIZE: 7,
 } as const;
+
+export const MODAL_TYPE = {
+  ADD: 'add',
+  VIEW: 'view',
+} as const;
+
+export const MODAL_TYPE_LIST = [MODAL_TYPE.ADD, MODAL_TYPE.VIEW] as const;
diff --git a/frontend/src/types/schedule.ts b/frontend/src/types/schedule.ts
index 9c7bb007c..a0d6e96a4 100644
--- a/frontend/src/types/schedule.ts
+++ b/frontend/src/types/schedule.ts
@@ -1,3 +1,5 @@
+import type { MODAL_TYPE_LIST } from '~/constants/calendar';
+
 export interface Schedule {
   id: number;
   title: string;
@@ -17,3 +19,5 @@ export interface Position {
 export interface SchedulePosition extends Position {
   level: number;
 }
+
+export type Modal = (typeof MODAL_TYPE_LIST)[number];