fix: 레이싱 게임 스페이스바 이벤트 리스너를 document에 직접 걸지 않고 frontRef를 통해서 등록

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]);