From 712277be25127161475f213dd4a824a3b7b30ca3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=94=ED=82=A4=EC=B0=AC?= <ckstmznf@naver.com>
Date: Wed, 14 Feb 2024 15:52:08 +0900
Subject: [PATCH] Modal animation

---
 package-lock.json           | 25 ++++++++++++++++++
 package.json                |  1 +
 src/component/Modal.js      | 51 ++++++++++++++++++++++---------------
 src/section/FirstSection.js | 14 ++++++----
 4 files changed, 65 insertions(+), 26 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c362d67..5ff4993 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "react-dom": "^18.2.0",
         "react-icons": "^5.0.1",
         "react-scripts": "5.0.1",
+        "react-transition-group": "^4.4.5",
         "styled-components": "^6.1.8",
         "web-vitals": "^2.1.4"
       }
@@ -7127,6 +7128,15 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -15099,6 +15109,21 @@
         }
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index fe1885d..b34ea0b 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
     "react-scripts": "5.0.1",
+    "react-transition-group": "^4.4.5",
     "styled-components": "^6.1.8",
     "web-vitals": "^2.1.4"
   },
diff --git a/src/component/Modal.js b/src/component/Modal.js
index 0e3dede..5de89c3 100644
--- a/src/component/Modal.js
+++ b/src/component/Modal.js
@@ -1,7 +1,8 @@
-import styled, {keyframes} from "styled-components";
+import styled, {css, keyframes} from "styled-components";
 import Button from "./Button";
 import {UI_ACTION_TYPE, useUiDispatch} from "../context/UiReducer";
 import {useEffect, useState} from "react";
+import {CSSTransition} from "react-transition-group";
 
 const fadeIn = keyframes`
   0% {
@@ -59,9 +60,16 @@ const ModalStyle = styled.div`
   top: 0;
   left: 0;
 
-  animation-name: ${p => p.isShow ? fadeIn : fadeOut};
-  animation-duration: 250ms;
+  animation-duration: ${p=> p.timeout}ms;
   animation-timing-function: ease-out;
+  ${({state}) => css`
+    ${state === "entering" && css`
+      animation-name: ${fadeIn};
+    `}
+    ${state === "exiting" && css`
+      animation-name: ${fadeOut};
+    `}
+  `}
 `
 
 const ModalContent = styled.div`
@@ -72,23 +80,20 @@ const ModalContent = styled.div`
   border-radius: 8px;
   padding: 12px;
   
-  animation-name: ${p => p.isShow ? scaleUp : scaleDown};
-  animation-duration: 250ms;
+  animation-duration: ${p=> p.timeout}ms;
   animation-timing-function: ease-out;
+  ${({state}) => css`
+    ${state === "entering" && css`
+      animation-name: ${scaleUp};
+    `}
+    ${state === "exiting" && css`
+      animation-name: ${scaleDown};
+    `}
+  `}
 `
 
 const Modal = ({isShow}) => {
   const uiDispatch = useUiDispatch()
-  const [isAnimation, setIsAnimation] = useState(false)
-
-  useEffect(() => {
-    if (!isShow) {
-      setIsAnimation(true)
-      setTimeout(() => {
-        setIsAnimation(false)
-      }, 240)
-    }
-  }, [isShow])
 
   const closeModal = (e) => {
     if(e.target !== e.currentTarget)
@@ -97,12 +102,16 @@ const Modal = ({isShow}) => {
     uiDispatch({type: UI_ACTION_TYPE.modal_hide})
   }
 
-  return (isShow || isAnimation) && (
-    <ModalStyle onClick={closeModal} isShow={isShow}>
-      <ModalContent isShow={isShow}>
-        <Button onClick={closeModal}>닫기</Button>
-      </ModalContent>
-    </ModalStyle>
+  return (
+    <CSSTransition in={isShow} timeout={250} unmountOnExit>
+      {state => (
+        <ModalStyle onClick={closeModal} state={state} timeout={250}>
+          <ModalContent>
+            <Button onClick={closeModal}>닫기</Button>
+          </ModalContent>
+        </ModalStyle>
+      )}
+    </CSSTransition>
   )
 }
 
diff --git a/src/section/FirstSection.js b/src/section/FirstSection.js
index 10e4329..93d58fd 100644
--- a/src/section/FirstSection.js
+++ b/src/section/FirstSection.js
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import {downUp, showLeft, animation, showRight} from "../style/animation";
 import {GoChevronDown} from "react-icons/go";
+import {UI_ACTION_TYPE, useUiDispatch} from "../context/UiReducer";
 
 const FirstSectionStyle = styled.section`
   width: 100%;
@@ -106,12 +107,15 @@ const FirstSectionStyle = styled.section`
 `
 
 export const FirstSection = () => {
+  const dispatch = useUiDispatch()
+
   const scrollDown = () => {
-    window.scrollTo({
-      left: 0,
-      top: window.innerHeight,
-      behavior: "smooth"
-    })
+    dispatch({type: UI_ACTION_TYPE.modal_show})
+    // window.scrollTo({
+    //   left: 0,
+    //   top: window.innerHeight,
+    //   behavior: "smooth"
+    // })
   }
 
   return (