[Feat] 숨은캐스퍼찾기 hint UI와 로직

Caecae/src/components/FindingGame/FindingGame.tsx

@@ -9,38 +9,61 @@ import LottieContainer from "../common/LottieContainer/index.tsx";
 import correctLottie from "@assets/animationCorrect.json";
 import wrongLottie from "@assets/animationIncorrect.json";
 import { store, useExistState } from "../../shared/Hyundux";
-//import HintSpot from "./Hint/HintSpot.tsx";
+import HintSpot from "./Hint/HintSpot.tsx";
 import SmileBadge from "../common/SmileBadge/index.tsx";
 import { createStory } from "../../shared/Hyundux-saga/Story.tsx";
 import useSaga from "../../shared/Hyundux-saga/useSaga.tsx";
-import { getFindGameStory } from "../../stories/getFindingGame.tsx";
-import { getFindGameAnswerStory } from "../../stories/getFindGameIsAnswer.tsx";
+import { getFindGameStory } from "../../stories/FindGame/getFindingGame.tsx";
+import { getFindGameAnswerStory } from "../../stories/FindGame/getFindGameIsAnswer.tsx";
+import { getFindGameHintStory } from "../../stories/FindGame/getFindGameHint.tsx";
 
 const FindingGame = () => {
   const state = useExistState(initFindingGameState);
-  // const timerId = useRef<NodeJS.Timeout | null>(null);
+  const timerId = useRef<NodeJS.Timeout | null>(null);
   const [status, teller] = useSaga();
   const pictureWidth = useRef(0);
   const pictureHeight = useRef(0);
+  const hintTime = 40 * 1000; // 1000ms는 1초
   status;
   useEffect(() => {
     const getFindGameRunStory = createStory(getFindGameStory, {});
     teller(action.init, getFindGameRunStory);
-    // timerId.current = setTimeout(() => {
-    //   store.dispatch(action.showHint());
-    // }, 40000);
+    timerId.current = setTimeout(() => {
+      teller(action.showHint, getFindGameHintStory, {
+        answerList: state.showingAnswers.map((answer) => {
+          return { positionX: answer.positionX, positionY: answer.positionY };
+        }),
+      });
+    }, hintTime);
   }, []);
 
-  // useEffect(() => {
-  //   if (state.showingHint.length == 0) {
-  //     if (timerId.current != null) {
-  //       clearInterval(timerId.current);
-  //     }
-  //     timerId.current = setTimeout(() => {
-  //       store.dispatch(action.showHint());
-  //     }, 40000);
-  //   }
-  // }, [state.showingHint]);
+  useEffect(() => {
+    if (timerId.current != null) {
+      clearInterval(timerId.current);
+    }
+    timerId.current = setTimeout(() => {
+      teller(action.showHint, getFindGameHintStory, {
+        answerList: state.showingAnswers.map((answer) => {
+          return { positionX: answer.positionX, positionY: answer.positionY };
+        }),
+      });
+    }, hintTime);
+  }, [state.showingAnswers]);
+
+  useEffect(() => {
+    if (state.showingHint.length == 0) {
+      if (timerId.current != null) {
+        clearInterval(timerId.current);
+      }
+      timerId.current = setTimeout(() => {
+        teller(action.showHint, getFindGameHintStory, {
+          answerList: state.showingAnswers.map((answer) => {
+            return { positionX: answer.positionX, positionY: answer.positionY };
+          }),
+        });
+      }, hintTime);
+    }
+  }, [state.showingHint]);
 
   const onClickAction = (
     width: number,
@@ -120,17 +143,26 @@ const FindingGame = () => {
     );
   });
 
-  // const showingHintElement = state.showingHint.map((hintAnswer) => {
-  //   return <HintSpot y={hintAnswer.y} x={hintAnswer.x} />;
-  // });
+  const showingHintElement = state.showingHint.map((hintAnswer) => {
+    return (
+      <HintSpot
+        y={hintAnswer.positionY * pictureHeight.current}
+        x={hintAnswer.positionX * pictureWidth.current}
+      />
+    );
+  });
   return (
     <div>
       <PictureGameBoard
         imageURL={state.imageURL}
+        setRect={(width, height) => {
+          pictureWidth.current = width;
+          pictureHeight.current = height;
+        }}
         showingElements={[
           ...showingCorrectElements,
           ...showingWrongElement,
-          //...showingHintElement,
+          ...showingHintElement,
           ...answerElement,
         ]}
         onClickAction={onClickAction}