Feat: 예약 현황 모달창 수정

src/components/calendar/Calendar.module.scss

@@ -1,4 +1,5 @@
 .calendar-container {
+  position: relative;
   border: 0.1rem solid $black50;
   border-radius: 0.8rem;
 }

src/components/calendar/index.tsx

@@ -16,7 +16,7 @@ import CalendarBody from '@/components/calendar/CalendarBody';
 import CalendarHeader from '@/components/calendar/CalendarHeader';
 import ListBody from '@/components/calendar/ListBody';
 import ModalContents from '@/components/calendar/ModalContents';
-import { CommonModal, ConfirmModal, ModalButton } from '@/components/commons/modals';
+import { CustomCommonModal, ConfirmModal, ModalButton } from '@/components/commons/modals';
 import { useDeviceType } from '@/hooks/useDeviceType';
 import useMultiState from '@/hooks/useMultiState';
 
@@ -28,7 +28,6 @@ const cx = classNames.bind(styles);
 
 const MONTH_START = 1;
 const MONTH_END = 12;
-const BODY_OVERFLOW_HIDDEN = 'CommonModal_body-open__a3jYd';
 
 type CalendarProps = {
   gameId: number;
@@ -116,16 +115,22 @@ const Calendar = ({ gameId }: CalendarProps) => {
     toggleClick('confirmModal');
   };
 
+  const handleCloseScheduleModal = () => {
+    toggleClick('scheduleModal');
+  };
+
+  const handleCloseConfirmModal = () => {
+    toggleClick('confirmModal');
+  };
+
+  const handleCloseErrorModal = () => {
+    toggleClick('errorModal');
+  };
+
   useEffect(() => {
     if (currentDeviceType !== 'PC') setIsCalendar(false);
   }, [currentDeviceType]);
 
-  useEffect(() => {
-    if (!multiState.scheduleModal) {
-      document.body.classList.remove(BODY_OVERFLOW_HIDDEN);
-    }
-  }, [multiState.scheduleModal]);
-
   return (
     <>
       <div className={cx('calendar-container')}>
@@ -147,29 +152,29 @@ const Calendar = ({ gameId }: CalendarProps) => {
         ) : (
           <ListBody schedules={monthlySchedule} onClick={handleScheduleClick} />
         )}
+        {isSuccess && (
+          <CustomCommonModal
+            openModal={multiState.scheduleModal}
+            onClose={handleCloseScheduleModal}
+            title={'예약 정보'}
+            isCalendar={isCalendar}
+            renderContent={
+              <ModalContents
+                gameId={gameId}
+                activeDate={activeDate}
+                dropdownOptions={dropdownOptions}
+                statusCountByScheduleId={statusCountByScheduleId}
+                onClickCloseButton={handleCloseScheduleModal}
+                onClickCardButton={handleConfirmClick}
+              />
+            }
+          />
+        )}
       </div>
-      {isSuccess && (
-        <CommonModal
-          openModal={multiState.scheduleModal}
-          onClose={() => toggleClick('scheduleModal')}
-          title={'예약 정보'}
-          isResponsive
-          renderContent={
-            <ModalContents
-              gameId={gameId}
-              activeDate={activeDate}
-              dropdownOptions={dropdownOptions}
-              statusCountByScheduleId={statusCountByScheduleId}
-              onClickCloseButton={() => toggleClick('scheduleModal')}
-              onClickCardButton={handleConfirmClick}
-            />
-          }
-        />
-      )}
       <ConfirmModal
         warning
         openModal={multiState.confirmModal}
-        onClose={() => toggleClick('confirmModal')}
+        onClose={handleCloseConfirmModal}
         state='CONFIRM'
         title={`예약 신청을 ${MY_RESERVATIONS_STATUS[reservationStatus]}하시겠습니까?`}
         desc={`한번 ${MY_RESERVATIONS_STATUS[reservationStatus]}한 예약은 되돌릴 수 없습니다`}
@@ -178,17 +183,17 @@ const Calendar = ({ gameId }: CalendarProps) => {
             <ModalButton variant='warning' onClick={handleChangeReservationStatus}>
               확인
             </ModalButton>
-            <ModalButton onClick={() => toggleClick('confirmModal')}>취소</ModalButton>
+            <ModalButton onClick={handleCloseConfirmModal}>취소</ModalButton>
           </>
         }
       />
       <ConfirmModal
         warning
         openModal={multiState.errorModal}
-        onClose={() => toggleClick('errorModal')}
+        onClose={handleCloseErrorModal}
         state='ERROR'
         title={`예약 ${MY_RESERVATIONS_STATUS[reservationStatus]}에 실패하였습니다.`}
-        renderButton={<ModalButton onClick={() => toggleClick('errorModal')}>닫기</ModalButton>}
+        renderButton={<ModalButton onClick={handleCloseErrorModal}>닫기</ModalButton>}
       ></ConfirmModal>
     </>
   );

