[#22] refact : getAnimationObj 함수 개선 및 적용

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)