Merge branch 'develop' into CC-169

Caecae/package.json

@@ -30,8 +30,10 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
     "jest": "^29.7.0",
+    "terser-brunch": "^4.1.0",
     "ts-jest": "^29.2.3",
     "typescript": "^5.5.4",
-    "vite": "^5.4.0"
+    "vite": "^5.4.0",
+    "vite-plugin-compression": "^0.5.1"
   }
 }

Caecae/src/components/FindingGame/FindingGame.tsx

@@ -1,55 +1,84 @@
 import PictureGameBoard from "../common/PictureGameBoard/index.tsx";
 import {
   action,
+  genrateFindGameAnswerCheckBodyParameter,
   initFindingGameState,
 } from "../../jobs/FindingGame/FindingGameWork.tsx";
 import { useEffect, useRef } from "react";
 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 { 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);
+    teller(action.init, getFindGameRunStory);
+    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,
-    heigjht: number,
+    height: number,
     y: number,
     x: number
   ) => {
     pictureWidth.current = width;
-    pictureHeight.current = heigjht;
+    pictureHeight.current = height;
     if (state.gameStatus == "Gaming") {
-      store.dispatch(action.click(y, x, width, heigjht));
+      teller(
+        action.click,
+        getFindGameAnswerStory,
+        genrateFindGameAnswerCheckBodyParameter(state, y, x, width, height)
+      );
     }
   };
 
@@ -99,12 +128,11 @@ const FindingGame = () => {
   });
 
   const showingWrongElement = state.wrongAnswers.map((wrongAnswer) => {
-    console.log(wrongAnswer);
     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}
@@ -115,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}

Caecae/src/components/RacingGame/RacingGame.tsx

@@ -6,13 +6,13 @@ import frontBackground from "@assets/frontBackground.svg";
 import rearBackground from "@assets/rearBackground.svg";
 import {
   action,
-  initRacingGameState
+  initRacingGameState,
 } from "../../jobs/RacingGame/RacingGameWork.tsx";
 import { store, useExistState } from "../../shared/Hyundux/index.tsx";
 import Link from "../../shared/Hyunouter/Link.tsx";
 import getRacingGameTopRate from "../../stories/getRacingGameTopRate.tsx";
 import { useDebounce } from "../../hooks/index.tsx";
-import useRacingGameAudio from "../../hooks/useRacingGameAudio.tsx";
+import useAudio from "../../hooks/useAudio.tsx";
 
 const RacingGame: React.FC = () => {
   const lottieRef = useRef<LottieRefCurrentProps | null>(null);
@@ -24,6 +24,13 @@ const RacingGame: React.FC = () => {
   const [topRate, setTopRate] = useState<string | null>(null);
   const [isButtonDisabled, setIsButtonDisabled] = useState<boolean>(false);
   const debouncedDistance = useDebounce(state.distance, 50);
+  const {
+    audio: playingMusic,
+    playAudio: playingMusicPlay,
+    resetAudio: playingMusicReset,
+  } = useAudio("/assets/audio/racingGamePlayingSound.wav");
+  const { playAudio: stopingMusicPlay, resetAudio: stopingMusicReset } =
+    useAudio("/assets/audio/racingGameStopSound.wav");
 
   /** 모션 값을 사용하여 frontBackground의 x 위치 추적 */
   const frontX = useMotionValue(0);
@@ -76,7 +83,7 @@ const RacingGame: React.FC = () => {
         transition: { duration: 1, ease: "easeOut" },
       });
 
-      fadeOutPlayingAudio(1000, startStoppingAudio);
+      fadeOutStopingMusic();
     }
   };
 
@@ -89,12 +96,28 @@ const RacingGame: React.FC = () => {
     }
   };
 
+  const fadeOutStopingMusic = () => {
+    const step = 0.1;
+    const duration = 1000;
+    const fadeInterval = duration / (playingMusic.volume / step);
+
+    const fade = setInterval(() => {
+      if (playingMusic.volume > step) {
+        playingMusic.volume -= step;
+      } else {
+        clearInterval(fade);
+        playingMusicReset();
+        stopingMusicPlay();
+      }
+    }, fadeInterval);
+  };
+
   const handlePlayGame = () => {
     setIsButtonDisabled(true);
     setTopRate("?");
 
-    stoppingAudioRunRef.current = false;
-    startPlayingAudio();
+    stopingMusicReset();
+    playingMusicPlay();
 
     store.dispatch(action.gameStart());
 
@@ -125,7 +148,7 @@ const RacingGame: React.FC = () => {
 
   const enterEvent = () => {
     store.dispatch(action.enterEvent());
-  }
+  };
 
   useEffect(() => {
     const frontBackgroundImg = new Image();
@@ -141,8 +164,9 @@ const RacingGame: React.FC = () => {
     };
 
     return () => {
-      resetAllAudio();
-      if(endGameTimeoutRef.current) {
+      stopingMusicReset();
+      playingMusicReset();
+      if (endGameTimeoutRef.current) {
         clearTimeout(endGameTimeoutRef.current);
       }
     };
@@ -179,7 +203,7 @@ const RacingGame: React.FC = () => {
       }
     };
 
-    if(debouncedDistance > 0 && state.gameStatus === "end"){
+    if (debouncedDistance > 0 && state.gameStatus === "end") {
       fetchData();
     }
   }, [debouncedDistance]);
@@ -189,7 +213,7 @@ const RacingGame: React.FC = () => {
       const timer = setTimeout(() => {
         setIsButtonDisabled(false);
       }, 2000);
-  
+
       return () => clearTimeout(timer);
     }
   }, [state.gameStatus]);