src/components/commons/modals/CommonModal.module.scss

@@ -21,6 +21,12 @@
   height: 100vh;
 
   background-color: $opacity-black-50;
+
+  &.calendar {
+    position: absolute;
+    z-index: inherit;
+    height: 100%;
+  }
 }
 
 .modal {
@@ -67,7 +73,7 @@
     width: 100%;
   }
 
-  &.responsive {
+  &.calendar {
     @include responsive(T) {
       position: fixed;
       inset: 0;
@@ -100,9 +106,17 @@
         height: 100%;
       }
     }
+
+    &.open {
+      animation: open-modal 0.3s ease-in-out forwards;
+    }
+
+    &:not(.open) {
+      animation: close-modal 0.3s ease-in-out forwards;
+    }
   }
 
-  &:not(.responsive) {
+  &:not(.calendar) {
     .modal-mobile-nav {
       display: none;
     }
@@ -112,3 +126,27 @@
 .body-open {
   overflow: hidden;
 }
+
+@keyframes open-modal {
+  0% {
+    top: 1rem;
+    opacity: 0;
+  }
+
+  100% {
+    top: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes close-modal {
+  0% {
+    top: 0;
+    opacity: 1;
+  }
+
+  100% {
+    top: 1rem;
+    opacity: 0;
+  }
+}

src/components/commons/modals/CommonModal.tsx

@@ -18,18 +18,17 @@ type CommonModalProps = {
   onClose: MouseEventHandler<HTMLButtonElement>;
   title: string;
   renderContent: ReactNode;
-  isResponsive?: boolean;
 };
 
-export const CommonModal = ({ openModal, onClose, title, renderContent, isResponsive }: CommonModalProps) => {
+export const CommonModal = ({ openModal, onClose, title, renderContent }: CommonModalProps) => {
   return (
     <ReactModal
       isOpen={openModal}
       onRequestClose={onClose}
       closeTimeoutMS={250}
       shouldCloseOnEsc={true}
       shouldCloseOnOverlayClick={true}
-      className={cx('modal', { responsive: isResponsive })}
+      className={cx('modal')}
       overlayClassName={cx('overlay')}
       bodyOpenClassName={cx('body-open')}
       contentLabel='modal-common'

src/components/commons/modals/CustomCommonModal.tsx

@@ -0,0 +1,59 @@
+import Image from 'next/image';
+
+import { ReactNode, MouseEventHandler, useState, useEffect } from 'react';
+
+import classNames from 'classnames/bind';
+
+import { SVGS } from '@/constants';
+
+import styles from './CommonModal.module.scss';
+
+const cx = classNames.bind(styles);
+
+const { url, alt } = SVGS.arrow.chevron;
+
+type CustomCommonModalProps = {
+  openModal: boolean;
+  onClose: MouseEventHandler<HTMLButtonElement>;
+  title: string;
+  renderContent: ReactNode;
+  isCalendar: boolean;
+};
+
+export const CustomCommonModal = ({ openModal, onClose, title, renderContent, isCalendar }: CustomCommonModalProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    if (openModal) {
+      setIsOpen(true);
+    }
+  }, [openModal]);
+
+  const handleAnimationEnd = () => {
+    if (!openModal) {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    isOpen && (
+      <div className={cx('overlay', { calendar: isCalendar })}>
+        <div className={cx('modal', 'calendar', { open: openModal })} onAnimationEnd={handleAnimationEnd}>
+          <div className={cx('modal-inner')}>
+            <header className={cx('modal-header')}>
+              <div className={cx('lg-hidden')}>
+                <nav className={cx('modal-mobile-nav')}>
+                  <button onClick={onClose}>
+                    <Image src={url} alt={alt} width={48} height={48} />
+                  </button>
+                </nav>
+              </div>
+              <h2 className={cx('modal-header-title')}>{title}</h2>
+            </header>
+            <div className={cx('modal-content')}>{renderContent}</div>
+          </div>
+        </div>
+      </div>
+    )
+  );
+};

src/components/commons/modals/index.ts

@@ -1,3 +1,4 @@
 export * from './CommonModal';
+export * from './CustomCommonModal';
 export * from './ConfirmModal';
 export * from './ModalButton';