Merge pull request #44 from softeerbootcamp4th/CC-157

[Feat] 숨은그림찾기 네트워크 연결
softeerbootcamp4th · Aug 16, 2024 · 54940fd · 54940fd
2 parents cd010d5 + 800a6d8
commit 54940fd
Show file tree

Hide file tree

Showing 12 changed files with 262 additions and 157 deletions.
diff --git a/Caecae/src/components/FindingGame/FindingGame.tsx b/Caecae/src/components/FindingGame/FindingGame.tsx
@@ -3,37 +3,40 @@ import {
   action,
   initFindingGameState,
 } from "../../jobs/FindingGame/FindingGameWork.tsx";
-import { useEffect, useRef } from "react";
+import { useEffect } 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";
 
 const FindingGame = () => {
   const state = useExistState(initFindingGameState);
-  const timerId = useRef<NodeJS.Timeout | null>(null);
+  // const timerId = useRef<NodeJS.Timeout | null>(null);
+  const [status, teller] = useSaga();
+  status;
   useEffect(() => {
-    store.dispatch(action.init());
-    timerId.current = setTimeout(() => {
-      store.dispatch(action.showHint());
-    }, 40000);
+    const getFindGameRunStory = createStory(getFindGameStory, {});
+    teller(action.init, [getFindGameRunStory]);
+    // timerId.current = setTimeout(() => {
+    //   store.dispatch(action.showHint());
+    // }, 40000);
   }, []);
 
-  useEffect(() => {
-    if (state.showingHint.length == 0) {
-      if (timerId.current != null) {
-        clearInterval(timerId.current);
-      }
-      timerId.current = setTimeout(() => {
-        store.dispatch(action.showHint());
-      }, 40000);
-    }
-  }, [state.showingHint]);
-
-  const imgURL =
-    "https://pds.joongang.co.kr/news/component/htmlphoto_mmdata/202109/01/b57fdda5-3996-430f-8bf2-65052b1d12b2.jpg";
+  // useEffect(() => {
+  //   if (state.showingHint.length == 0) {
+  //     if (timerId.current != null) {
+  //       clearInterval(timerId.current);
+  //     }
+  //     timerId.current = setTimeout(() => {
+  //       store.dispatch(action.showHint());
+  //     }, 40000);
+  //   }
+  // }, [state.showingHint]);
 
   const onClickAction = (
     width: number,
@@ -44,7 +47,7 @@ const FindingGame = () => {
     width;
     heigjht;
     if (state.gameStatus == "Gaming") {
-      store.dispatch(action.click(y, x));
+      store.dispatch(action.click(y, x, width, heigjht));
     }
   };
 
@@ -55,9 +58,8 @@ const FindingGame = () => {
     if (state.gameStatus == "Gaming") {
       return (
         <LottieContainer
-          key={answer.id}
-          x={answer.x}
-          y={answer.y}
+          x={answer.positionX}
+          y={answer.positionY}
           width={lottieWidth}
           height={lottieHeight}
           jsonFile={correctLottie}
@@ -67,10 +69,10 @@ const FindingGame = () => {
     return <></>;
   });
 
-  const answerElement = state.answers.map((answer, index) => {
-    if (state.gameStatus == "Done") {
-      const left = answer.x - 50;
-      const top = answer.y - 50;
+  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 rotateRadian = index == 0 ? "-13" : "8";
       const bageType = index == 0 ? "orange_line" : "yellow_line";
       return (
@@ -109,18 +111,19 @@ 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.y} x={hintAnswer.x} />;
+  // });
 
   return (
     <div>
       <PictureGameBoard
-        imageURL={imgURL}
+        imageURL={state.imageURL}
         showingElements={[
           ...showingCorrectElements,
           ...showingWrongElement,
-          ...showingHintElement,
+          //...showingHintElement,
           ...answerElement,
         ]}
         onClickAction={onClickAction}

diff --git a/Caecae/src/components/FindingGame/FindingGameInfo.tsx b/Caecae/src/components/FindingGame/FindingGameInfo.tsx
@@ -8,7 +8,7 @@ function modeDependency(mode: string): {
   tooltipTitle: string;
   tooltipContent: string;
 } {
-  if (mode === "pixel") {
+  if (mode === "PIXEL") {
     return {
       findingWord: "숨겨진 픽셀",
       tooltipTitle: "픽셀 디자인",
@@ -31,7 +31,7 @@ const FindingGameInfo = () => {
     setIsTooltipShowing((prev) => !prev);
   }
 
-  const modeData = modeDependency("pixel");
+  const modeData = modeDependency(state.gameType);
 
   const tooltip = isTooltipShowing ? (
     <>
@@ -53,13 +53,9 @@ const FindingGameInfo = () => {
     <></>
   );
 
-  const badges = state.answers.map((answer, index) => {
+  const badges = new Array(2).fill(0).map((answer, index) => {
     const badgeType = index == 0 ? "blue" : "orange";
-    if (
-      state.showingAnswers.filter(
-        (showingAnswer) => showingAnswer.id == answer.id
-      ).length !== 0
-    ) {
+    if (state.showingAnswers.length > index) {
       return (
         <SmileBadge
           key={answer.id}

diff --git a/Caecae/src/components/FindingGame/FindingGameResult.tsx b/Caecae/src/components/FindingGame/FindingGameResult.tsx
@@ -7,8 +7,7 @@ import { Link } from "../../shared/Hyunouter";
 
 const FindingGameResult = () => {
   const state = useExistState(initFindingGameState);
-  const currentAnswer = state.answers[state.answerIndex];
-
+  const currentAnswer = state.showingAnswers[state.answerIndex];
   return (
     <>
       <div className="flex flex-col justify-center items-center h-screen">
@@ -24,8 +23,8 @@ const FindingGameResult = () => {
               className="bg-[#000000] bg-opacity-50 w-[50px] h-[50px] flex justify-center items-center"
               onClick={() => {
                 const index =
-                  (state.answers.length + state.answerIndex - 1) %
-                  state.answers.length;
+                  (state.showingAnswers.length + state.answerIndex - 1) %
+                  state.showingAnswers.length;
                 store.dispatch(action.changeShowingAnswer(index));
               }}
             >
@@ -34,21 +33,22 @@ const FindingGameResult = () => {
             <div
               className="bg-[#000000] bg-opacity-50 w-[50px] h-[50px] flex justify-center items-center"
               onClick={() => {
-                const index = (state.answerIndex + 1) % state.answers.length;
+                const index =
+                  (state.answerIndex + 1) % state.showingAnswers.length;
                 store.dispatch(action.changeShowingAnswer(index));
               }}
             >
               <img src="/assets/whiteRightShevron.svg" />
             </div>
           </div>
           <img
-            src={currentAnswer.imageURL}
+            src={currentAnswer.descriptionImageUrl}
             className="object-cover object-center w-full h-full"
           />
         </div>
         <div className="w-10/12 mt-[20px]">
           <p className="font-bold text-[24px]">{currentAnswer.title}</p>
-          <p className="mt-[25px]">{currentAnswer.info}</p>
+          <p className="mt-[25px]">{currentAnswer.content}</p>
         </div>
         <div className="flex-grow"></div>
         <div className="bg-[#002C5F] flex justify-center items-center w-10/12 py-[14px] mb-[40px]">

diff --git a/Caecae/src/components/PhoneNumberOverlay/PhoneNumberOverlay.tsx b/Caecae/src/components/PhoneNumberOverlay/PhoneNumberOverlay.tsx
@@ -4,9 +4,13 @@ import { store } from "../../shared/Hyundux";
 
 interface PhoneNumberOverlayProps {
   type: "findCasper" | "raceCasper";
+  onClick?: (phoneNumber: string) => void;
 }
 
-const PhoneNumberOverlay = ({ type }: PhoneNumberOverlayProps) => {
+const PhoneNumberOverlay = ({
+  type,
+  onClick = () => {},
+}: PhoneNumberOverlayProps) => {
   const [timeLeft, setTimeLeft] = useState(3 * 60); // 3분을 초 단위로 변환
   const [phoneNumber, setPhoneNumber] = useState("");
   const [check, setCheck] = useState(false);
@@ -98,21 +102,23 @@ const PhoneNumberOverlay = ({ type }: PhoneNumberOverlayProps) => {
           </div>
         )}
         <div className="flex items-center mt-[70px] justify-between">
-          <p className="font-bold text-[22px] text-[#1C1A1B] mr-[80px]">전화번호</p>
+          <p className="font-bold text-[22px] text-[#1C1A1B] mr-[80px]">
+            전화번호
+          </p>
           <input
             type="text"
             value={phoneNumber}
             onChange={onPhoneNumberFieldChange}
             placeholder={""}
-            className="border border-gray-300 bg-white py-2 px-4 text-base focus:focus:border-[#002C5F] w-[700px] h-[55px]"
+            className="border border-gray-300 bg-white py-2 px-4 text-base focus:focus:border-[#002C5F] w-[600px] h-[55px]"
           />
         </div>
         <div className="flex mt-[45px] justify-between">
           <p className="font-bold text-[22px] text-[#1C1A1B] mr-[80px] pt-[12px]">
             개인정보 동의
           </p>
           <div>
-            <div className="border border-gray-300 bg-white py-2 px-4 w-[700px] h-[140px] overflow-auto">
+            <div className="border border-gray-300 bg-white py-2 px-4 w-[600px] h-[140px] overflow-auto">
               <p>
                 1. 개인정보의 처리 목적
                 <br />
@@ -152,6 +158,8 @@ const PhoneNumberOverlay = ({ type }: PhoneNumberOverlayProps) => {
       {enterable === true ? (
         <div
           onClick={() => {
+            const parameter = phoneNumber.replace(/-/g, "");
+            onClick(parameter);
             store.dispatch(action.nextPage());
           }}
           className="bg-[#002C5F] h-[12%] flex items-center justify-center hover:cursor-pointer"
@@ -160,7 +168,9 @@ const PhoneNumberOverlay = ({ type }: PhoneNumberOverlayProps) => {
         </div>
       ) : (
         <div className="bg-[#CCCCCC] h-[12%] flex items-center justify-center">
-          <p className="text-white text-[20px] font-bold">개인정보를 입력해주세요</p>
+          <p className="text-white text-[20px] font-bold">
+            개인정보를 입력해주세요
+          </p>
         </div>
       )}
     </div>

diff --git a/Caecae/src/features/FindingGameLanding/OpenEvent.tsx b/Caecae/src/features/FindingGameLanding/OpenEvent.tsx
@@ -56,7 +56,6 @@ const OpenEvent = forwardRef<HTMLDivElement, OpenEventProps>((props, ref) => {
     fetchData();
   }, []);
 
-  console.log(eventStatus);
   let data: StatusInfo | null = null;
   if (eventStatus == "none") {
     data = {