From 812a3e0ab38d185f1af4e17e43370fda9dcc437f Mon Sep 17 00:00:00 2001
From: bishoe01 <bishoe01@gmail.com>
Date: Fri, 19 Jul 2024 17:21:30 +0900
Subject: [PATCH] =?UTF-8?q?[=F0=9F=90=9B=20FIX]=20=EB=B9=8C=EB=93=9C=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 handtris/src/components/TetrisPlay.tsx | 38 +++++++++++++++-----------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/handtris/src/components/TetrisPlay.tsx b/handtris/src/components/TetrisPlay.tsx
index 12c0e0b..b6dda29 100644
--- a/handtris/src/components/TetrisPlay.tsx
+++ b/handtris/src/components/TetrisPlay.tsx
@@ -922,25 +922,31 @@ const Home: React.FC = () => {
   });
 
   useEffect(() => {
-    let timeoutId;
-    if (
-      !tetrisGameRef.current?.isDonutAttackToggleOn &&
-      tetrisGameRef.current?.linesCleared > 0
-    ) {
-      setAnimationState({ opacity: 0, y: -500 });
-
-      // Change the image after 1 second if `isDonutAttackToggleOn` is false
-      timeoutId = setTimeout(() => {
+    let timeoutId: NodeJS.Timeout | undefined;
+
+    if (tetrisGameRef.current) {
+      const { isDonutAttackToggleOn, linesCleared } = tetrisGameRef.current;
+
+      if (!isDonutAttackToggleOn && linesCleared > 0) {
+        setAnimationState({ opacity: 0, y: -500 });
+
+        timeoutId = setTimeout(() => {
+          setAnimationState({ opacity: 1, y: 0 });
+          setDonutAttackToggle("/image/DropDefault.png");
+        }, 1000);
+      } else if (linesCleared > 0) {
         setAnimationState({ opacity: 1, y: 0 });
-        setDonutAttackToggle("/image/DropDefault.png");
-      }, 1000);
-    } else if (tetrisGameRef.current?.linesCleared > 0) {
-      setAnimationState({ opacity: 1, y: 0 });
-      setDonutAttackToggle("/image/DropPressed.png");
+        setDonutAttackToggle("/image/DropPressed.png");
+      }
     }
 
-    return () => clearTimeout(timeoutId);
-  }, [tetrisGameRef.current?.isDonutAttackToggleOn]);
+    return () => {
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [
+    tetrisGameRef.current?.isDonutAttackToggleOn,
+    tetrisGameRef.current?.linesCleared,
+  ]);
 
   const toggleShowFirstAttack = useCallback(() => {
     setShowFirstAttack(true);