From 78fa499a7a2a7963e3aa28446dba1d803a97c522 Mon Sep 17 00:00:00 2001
From: pccommen <pccommen@gmail.com>
Date: Fri, 16 Aug 2024 12:02:29 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=83=81=EB=8C=80=EC=A0=81=20=EC=9C=84?=
 =?UTF-8?q?=EC=B9=98=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/FindingGame/FindingGame.tsx    | 20 ++++++++++---------
 .../src/pages/FindingGame/FindingGamePage.tsx |  1 -
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/Caecae/src/components/FindingGame/FindingGame.tsx b/Caecae/src/components/FindingGame/FindingGame.tsx
index 72add31..a55576e 100644
--- a/Caecae/src/components/FindingGame/FindingGame.tsx
+++ b/Caecae/src/components/FindingGame/FindingGame.tsx
@@ -3,7 +3,7 @@ import {
   action,
   initFindingGameState,
 } from "../../jobs/FindingGame/FindingGameWork.tsx";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import LottieContainer from "../common/LottieContainer/index.tsx";
 import correctLottie from "@assets/animationCorrect.json";
 import wrongLottie from "@assets/animationIncorrect.json";
@@ -18,6 +18,8 @@ const FindingGame = () => {
   const state = useExistState(initFindingGameState);
   // const timerId = useRef<NodeJS.Timeout | null>(null);
   const [status, teller] = useSaga();
+  const pictureWidth = useRef(0);
+  const pictureHeight = useRef(0);
   status;
   useEffect(() => {
     const getFindGameRunStory = createStory(getFindGameStory, {});
@@ -44,8 +46,8 @@ const FindingGame = () => {
     y: number,
     x: number
   ) => {
-    width;
-    heigjht;
+    pictureWidth.current = width;
+    pictureHeight.current = heigjht;
     if (state.gameStatus == "Gaming") {
       store.dispatch(action.click(y, x, width, heigjht));
     }
@@ -58,8 +60,8 @@ const FindingGame = () => {
     if (state.gameStatus == "Gaming") {
       return (
         <LottieContainer
-          x={answer.positionX}
-          y={answer.positionY}
+          x={answer.positionX * pictureWidth.current}
+          y={answer.positionY * pictureHeight.current}
           width={lottieWidth}
           height={lottieHeight}
           jsonFile={correctLottie}
@@ -71,8 +73,8 @@ const FindingGame = () => {
 
   const answerElement = state.showingAnswers.map((answer, index) => {
     if (state.gameStatus == "DoneSuccess" || state.gameStatus == "DoneFail") {
-      const left = answer.positionX - 50;
-      const top = answer.positionY - 50;
+      const left = answer.positionX * pictureWidth.current - 50;
+      const top = answer.positionY * pictureHeight.current - 50;
       const rotateRadian = index == 0 ? "-13" : "8";
       const bageType = index == 0 ? "orange_line" : "yellow_line";
       return (
@@ -100,8 +102,8 @@ const FindingGame = () => {
     return (
       <LottieContainer
         key={wrongAnswer.id}
-        x={wrongAnswer.x}
-        y={wrongAnswer.y}
+        x={wrongAnswer.x * pictureWidth.current}
+        y={wrongAnswer.y * pictureHeight.current}
         width={lottieWidth}
         height={lottieHeight}
         jsonFile={wrongLottie}
diff --git a/Caecae/src/pages/FindingGame/FindingGamePage.tsx b/Caecae/src/pages/FindingGame/FindingGamePage.tsx
index d103095..7712418 100644
--- a/Caecae/src/pages/FindingGame/FindingGamePage.tsx
+++ b/Caecae/src/pages/FindingGame/FindingGamePage.tsx
@@ -44,7 +44,6 @@ const FindingGamePage = () => {
                   ticketId: gameState.ticketId,
                   phone: phoneNumber,
                 });
-                console.log(response);
               }}
             />
           }