[Deploy] version 0.0.4

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}

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}

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]">

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>

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

@@ -1,5 +1,6 @@
 import { ReactElement, ReactNode } from "react";
 interface InfoSectionProps {
+  width?: number;
   type?: "Default" | "Header";
   title?: string;
   children: ReactNode;
@@ -9,6 +10,7 @@ const InfoSection = ({
   type = "Header",
   title = "",
   children,
+  width = 100,
 }: InfoSectionProps) => {
   let header: ReactElement | null = null;
 
@@ -27,10 +29,12 @@ const InfoSection = ({
       header = <img src="/assets/topLine.svg" alt="topLine" />;
       break;
   }
-
+  const style = {
+    width: `${width}%`,
+  };
   return (
     <>
-      <div className="flex flex-col items-center justify-center">
+      <div className="flex flex-col items-center justify-center" style={style}>
         {header}
         <div className="border-l-4 border-r-4 border-white relative w-full h-full">
           {children}
@@ -52,12 +56,7 @@ interface InfoSectionDotProps {
   right?: number;
 }
 
-const InfoSectionDot = ({
-  top,
-  bottom,
-  left,
-  right,
-}: InfoSectionDotProps) => {
+const InfoSectionDot = ({ top, bottom, left, right }: InfoSectionDotProps) => {
   const style: React.CSSProperties = {
     width: "20px",
     position: "absolute",

Caecae/src/components/common/PictureGameBoard/PictureGameBoard.tsx

@@ -31,7 +31,7 @@ const PictureGameBoard = ({
         <img
           src={imageURL}
           alt="Finding Picture"
-          className="absolute inset-0 w-full h-full object-cover z-10"
+          className="absolute inset-0 h-full object-cover z-10 object-left"
         />
       </div>
     </div>

Caecae/src/features/FindingGameLanding/EventPeriod.tsx

@@ -6,16 +6,16 @@ const EventPeriod = () => {
   return (
     <div className="h-[115vh] bg-[black]">
       <div className="absolute z-10 flex flex-col items-center w-full h-screen">
-        <p className="text-[white] font-[900] text-[35px] mt-[60px]">
+        <p className="text-[white] font-[900] text-[40px] mt-[60px]">
           이벤트 기간
         </p>
-        <div className="mt-[50px]">
-          <InfoSection title="7일간 매일매일">
+        <div className="mt-[50px] flex justify-center">
+          <InfoSection title="7일간 매일매일" width={90}>
             <div className="flex flex-col justify-center items-center py-[60px] px-[60px]">
               <div className="absolute right-[-70px] bottom-[200px] transform rotate-[-12deg] ">
                 <SmileBadge width={150} badgeType="blue" />
               </div>
-              <p className="text-[white] text-center text-[18px] line-[140%]">
+              <p className="text-[white] text-center text-[22px] line-[140%]">
                 참여 기간: 7.15 (월) - 7.21 (일){" "}
                 <span className="text-[#00AAD2]">오후 3시 15분</span>
                 <br />

Caecae/src/features/FindingGameLanding/HowToEvent.tsx

@@ -4,13 +4,13 @@ const HowToEvent = () => {
   return (
     <div className="h-[115vh] bg-[black]">
       <div className="absolute z-10 flex flex-col items-center w-full h-screen">
-        <p className="text-[white] font-[900] text-[35px] mt-[60px]">
+        <p className="text-[white] font-[900] text-[40px] mt-[60px]">
           이벤트 참여 방법
         </p>
-        <div className="mt-[50px]">
-          <InfoSection title="나를 찾아봐">
+        <div className="mt-[50px] flex justify-center">
+          <InfoSection title="나를 찾아봐" width={90}>
             <div className="flex flex-col justify-center items-center py-[60px] px-[60px]">
-              <p className="text-[white] text-center text-[18px] line-[140%]">
+              <p className="text-[white] text-center text-[22px] line-[140%]">
                 매일 새롭게 제공되는 캐스퍼 일렉트릭의 사진에서 숨겨진 로봇
                 <br />
                 뱃지와 픽셀 디자인을 찾아보세요.
@@ -51,12 +51,12 @@ const HowToEvent = () => {
         <img
           src="/assets/howToEventLeft.svg"
           alt="howToEventLeft"
-          className="absolute top-0 left-0 w-[175px]"
+          className="absolute top-0 left-0 w-[200px]"
         />
         <img
           src="/assets/howToEventRight.svg"
           alt="howToEventLeft"
-          className="absolute top-0 right-0 w-[116px]"
+          className="absolute top-0 right-0 w-[150px]"
         />
       </div>
     </div>