From a4f7496f00b507d9389b5c7868791ab7a90abcdc Mon Sep 17 00:00:00 2001
From: minani-0621 <cm2hcm2h@naver.com>
Date: Mon, 19 Aug 2024 16:34:05 +0900
Subject: [PATCH] =?UTF-8?q?hotfix:=20=EB=A0=88=EC=9D=B4=EC=8B=B1=20?=
 =?UTF-8?q?=EA=B2=8C=EC=9E=84=EC=97=90=EC=84=9C=20=EA=B2=8C=EC=9E=84=20?=
 =?UTF-8?q?=EC=A2=85=EB=A3=8C=20=EC=8B=9C=EC=97=90=EB=A7=8C=20=EC=A0=90?=
 =?UTF-8?q?=EC=88=98=20=EB=B0=B1=EB=B6=84=EC=9C=84=20api=EB=A5=BC=20?=
 =?UTF-8?q?=ED=95=9C=20=EB=B2=88=EB=A7=8C=20=ED=98=B8=EC=B6=9C=ED=95=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/RacingGame/RacingGame.tsx  | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/Caecae/src/components/RacingGame/RacingGame.tsx b/Caecae/src/components/RacingGame/RacingGame.tsx
index c29312c..b11f03d 100644
--- a/Caecae/src/components/RacingGame/RacingGame.tsx
+++ b/Caecae/src/components/RacingGame/RacingGame.tsx
@@ -12,12 +12,13 @@ import { store, useExistState } from "../../shared/Hyundux/index.tsx";
 import Link from "../../shared/Hyunouter/Link.tsx";
 import getRacingGameTopRate from "../../stories/getRacingGameTopRate.tsx";
 import { resetAudio, playAudio, fadeOutAudio } from "../../utils/audioManipulate.tsx";
+import { useDebounce } from "../../hooks/index.tsx";
 
 /** 게임 상태에 따라 다르게 보여지는 콘텐츠 */
 const gameContent = (
   gameStatus: string,
   distance: number,
-  topRate: number | null,
+  topRate: string | null,
   isButtonDisabled: boolean,
   handlePlayGame: () => void,
   enterEvent: () => void
@@ -132,8 +133,9 @@ const RacingGame: React.FC = () => {
   const [frontBackgroundWidth, setFrontImageWidth] = useState<number>(0);
   const [rearBackgroundWidth, setRearBackgroundWidth] = useState<number>(0);
   const state = useExistState(initRacingGameState);
-  const [topRate, setTopRate] = useState<number | null>(null);
+  const [topRate, setTopRate] = useState<string | null>(null);
   const [isButtonDisabled, setIsButtonDisabled] = useState<boolean>(false);
+  const debouncedDistance = useDebounce(state.distance, 50);
 
   /** 모션 값을 사용하여 frontBackground의 x 위치 추적 */
   const frontX = useMotionValue(0);
@@ -198,6 +200,7 @@ const RacingGame: React.FC = () => {
 
   const handlePlayGame = () => {
     setIsButtonDisabled(true);
+    setTopRate("?");
 
     stopSoundPlayedRef.current = false;
     playAudio(playingSoundRef.current);
@@ -283,16 +286,18 @@ const RacingGame: React.FC = () => {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const response = await getRacingGameTopRate(state.distance);
-        setTopRate(Number(response.data.percent.toFixed(3)));
-      }catch (error) {
-        console.error("레이싱 게임 점수 백분위 api 연결 에러:", error);
+        const response = await getRacingGameTopRate(debouncedDistance);
+        setTopRate(response.data.percent.toFixed(3));
+      } catch (error) {
+        console.error("레이싱 게임 점수 백분위 API 호출 오류:", error);
         setTopRate(null);
       }
     };
 
-    fetchData();
-  }, [state.distance]);
+    if(debouncedDistance > 0 && state.gameStatus === "end"){
+      fetchData();
+    }
+  }, [debouncedDistance]);
 
   useEffect(() => {
     if (state.gameStatus === "end") {