From caa79a423f670813798371819b791cd5b2c05b39 Mon Sep 17 00:00:00 2001
From: minani-0621 <cm2hcm2h@naver.com>
Date: Fri, 23 Aug 2024 18:03:03 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=A0=88=EC=9D=B4=EC=8B=B1=20=EA=B2=8C?=
 =?UTF-8?q?=EC=9E=84=20=EC=8A=A4=ED=8E=98=EC=9D=B4=EC=8A=A4=EB=B0=94=20?=
 =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EB=A6=AC=EC=8A=A4=EB=84=88?=
 =?UTF-8?q?=EB=A5=BC=20document=EC=97=90=20=EC=A7=81=EC=A0=91=20=EA=B1=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EA=B3=A0=20frontRef=EB=A5=BC=20=ED=86=B5?=
 =?UTF-8?q?=ED=95=B4=EC=84=9C=20=EB=93=B1=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/Caecae/src/components/RacingGame/RacingGame.tsx b/Caecae/src/components/RacingGame/RacingGame.tsx
index f0e5821..06034ef 100644
--- a/Caecae/src/components/RacingGame/RacingGame.tsx
+++ b/Caecae/src/components/RacingGame/RacingGame.tsx
@@ -99,16 +99,6 @@ const RacingGame: React.FC = () => {
     }, fadeInterval);
   };
 
-  const handleSpacebar = (event: KeyboardEvent) => {
-    if (event.code === "Space" && state.gameStatus === "playing" && !animationCompletedRef.current) {
-      // animationCompletedRef.current = true
-      event.preventDefault();
-      document.removeEventListener("keydown", handleSpacebar);
-
-      handleSmoothlyStop();
-    }
-  };
-
   const handlePlayGame = () => {
     stopingMusicReset();
     playingMusicPlay();
@@ -228,15 +218,31 @@ const RacingGame: React.FC = () => {
     };
   }, []);
 
-  useEffect(() => {
-    if (state.gameStatus === "playing" && !animationCompletedRef.current) {
-      document.addEventListener("keydown", handleSpacebar);
-    } else {
+  const handleSpacebar = (event: KeyboardEvent) => {
+    if (event.code === "Space" && state.gameStatus === "playing" && !animationCompletedRef.current) {
+      event.preventDefault();
       document.removeEventListener("keydown", handleSpacebar);
-    } 
+
+      handleSmoothlyStop();
+    }
+  };
+
+  useEffect(() => {
+    const handleSpacebar = (event: KeyboardEvent) => {
+      if (event.code === "Space" && state.gameStatus === "playing" && !animationCompletedRef.current) {
+        event.preventDefault();
+        handleSmoothlyStop();
+      }
+    };
+
+    if (state.gameStatus === "playing" && frontRef.current) {
+      frontRef.current.addEventListener("keydown", handleSpacebar);
+    }
     
     return () => {
-      document.removeEventListener("keydown", handleSpacebar);
+      if (frontRef.current) {
+        frontRef.current.removeEventListener("keydown", handleSpacebar);
+      }
     };
   }, [state.gameStatus]);