Merge pull request #43 from softeerbootcamp4th/CC-158

[Feat] 레이싱 게임 랜딩페이지에서 레이싱 게임 시작 가능 여부 api 연결
softeerbootcamp4th · Aug 15, 2024 · cd010d5 · cd010d5
2 parents e5f2c02 + 81e6ae9
commit cd010d5
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 27 deletions.
diff --git a/Caecae/src/features/RacingGameLanding/EventIntro.tsx b/Caecae/src/features/RacingGameLanding/EventIntro.tsx
@@ -1,7 +1,11 @@
 import { useState } from "react";
 import { Link } from "../../shared/Hyunouter";
 
-const EventIntro = () => {
+interface EventIntroProps {
+  isEventOpen: boolean;
+}
+
+const EventIntro: React.FC<EventIntroProps> = ({isEventOpen}) => {
   const [showMessage, setShowMessage] = useState(false);
   const [animate, setAnimate] = useState(false);
   const [isAnimating, setIsAnimating] = useState(false);
@@ -35,6 +39,13 @@ const EventIntro = () => {
         setIsAnimating(false);
       });
   };
+
+  const checkEventOpen = () => {
+    if(!isEventOpen) {
+      alert("지금은 이벤트 기간이 아닙니다!");
+    }
+  };
+
   return (
     <>
       <div className="flex w-full h-screen justify-center items-center relative">
@@ -75,12 +86,14 @@ const EventIntro = () => {
               <img src="/assets/sharedButton.svg" alt="sharedButton" />
               <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-[22px]">전력 질주하러 가기</span>
-                <img src="/assets/rightShevron.svg" alt="rightShevron" />
-              </div>
-            </Link>
+            <div onClick={checkEventOpen}>
+              <Link to={isEventOpen ? "/racecaspergame" : "/racecasper"}>
+                <div className="bg-white w-[300px] h-[80px] flex flex-row justify-center items-center gap-3 hover:cursor-pointer">
+                  <span className="text-[22px]">전력 질주하러 가기</span>
+                  <img src="/assets/rightShevron.svg" alt="rightShevron" />
+                </div>
+              </Link>
+            </div>
           </div>
         </div>
         <div>

diff --git a/Caecae/src/features/RacingGameLanding/EventPeriod.tsx b/Caecae/src/features/RacingGameLanding/EventPeriod.tsx
@@ -1,7 +1,18 @@
 import InfoSection from "../../components/common/InfoSection/index";
 import { Link } from "../../shared/Hyunouter";
 
-const EventPeriod = () => {
+interface EventPeriodProps {
+  isEventOpen: boolean;
+}
+
+const EventPeriod:React.FC<EventPeriodProps> = ({isEventOpen}) => {
+
+  const checkEventOpen = () => {
+    if(!isEventOpen) {
+      alert("지금은 이벤트 기간이 아닙니다!");
+    }
+  };
+
   return (
     <>
       <div className="relative h-[1100px] bg-black ">
@@ -24,14 +35,16 @@ const EventPeriod = () => {
                     alt="eventPeriodBackground"
                   />
                 </div>
-                <Link to="/racecaspergame">
-                  <div className="mt-2">
-                    <img
-                      src="/assets/play315GameButton.svg"
-                      alt="play315GameButton"
-                    />
-                  </div>
-                </Link>
+                <div onClick={checkEventOpen}>
+                  <Link to={isEventOpen ? "/racecaspergame" : "/racecasper"}>
+                    <div className="mt-2">
+                      <img
+                        src="/assets/play315GameButton.svg"
+                        alt="play315GameButton"
+                      />
+                    </div>
+                  </Link>
+                </div>
               </div>
             </InfoSection>
           </div>

diff --git a/Caecae/src/pages/RacingGameLanding/RacingGameLandingPage.tsx b/Caecae/src/pages/RacingGameLanding/RacingGameLandingPage.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import Navigation from "../../components/common/Navigation";
 import {
   EventIntro, 
@@ -7,19 +8,37 @@ import {
   EventPrecaution,
  } from "../../features/RacingGameLanding";
 import Footer from "../../components/common/Footer";
+import getRacingGameAvailable from "../../stories/getRacingGameAvailable";
 
 const RacingGameLandingPage = () => {
-    return (
-        <>
-          <Navigation />
-          <EventIntro />
-          <HowToEvent />
-          <GiftInfo />
-          <EventPeriod />
-          <EventPrecaution />
-          <Footer />
-        </>
-    );
+  const [isEventOpen, setIsEventOpen] = useState(false);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await getRacingGameAvailable();
+      const racingGameOpen = response.data;
+
+      if(racingGameOpen === true) {
+        setIsEventOpen(true);
+      }else {
+        setIsEventOpen(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  return (
+      <>
+        <Navigation />
+        <EventIntro isEventOpen={isEventOpen} />
+        <HowToEvent />
+        <GiftInfo />
+        <EventPeriod isEventOpen={isEventOpen} />
+        <EventPrecaution />
+        <Footer />
+      </>
+  );
 };
 
 export default RacingGameLandingPage;
diff --git a/Caecae/src/stories/getRacingGameAvailable.tsx b/Caecae/src/stories/getRacingGameAvailable.tsx
@@ -0,0 +1,13 @@
+import huynxios from "../shared/Hyunxios";
+
+interface Response {
+    responseCode: string;
+    message: string;
+    data: boolean;
+}
+
+export default async function getRacingGameAvailable() {
+    const response = await huynxios.get<Response>("/api/racing/available");
+
+    return response;
+}