From c380c55b8653a6cbda43e0604a208da8142924c9 Mon Sep 17 00:00:00 2001
From: Harang <dbd02169@naver.com>
Date: Sat, 30 Nov 2024 11:18:46 +0900
Subject: [PATCH] =?UTF-8?q?style:=20=EB=AA=A8=EB=8B=AC=20=EC=95=84?=
 =?UTF-8?q?=EB=9E=98=EC=84=9C=20=EC=9C=84=EB=A1=9C=20=EB=9C=A8=EB=8A=94=20?=
 =?UTF-8?q?=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20(#246)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ModalContentsBase/index.module.scss       |  8 +--
 .../components/ModalContentsBase/index.tsx    | 55 ++++++++++++-------
 2 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/components/molecules/Modal/components/ModalContentsBase/index.module.scss b/apps/web/src/components/molecules/Modal/components/ModalContentsBase/index.module.scss
index 881700c..26758cd 100644
--- a/apps/web/src/components/molecules/Modal/components/ModalContentsBase/index.module.scss
+++ b/apps/web/src/components/molecules/Modal/components/ModalContentsBase/index.module.scss
@@ -9,18 +9,12 @@
   justify-content: center;
   background: rgb(0 0 0 / 40%);
   transition: visibility 0.2s ease-out;
-  visibility: hidden;
-  display: none;
+  display: flex;
 
   @include xs {
     align-items: flex-end;
   }
 
-  &.open {
-    visibility: visible;
-    display: flex;
-  }
-
   .modalBox {
     color: color('gray09');
     background-color: color('white');
diff --git a/apps/web/src/components/molecules/Modal/components/ModalContentsBase/index.tsx b/apps/web/src/components/molecules/Modal/components/ModalContentsBase/index.tsx
index ec7e596..ba1c5ec 100644
--- a/apps/web/src/components/molecules/Modal/components/ModalContentsBase/index.tsx
+++ b/apps/web/src/components/molecules/Modal/components/ModalContentsBase/index.tsx
@@ -2,6 +2,7 @@ import { ReactElement, useRef } from 'react';
 
 import { Button } from '@dnd-academy/ui';
 import clsx from 'clsx';
+import { AnimatePresence, motion } from 'motion/react';
 import { useOnClickOutside, useScrollLock } from 'usehooks-ts';
 
 import GlobalPortal from '@/components/global/GlobalPortal';
@@ -25,26 +26,42 @@ function ModalContentsBase({ children: child, title, size = 'medium' } : Props)
 
   return (
     <GlobalPortal>
-      {open && (
-        <div className={clsx(styles.modalWrapper, open && styles.open)}>
-          <div
-            ref={modalContentsRef}
-            role="dialog"
-            className={clsx(styles.modalBox, styles[size])}
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            className={clsx(styles.modalWrapper)}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
           >
-            <div className={styles.header}>
-              <h1 className={styles.title}>{title}</h1>
-              <Button
-                type="button"
-                className={styles.closeButton}
-                onClick={() => toggle(false)}
-                icon={<CloseIcon />}
-              />
-            </div>
-            {child}
-          </div>
-        </div>
-      )}
+            <motion.div
+              ref={modalContentsRef}
+              role="dialog"
+              className={clsx(styles.modalBox, styles[size])}
+              initial={{ y: 50, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              exit={{ y: 50, opacity: 0 }}
+              transition={{
+                type: 'spring',
+                stiffness: 300,
+                damping: 30,
+                duration: 0.3,
+              }}
+            >
+              <div className={styles.header}>
+                <h1 className={styles.title}>{title}</h1>
+                <Button
+                  type="button"
+                  className={styles.closeButton}
+                  onClick={() => toggle(false)}
+                  icon={<CloseIcon />}
+                />
+              </div>
+              {child}
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </GlobalPortal>
   );
 }