From 8f94fd84aaa5e35732d92ef65da06ac8d559491c Mon Sep 17 00:00:00 2001
From: choibumsu <bumsu0211@gmail.com>
Date: Mon, 22 Feb 2021 01:51:12 +0900
Subject: [PATCH] =?UTF-8?q?[#22]=20refact=20:=20getAnimationObj=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MainSection/Timer/DisplayTime/index.tsx   | 46 ++++++++++++-------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/components/MainSection/Timer/DisplayTime/index.tsx b/src/components/MainSection/Timer/DisplayTime/index.tsx
index 5566e1f..8d2bee8 100644
--- a/src/components/MainSection/Timer/DisplayTime/index.tsx
+++ b/src/components/MainSection/Timer/DisplayTime/index.tsx
@@ -37,15 +37,25 @@ const guardConfig = {
 }
 
 const getAnimationObj = (
-  scale: number,
-  translateY: string,
-  transition: string,
-  opacity: number
-): AnimationType => ({
-  transform: `scale(${scale}) translateY(${translateY})`,
-  transition,
-  opacity,
-})
+  opacity: number,
+  transition?: string,
+  scale?: number,
+  translateY?: string
+): AnimationType => {
+  const animation = {
+    transition: transition ? transition : 'initial',
+    opacity,
+    transform: 'initial',
+  }
+  if (scale && translateY) {
+    animation.transform = `scale(${scale}) translateY(${translateY})`
+  } else if (scale) {
+    animation.transform = `scale(${scale})`
+  } else if (translateY) {
+    animation.transform = `translateY(${translateY})`
+  }
+  return animation
+}
 
 export const DisplayTime: React.FC<DisplayTimeProps> = ({
   currentTime,
@@ -68,27 +78,29 @@ export const DisplayTime: React.FC<DisplayTimeProps> = ({
   useEffect(() => {
     setInAnimation(
       getAnimationObj(
+        animationConfig.beforeOpacity,
+        undefined,
         animationConfig.beforeScale,
-        `-${animationConfig.targetY}`,
-        'initial',
-        animationConfig.beforeOpacity
+        `-${animationConfig.targetY}`
       )
     )
-    setOutAnimation(getAnimationObj(1, '0', 'initial', 1))
+    setOutAnimation(getAnimationObj(1))
+    setGuardAnimation(getAnimationObj(0))
+
     setTimeout(() => {
       setGuard(nextValue)
     }, guardConfig.disappearTime)
 
     setTimeout(() => {
       setInAnimation(
-        getAnimationObj(1, '0', `${animationConfig.duration} ease-in`, 1)
+        getAnimationObj(1, `${animationConfig.duration}ms ease-in`)
       )
       setOutAnimation(
         getAnimationObj(
+          animationConfig.beforeOpacity,
+          `${animationConfig.duration}ms ease-out`,
           animationConfig.beforeScale,
-          animationConfig.targetY,
-          `${animationConfig.duration} ease-out`,
-          animationConfig.beforeOpacity
+          animationConfig.targetY
         )
       )
     }, animationConfig.delay)