[Feat] 숨은 캐스퍼 찾기 랜딩페이지 네트워크 연결 및 퍼블리싱 일부 변경

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 object-fit z-10 object-left"
+          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>

Caecae/src/features/FindingGameLanding/LadingPageTitle.tsx

@@ -40,7 +40,7 @@ const LadingPageTitle = ({ onClick }: LadingPageTitleProps) => {
   };
   return (
     <>
-      <div className="flex w-full h-[115vh] justify-center items-center relative">
+      <div className="flex w-full h-[93vh] justify-center items-center relative">
         <div className="absolute z-20 flex flex-col items-center">
           <p className="text-[#CCCCCC] text-[20px] mt-[100px]">
             <span className="font-bold text-[white]">CASPER Electric</span> 신차
@@ -58,7 +58,7 @@ const LadingPageTitle = ({ onClick }: LadingPageTitleProps) => {
           </div>
           <p className="text-center text-[white] text-[24px]">
             캐스퍼 일렉트릭에 숨겨진 로봇 뱃지
-            <br /> 찾고 <span className="text-[#00AAD2]">1만 원 커피 쿠폰</span>
+            <br /> 찾고 <span className="text-[#00AAD2]">1만 원 커피 쿠폰 </span>
             받아가자!
           </p>
           <img
@@ -89,21 +89,21 @@ const LadingPageTitle = ({ onClick }: LadingPageTitleProps) => {
           <img
             src="/assets/findGameTitleBackground.svg"
             alt="findGameLeftBlocks"
-            className="absolute top-0 left-0 w-full h-[115vh] object-cover bg-[black] object-bottom-center"
+            className="absolute top-0 left-0 w-full h-[93vh] object-cover bg-[black] object-bottom-center"
           />
           <img
             src="/assets/findGameLeftBlocks.svg"
             alt="findGameLeftBlocks"
-            className="opacity-[70%] w-[350px] left-0 absolute bottom-0 z-10"
+            className="opacity-[100%] w-[400px] left-0 absolute bottom-0 z-10"
           />
           <img
             src="/assets/findGameRightBlocks.svg"
             alt="findGameLeftBlocks"
-            className="opacity-[70%] w-[230px] right-0 absolute bottom-0 z-10"
+            className="opacity-[100%] w-[300px] right-0 absolute bottom-0 z-10"
           />
         </div>
         {showMessage && (
-          <div className={`absolute left-1/2 bottom-[270px] z-50 transform -translate-x-1/2 text-white bg-[#1C1A1B] border-blue-700 border-4 px-6 py-3 rounded-2xl transition-opacity duration-1000 ${animate ? 'opacity-100' : 'opacity-0'}`}>
+          <div className={`absolute left-1/2 bottom-[170px] z-50 transform -translate-x-1/2 text-white bg-[#1C1A1B] border-blue-700 border-4 px-6 py-3 rounded-2xl transition-opacity duration-1000 ${animate ? 'opacity-100' : 'opacity-0'}`}>
             <div className="flex justify-center items-center text-[24px]">
               URL이 복사되었습니다!
             </div>

Caecae/src/features/FindingGameLanding/OpenEvent.tsx

@@ -1,7 +1,7 @@
-import { forwardRef, ReactElement, useRef, useState } from "react";
+import { forwardRef, ReactElement, useEffect, useState } from "react";
 import SmileBadge from "../../components/common/SmileBadge/index";
-import { useSpecificTimeEffect } from "../../hooks";
 import { Link } from "../../shared/Hyunouter";
+import getFindingGameStartTime from "../../stories/getFindingGameStartTime";
 
 // props 타입 정의
 interface OpenEventProps {}
@@ -14,26 +14,51 @@ interface StatusInfo {
 }
 
 const OpenEvent = forwardRef<HTMLDivElement, OpenEventProps>((props, ref) => {
-  const eventOpenStatus = useRef<EventOpenStatus>("none");
-  const [leftTime, setLeftTime] = useState(0);
   props;
+  const [eventStatus, setEventStatus] = useState<EventOpenStatus>("none");
+  const [leftTime, setLeftTime] = useState(0);
   const targetDate = new Date();
-  targetDate.setHours(16, 0, 0, 0);
 
-  useSpecificTimeEffect(targetDate, (leftSeconds) => {
-    if (leftSeconds <= 3600 && leftSeconds > 0) {
-      eventOpenStatus.current = "soon";
-      setLeftTime(leftSeconds);
-    } else if (leftSeconds < 0) {
-      eventOpenStatus.current = "opened";
-      setLeftTime(leftSeconds);
-    } else {
-      eventOpenStatus.current = "none";
-    }
-  });
+  useEffect(() => {
+    const fetchData = async () => {
+      const reponse = await getFindingGameStartTime();
+
+      let answer: EventOpenStatus = "none"; // 명시적으로 타입 지정
+      reponse.data.findingGameInfos.forEach((info) => {
+        const tempAnswer: EventOpenStatus = chechCurrentStuts(
+          info.startTime,
+          info.endTime
+        );
+
+        if (tempAnswer !== "none") {
+          answer = tempAnswer;
+        }
+        if (tempAnswer === "soon") {
+          targetDate.setHours(info.startTime[3], info.startTime[4], 0, 0);
+        }
+      });
+      setEventStatus(answer);
+
+      // @ts-expect-error: 진짜 ts 병신
+      if (answer === "soon") {
+        const checkTime = () => {
+          const now = new Date();
+          setLeftTime(
+            Math.floor((targetDate.getTime() - now.getTime()) / 1000)
+          );
+        };
+        checkTime();
+        const intervalId = setInterval(checkTime, 1000);
+        return () => clearInterval(intervalId);
+      }
+    };
 
+    fetchData();
+  }, []);
+
+  console.log(eventStatus);
   let data: StatusInfo | null = null;
-  if (eventOpenStatus.current == "none") {
+  if (eventStatus == "none") {
     data = {
       badgeTitle: "이벤트 오픈 예정",
       title: "7월 15일 오후 3시 15분",
@@ -51,7 +76,7 @@ const OpenEvent = forwardRef<HTMLDivElement, OpenEventProps>((props, ref) => {
       ),
       isButtonOpen: false,
     };
-  } else if (eventOpenStatus.current == "soon") {
+  } else if (eventStatus == "soon") {
     data = {
       badgeTitle: "이벤트 오픈 예정",
       title: "이벤트 오픈이 얼마 남지 않았어요!",
@@ -160,6 +185,33 @@ const OpenEvent = forwardRef<HTMLDivElement, OpenEventProps>((props, ref) => {
   );
 });
 
+function chechCurrentStuts(startTime: number[], endTime: number[]) {
+  const currentDate = new Date();
+  const currentTime = [
+    currentDate.getFullYear(),
+    currentDate.getMonth() + 1,
+    currentDate.getDate(),
+    currentDate.getHours(),
+    currentDate.getMinutes(),
+  ];
+  const soonTime = [...startTime];
+  soonTime[3] = soonTime[3] - 1;
+
+  function isIn(startTime: number[], targetTime: number[], endTime: number[]) {
+    for (let i = 0; i < startTime.length; i++) {
+      if (startTime[i] === endTime[i] && startTime[i] === targetTime[i])
+        continue;
+      else if (startTime[i] <= targetTime[i] && targetTime[i] <= endTime[i])
+        return true;
+      else return false;
+    }
+    return false;
+  }
+  if (isIn(soonTime, currentTime, startTime)) return "soon";
+  else if (isIn(startTime, currentTime, endTime)) return "opened";
+  return "none";
+}
+
 const WhiteTimerRectangle = (props: { num: number }) => {
   return (
     <>

Caecae/src/features/FindingGameLanding/SelectionMethod.tsx

@@ -6,24 +6,24 @@ const SelectionMethod = () => {
   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="선착순 315명 전원 증정">
+        <div className="mt-[50px] flex justify-center">
+          <InfoSection title="선착순 315명 전원 증정" width={90}>
             <div className="flex flex-col justify-center items-center py-[60px] px-[60px]">
               <div className="absolute left-[-70px] top-[200px] transform rotate-[12deg] ">
                 <SmileBadge width={150} badgeType="white" />
               </div>
-              <p className="text-[white] text-center text-[18px] line-[140%]">
+              <p className="text-[white] text-center text-[22px] line-[140%]">
                 매일 정해진 선착순 인원에게{" "}
                 <span className="text-[#00AAD2]">스타벅스 1만 원 쿠폰</span>을
                 드려요.
                 <br />
                 당첨 후 <span className="text-[#00AAD2]">3분 내</span>로 전화
                 번호를 기입하면 응모 완료!
               </p>
-              <p className="text-[white] text-[14px] mt-[20px]">
+              <p className="text-[white] text-[16px] mt-[20px]">
                 * 하루에 한 번 응모 가능합니다.
               </p>
               <div className="flex justify-center gap-[30px] mt-[40px]">

Caecae/src/features/RacingGameLanding/EventIntro.tsx

@@ -39,14 +39,14 @@ const EventIntro = () => {
     <>
       <div className="flex w-full h-screen justify-center items-center relative">
         <div className="flex flex-col absolute z-20 items-center mt-20">
-          <p className="text-[#B6B6B6] text-[22px]">
-            <span className="text-white ">CASPER Electric </span>
+          <p className="text-[#B6B6B6] text-[20px]">
+            <span className="text-white font-bold">CASPER Electric </span>
             신차 출시 추첨 이벤트
           </p>
-          <h1 className="flex items-center font-galmuri text-[white] text-[80px] font-bold my-2">
+          <h1 className="flex items-center font-galmuri text-[white] text-[80px] font-bold mb-2">
             전력으로...!
             <div className="relative inline-block ml-5">
-              <span className="absolute inset-0 flex items-center justify-center text-black">
+              <span className="absolute inset-0 pl-2 pt-1 flex items-center justify-center text-black">
                 315Km
               </span>
               <img
@@ -73,11 +73,11 @@ const EventIntro = () => {
               onClick={shareEvent}
             >
               <img src="/assets/sharedButton.svg" alt="sharedButton" />
-              <span className="text-white text-[24px]">공유하기</span>
+              <span className="text-white text-[22px]">공유하기</span>
             </div>
             <Link to="/racecaspergame">
               <div className="bg-white w-[300px] h-[80px] flex flex-row justify-center items-center gap-3">
-                <span className="text-[24px]">전력 질주하러 가기</span>
+                <span className="text-[22px]">전력 질주하러 가기</span>
                 <img src="/assets/rightShevron.svg" alt="rightShevron" />
               </div>
             </Link>

Caecae/src/features/RacingGameLanding/EventPeriod.tsx

@@ -9,13 +9,13 @@ const EventPeriod = () => {
           <h1 className="text-white font-[900] text-[40px] mt-16">
             이벤트 기간
           </h1>
-          <div className="mt-14">
+          <div className="mt-14 px-20">
             <InfoSection title="7일간 매일매일">
               <div className="flex flex-col justify-center items-center py-[60px] px-[60px]">
-                <p className="text-white text-center text-[24px] line-[140%]">
-                  참여기간: 7.15(월) - 7.21(일)
+                <p className="text-white text-center text-[22px] line-[140%]">
+                  참여 기간: 7.15 (월) - 7.21 (일)
                   <br />
-                  당첨자 발표 날짜: 7.29(월)부터 주말ㆍ공휴일 제외 순차적으로
+                  당첨자 발표 날짜: 7.29 (월)부터 주말ㆍ공휴일 제외 순차적으로
                   발송
                 </p>
                 <div className="my-16">

Caecae/src/features/RacingGameLanding/GiftInfo.tsx

@@ -6,10 +6,10 @@ const GiftInfo = () => {
       <div className="relative h-[1400px] bg-black">
         <div className="absolute inset-0 z-10 flex flex-col items-center w-full bg-[#00113F] bg-opacity-40">
           <h1 className="text-white font-[900] text-[40px] mt-16">참여 혜택</h1>
-          <div className="mt-14">
+          <div className="mt-14  px-20">
             <InfoSection title="추첨 경품">
               <div className="flex flex-col justify-center items-center py-[60px] px-[60px]">
-                <p className="text-white text-center text-[24px] line-[140%]">
+                <p className="text-white text-center text-[22px] line-[140%]">
                   캐스퍼 일렉트릭과 함께 압도적 캐미를 보여준 분께
                   <br />
                   <span className="text-[#00AAD2]">딱 맞는 아이템</span>을

Caecae/src/features/RacingGameLanding/HowToEvent.tsx

@@ -8,18 +8,18 @@ const HowToEvent = () => {
           <h1 className="text-white font-[900] text-[40px] mt-28">
             이벤트 참여 방법
           </h1>
-          <div className="mt-14">
+          <div className="mt-14 px-20">
             <InfoSection title="#1 전력으로... Game Start!">
               <div className="flex flex-col justify-center items-center py-[60px] px-[60px]">
-                <p className="text-white text-center text-[24px] line-[140%]">
+                <p className="text-white text-center text-[22px] line-[140%]">
                   캐스퍼 일렉트릭과 전력으로 315Km를 질주해보아요!
                   <br />
                   <span className="text-[#00AAD2]">
                     315Km에 가장 가깝게 멈춘 사람
                   </span>
                   에게 추첨하여 경품 증정!
                 </p>
-                <p className="text-white text-[18px] mt-5">
+                <p className="text-white text-[16px] mt-5">
                   * 중복 응모 시 가장 높은 점수 1건만 추첨에 반영됩니다.
                 </p>
                 <div className="flex flex-row justify-center items-center gap-10 mt-14">
@@ -91,10 +91,10 @@ const HowToEvent = () => {
               </div>
             </InfoSection>
           </div>
-          <div className="mt-14">
+          <div className="mt-14  px-20">
             <InfoSection title="#2 가장 기대되는 Case는?">
               <div className="flex flex-col justify-center items-center py-[60px] px-[60px]">
-                <p className="text-white text-center text-[24px] line-[140%]">
+                <p className="text-white text-center text-[22px] line-[140%]">
                   캐스퍼 일렉트릭은 다양한 옵션 선택이 가능해요.
                   <br />
                   가장 기대되는 커스터마이징 옵션을 고르면