@@ -222,7 +246,14 @@ const RacingGame: React.FC = () => {
         autoplay={false}
         className="absolute top-[485px] left-[250px] w-[350px] h-auto z-[3]"
       />
-      {gameContent(state.gameStatus, state.distance, topRate, isButtonDisabled, handlePlayGame, enterEvent)}
+      {gameContent(
+        state.gameStatus,
+        state.distance,
+        topRate,
+        isButtonDisabled,
+        handlePlayGame,
+        enterEvent
+      )}
       {gameMenu(state.gameStatus)}
     </div>
   );
@@ -242,7 +273,9 @@ const gameContent = (
     case "enterEvent":
       return (
         <div className="absolute left-[35%] top-[70px] z-40 flex flex-col items-center justify-center font-galmuri">
-          <div className="font-bold text-xl mb-2 pr-5 text-[#A8A8A8]">CASPER ELECTRIC</div>
+          <div className="font-bold text-xl mb-2 pr-5 text-[#A8A8A8]">
+            CASPER ELECTRIC
+          </div>
           <div className=" text-[44px] mb-2 text-[#666666]">전력으로...!</div>
           <div className="mt-5">
             <button className="w-[500px]" onClick={handlePlayGame}>
@@ -258,10 +291,16 @@ const gameContent = (
     case "playing":
       return (
         <div className="absolute left-[37%] top-[70px] z-40 flex flex-col items-center justify-center font-galmuri">
-          <div className="font-bold text-xl mb-2 text-[#A8A8A8]">Game Score</div>
-          <div className="font-bold mb-2 text-[52px]">{distance.toFixed(3)} KM</div>
+          <div className="font-bold text-xl mb-2 text-[#A8A8A8]">
+            Game Score
+          </div>
+          <div className="font-bold mb-2 text-[52px]">
+            {distance.toFixed(3)} KM
+          </div>
           <div className="flex flex-row items-center justify-center mt-2">
-            <div className="font-bold text-[28px] mr-2 text-[#666666]">stop :</div>
+            <div className="font-bold text-[28px] mr-2 text-[#666666]">
+              stop :
+            </div>
             <div className="ml-2">
               <img src="/assets/spacebarBtn.svg" alt="spacebarBtn" />
             </div>
@@ -272,7 +311,9 @@ const gameContent = (
       return (
         <div className="absolute left-[37%] top-[70px] z-40 flex flex-col items-center justify-center font-galmuri">
           <div className="flex flex-col items-center justify-center">
-            <div className="font-bold text-xl mb-1 text-[#A8A8A8]">Game Score</div>
+            <div className="font-bold text-xl mb-1 text-[#A8A8A8]">
+              Game Score
+            </div>
             <div className="flex flex-row space-x-2">
               <div className="font-bold text-[52px] mb-2">
                 {distance.toFixed(3)} KM
@@ -284,7 +325,7 @@ const gameContent = (
           </div>
           <div className="flex flex-row items-center justify-center mt-2 space-x-4">
             <button
-              className={`${isButtonDisabled? "opacity-50" : ""}`}
+              className={`${isButtonDisabled ? "opacity-50" : ""}`}
               onClick={enterEvent}
               disabled={isButtonDisabled}
             >
@@ -295,7 +336,7 @@ const gameContent = (
               />
             </button>
             <button
-              className={`${isButtonDisabled? "opacity-50" : ""}`}
+              className={`${isButtonDisabled ? "opacity-50" : ""}`}
               onClick={handlePlayGame}
               disabled={isButtonDisabled}
             >
@@ -322,7 +363,7 @@ const gameMenu = (gameStatus: string) => {
       return (
         <div className="absolute right-[50px] top-[30px] z-40 font-galmuri text-[#494949] text-xl">
           <Link to="/racecasper">
-            <button>게임 종료</button>  
+            <button>게임 종료</button>
           </Link>
         </div>
       );
@@ -340,4 +381,4 @@ const gameMenu = (gameStatus: string) => {
   }
 };
 
-export default RacingGame;
+export default RacingGame;

Caecae/src/components/common/InfoSection/InfoSection.tsx

@@ -34,7 +34,10 @@ const InfoSection = ({
   };
   return (
     <>
-      <div className="flex flex-col items-center justify-center" style={style}>
+      <div
+        className="flex flex-col items-center justify-center h-full"
+        style={style}
+      >
         {header}
         <div className="border-l-4 border-r-4 border-white relative w-full h-full">
           {children}

Caecae/src/components/common/Navigation/Navigation.tsx

@@ -30,7 +30,7 @@ const Navigation: React.FC = () => {
     <nav
       className={`${
         showNav ? "" : "hideNav"
-      } relative bg-navigation flex justify-center items-center h-16 border-b-4 border-navigationUnderline header`}
+      } relative bg-navigation flex justify-center items-center h-16 border-b-4 border-navigationUnderline header h-[8%] min-h-[60px]`}
     >
       <div className="absolute left-0 ml-10 logo">
         <Link to="/">