From a485f4f239645997365d0d1cd4af6b8105c1803a Mon Sep 17 00:00:00 2001
From: choibumsu <bumsu0211@gmail.com>
Date: Mon, 22 Feb 2021 01:47:35 +0900
Subject: [PATCH] =?UTF-8?q?[#22]=20feat=20:=20re-render=EC=8B=9C=EC=97=90?=
 =?UTF-8?q?=20=EB=B3=80=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20Guard?=
 =?UTF-8?q?=EB=A5=BC=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/MainSection/Timer/DisplayTime/index.tsx b/src/components/MainSection/Timer/DisplayTime/index.tsx
index 8bb5fe8..ec3ee5c 100644
--- a/src/components/MainSection/Timer/DisplayTime/index.tsx
+++ b/src/components/MainSection/Timer/DisplayTime/index.tsx
@@ -30,6 +30,11 @@ const animationConfig = {
   delay: 500,
 }
 
+const guardConfig = {
+  disappearTime: 100,
+  appearTime: 800,
+}
+
 const getAnimationObj = (
   scale: number,
   translateY: string,
@@ -56,6 +61,8 @@ export const DisplayTime: React.FC<DisplayTimeProps> = ({
   ]
   const [inAnimation, setInAnimation] = useState<AnimationType>()
   const [outAnimation, setOutAnimation] = useState<AnimationType>()
+  const [guardAnimation, setGuardAnimation] = useState<AnimationType>()
+  const [guard, setGuard] = useState<string>(nextValue)
 
   useEffect(() => {
     setInAnimation(
@@ -67,6 +74,9 @@ export const DisplayTime: React.FC<DisplayTimeProps> = ({
       )
     )
     setOutAnimation(getAnimationObj(1, '0', 'initial', 1))
+    setTimeout(() => {
+      setGuard(nextValue)
+    }, guardConfig.disappearTime)
 
     setTimeout(() => {
       setInAnimation(
@@ -81,6 +91,10 @@ export const DisplayTime: React.FC<DisplayTimeProps> = ({
         )
       )
     }, animationConfig.delay)
+
+    setTimeout(() => {
+      setGuardAnimation(getAnimationObj(1))
+    }, guardConfig.appearTime)
   }, [nextTime])
 
   const getLetterElements = (
@@ -108,6 +122,9 @@ export const DisplayTime: React.FC<DisplayTimeProps> = ({
           {getLetterElements(currentImmutable)}
           {getLetterElements(currentMutable, outAnimation)}
         </div>
+        <div className="next-value guard">
+          {getLetterElements(guard, guardAnimation)}
+        </div>
       </div>
       <div className="unit">{unit}</div>
     </div>