Merge pull request #13 from 4th-COKATHON/dev

Dev
4th-COKATHON · Jul 26, 2024 · 3f7b19a · 3f7b19a
2 parents a0ac339 + 6db2c51
commit 3f7b19a
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 54 deletions.
diff --git a/.github/workflows/hi.yml b/.github/workflows/hi.yml
@@ -15,7 +15,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'  # 사용하려는 Node.js 버전 지정
+          node-version: '20'  # 사용하려는 Node.js 버전 지정
 
       - name: Install dependencies
         run: npm install

diff --git a/src/assets/seoul.png b/src/assets/seoul.png
diff --git a/src/components/Map.jsx b/src/components/Map.jsx
@@ -1,27 +1,9 @@
 import React from "react";
 import logoText from "../assets/LogoText.png";
-import { useState } from "react";
-import Modal from "./Modal";
-import Roulette from "./Roulette";
-
-/**
- * 0이면 start, 3이면 reward 주황색으로 변함
- * @param {number} currentIndex
- * @returns
- */
-const Map = ({ currentIndex }) => {
-  const [modal, setModal] = useState(false);
-
-  const handleCellClick = () => {
-    setModal(true);
-  };
-
-  const handleCloseModal = () => {
-    setModal(false);
-  };
 
+const Map = ({ currentIndex, onCellClick }) => {
   return (
-    <div className="bg-[#E9EBF0] w-full h-screen flex justify-center items-center p-3">
+    <div className="bg-white w-full h-screen flex justify-center items-center p-3">
       <div className="w-[95%] h-[90%]">
         <div className="w-full h-full grid grid-cols-5 grid-rows-10 gap-3">
           {/* Row 1 */}
@@ -31,42 +13,43 @@ const Map = ({ currentIndex }) => {
                 ? "bg-[#4384F9] text-white"
                 : "bg-[#D6E7FF] text-[#4384F9]"
             }`}
-            onClick={handleCellClick}
+            onClick={onCellClick}
           >
             Start
           </div>
-          <div className="w-full h-full bg-white border border-[#D6E7FF] col-span-3"></div>
+          <div className="w-full h-full bg-[#F3F8FF] border border-[#D6E7FF] col-span-3"></div>
           <div
-            className={`w-full h-full text-white flex items-center justify-center border border-[#D6E7FF] rounded-tr-lg ${
+            className={`w-full h-full text-white flex items-center cursor-pointer justify-center border border-[#D6E7FF] rounded-tr-lg ${
               currentIndex === 1
                 ? "bg-[#4384F9] text-white"
                 : "bg-[#D6E7FF] text-[#4384F9]"
             }`}
+            onClick={onCellClick}
           >
             Mission
           </div>
 
           {/* Row 2 */}
-          <div className="w-full h-full bg-white border border-[#D6E7FF]"></div>
+          <div className="w-full h-full border border-[#D6E7FF] bg-[#F3F8FF]"></div>
           <div className="w-full h-full col-span-3"></div>
-          <div className="w-full h-full bg-white border border-[#D6E7FF] row-span-3"></div>
+          <div className="w-full h-full border border-[#D6E7FF] bg-[#F3F8FF] row-span-3"></div>
 
           {/* Row 3 */}
-          <div className="w-full h-full bg-white border border-[#D6E7FF] row-span-3"></div>
+          <div className="w-full h-full border border-[#D6E7FF] bg-[#F3F8FF] row-span-3"></div>
           <div className="w-full h-full col-span-3"></div>
           <div className="w-full h-full col-span-3"></div>
           <div className="w-full h-full col-span-3"></div>
-          <div className="w-full h-full bg-white border border-[#D6E7FF]"></div>
+          <div className="w-full h-full bg-[#F3F8FF] border border-[#D6E7FF]"></div>
 
           {/* Row 5 */}
-          <div className="w-full h-full bg-white border border-[#D6E7FF]"></div>
+          <div className="w-full h-full border bg-[#F3F8FF] border-[#D6E7FF]"></div>
           <div className="w-full h-full col-span-3"></div>
-          <div className="w-full h-full bg-white border border-[#D6E7FF]"></div>
+          <div className="w-full h-full border bg-[#F3F8FF] border-[#D6E7FF]"></div>
 
           {/* Row 6 */}
-          <div className="w-full h-full bg-white border border-[#D6E7FF] row-span-3"></div>
+          <div className="w-full h-full border bg-[#F3F8FF] border-[#D6E7FF] row-span-3"></div>
           <div className="w-full h-full col-span-3"></div>
-          <div className="w-full h-full bg-white border border-[#D6E7FF] row-span-3"></div>
+          <div className="w-full h-full border bg-[#F3F8FF] border-[#D6E7FF] row-span-3"></div>
           <div className="w-full h-full col-span-3"></div>
           <div className="w-full h-full col-span-3"></div>
 
@@ -80,8 +63,8 @@ const Map = ({ currentIndex }) => {
           >
             Review
           </div>
-          <div className="w-full h-full bg-white border border-[#D6E7FF]"></div>
-          <div className="w-full h-full bg-white border border-[#D6E7FF] col-span-2"></div>
+          <div className="w-full h-full border bg-[#F3F8FF] border-[#D6E7FF]"></div>
+          <div className="w-full h-full border bg-[#F3F8FF] border-[#D6E7FF] col-span-2"></div>
           <div
             className={`w-full h-full text-white flex items-center justify-center border border-[#D6E7FF] rounded-br-lg ${
               currentIndex === 3
@@ -93,16 +76,6 @@ const Map = ({ currentIndex }) => {
           </div>
         </div>
       </div>
-      <img
-        src={logoText}
-        alt="logotext"
-        className="absolute flex items-center justify-center"
-      />
-      {modal && (
-        <Modal>
-          <Roulette onClose={handleCloseModal} />
-        </Modal>
-      )}
     </div>
   );
 };

diff --git a/src/components/Roulette.jsx b/src/components/Roulette.jsx
@@ -44,7 +44,7 @@ const Roulette = ({ onClose }) => {
     setShowWheel(false);
     setShowText(false);
     const winningOption = data[prizeNumber - 1].option;
-    setText(`${winningOption} 당첨!`);
+    setText(`서울 당첨!`);
   };
 
   return (

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -1,15 +1,48 @@
-import React from "react";
+import React, { useState } from "react";
 import Map from "../components/Map";
 import Modal from "../components/Modal";
+import Roulette from "../components/Roulette";
+import seoul from "../assets/seoul.png";
+import logoText from "../assets/LogoText.png";
 import SlotMachine from "../components/SlotMachine";
 
 const Home = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [modalRoulette, setModalRoulette] = useState(false);
+  const [modalSlot, seModalSlot] = useState(false);
+
+  const handleNext = () => {
+    setCurrentIndex((prevIndex) => prevIndex + 1);
+    setModalRoulette(false);
+  };
+
+  const handleOpenModal = () => {
+    setModalRoulette(true);
+  };
+
   return (
     <div className="w-full h-full relative">
-      <Map currentIndex={0}></Map>
-      {/* <Modal>
-        <SlotMachine></SlotMachine>
-      </Modal> */}
+      <Map currentIndex={currentIndex} onCellClick={handleOpenModal} />
+      {modalRoulette && (
+        <Modal>
+          <Roulette onClose={handleNext} />
+        </Modal>
+      )}
+      {currentIndex === 0 && (
+        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+          <img src={logoText} className="w-90 h-90" />
+        </div>
+      )}
+      {currentIndex !== 0 && (
+        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+          <img src={seoul} alt="Seoul" className="w-90 h-90" />
+        </div>
+      )}
+      {modalSlot && (
+        <Modal>
+          <SlotMachine onClose={handleNext} />
+        </Modal>
+      )}
     </div>
   );
 };

diff --git a/src/pages/Signup.jsx b/src/pages/Signup.jsx
@@ -2,10 +2,12 @@ import React, { useState, useEffect } from "react";
 import Splash from "../components/Splash";
 import logo from "../assets/DirectHit.png";
 import { getUserId } from "../api/api";
+import { useNavigate } from "react-router-dom";
 
 const Signup = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [email, setEmail] = useState("");
+  const navigate = useNavigate();
 
   const handleKeyDown = (event) => {
     if (event.key === "Enter") {
@@ -14,13 +16,13 @@ const Signup = () => {
         getUserId(email).then((userId) => {
           console.log("Successfully added user with ID:", userId);
           setEmail("");
+          navigate("/home"); // 이메일 처리 후 /home 경로로 이동
         });
       } else {
         console.log("Please enter a valid email");
       }
     }
   };
-
   useEffect(() => {
     const timer = setTimeout(() => {
       setIsLoading(false);

diff --git a/src/routes/router.jsx b/src/routes/router.jsx
@@ -6,11 +6,11 @@ import Signup from "../pages/Signup";
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <Home />,
+    element: <Signup />,
   },
   {
-    path: "signup",
-    element: <Signup />,
+    path: "/home",
+    element: <Home />,
   },
 ]);