feat: 모달 오픈 애니메이션 추가

Author: sikkzz

src/components/ui/Modal/Modal.module.scss

@@ -3,6 +3,10 @@
   inset: 0;
   background-color: rgba(0, 0, 0, 0.3);
   z-index: 99;
+
+  &.Open {
+    animation: animation-show 300ms cubic-bezier(0.3, 0, 0, 1);
+  }
 }
 
 .Modal {
@@ -13,4 +17,18 @@
   z-index: 100;
   background-color: var(--color-white);
   border-radius: 1.25rem;
+
+  &.Open {
+    animation: animation-show 300ms cubic-bezier(0.3, 0, 0, 1);
+  }
+}
+
+@keyframes animation-show {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }

src/components/ui/Modal/Modal.tsx

@@ -1,6 +1,8 @@
 import type { PropsWithChildren } from "react";
 import { useEffect } from "react";
 
+import classNames from "classnames";
+
 import styles from "@/components/ui/Modal/Modal.module.scss";
 import Portal from "@/components/ui/Modal/Portal";
 
@@ -21,9 +23,19 @@ const Modal = ({ isOpen, children }: ModalProps) => {
     <>
       {isOpen && (
         <Portal elementId="modal">
-          <div className={styles.ModalBackdrop} />
+          <div
+            className={classNames(styles.ModalBackdrop, {
+              [styles.Open]: isOpen,
+            })}
+          />
 
-          <div className={styles.Modal}>{children}</div>
+          <div
+            className={classNames(styles.Modal, {
+              [styles.Open]: isOpen,
+            })}
+          >
+            {children}
+          </div>
         </Portal>
       )}
     </>