[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

@@ -9,8 +9,8 @@ const EventPeriod = () => {
         <p className="text-[white] font-[900] text-[35px] 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" />

Caecae/src/features/FindingGameLanding/HowToEvent.tsx

@@ -7,8 +7,8 @@ const HowToEvent = () => {
         <p className="text-[white] font-[900] text-[35px] 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%]">
                 매일 새롭게 제공되는 캐스퍼 일렉트릭의 사진에서 숨겨진 로봇

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> 신차

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

@@ -9,8 +9,8 @@ const SelectionMethod = () => {
         <p className="text-[white] font-[900] text-[35px] 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" />

Caecae/src/features/RacingGameLanding/EventPeriod.tsx

@@ -9,7 +9,7 @@ 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%]">

Caecae/src/features/RacingGameLanding/GiftInfo.tsx

@@ -6,7 +6,7 @@ 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%]">

Caecae/src/features/RacingGameLanding/HowToEvent.tsx

@@ -8,7 +8,7 @@ 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%]">
@@ -91,7 +91,7 @@ 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%]">

Caecae/src/stories/getFindingGameStartTime.tsx

@@ -0,0 +1,25 @@
+import huynxios from "../shared/Hyunxios";
+
+interface Response {
+  responseCode: number;
+  message: string;
+  data: Data;
+}
+
+interface Data {
+  findingGameInfos: FindingGameInfo[];
+  recentGameIndex: number;
+  nextGameIndex: number;
+}
+
+interface FindingGameInfo {
+  startTime: number[];
+  endTime: number[];
+  numberOfWinners: number;
+}
+
+export default async function getFindingGameStartTime() {
+  const response = await huynxios.get<Response>("/api/finding/info");
+
+  return response;
+}

Caecae/tsconfig.json

@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
     "baseUrl": ".",
     "paths": {
       "@assets/*": ["./public/assets/*"]