fix: 등록, 조회모달 동시에 열리는 버그 수정

woowacourse-teams · Jul 20, 2023 · 6a732e9 · 6a732e9
1 parent 2236040
commit 6a732e9
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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];