Merge pull request #205 from 100-hours-a-week/feature/elle

Fix : 이슈 해결

src/Game/Main/BentoBar/bentoBar.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useRef, useState } from "react";
+import { CgMenuGridO } from "react-icons/cg";
+import { useNavigate } from "react-router-dom";
+import { ListBox, Restart, IconDiv } from "./bentoStyle";
+
+const BentoBar = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const outsideRef = useRef<HTMLDivElement>(null);
+  const iconRef = useRef<HTMLDivElement>(null);
+  const navigate = useNavigate();
+
+  const Nav = (location: string) => {
+    if (location === "game") {
+      navigate("/game");
+      localStorage.removeItem("hasSeenTutorial");
+    } else if (location === "rank") {
+      navigate("/game/rank");
+    } else {
+      navigate("/home");
+    }
+  };
+
+  // 슬라이드 토글
+  const toggleSlide = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  // 외부 클릭 감지 및 메뉴 닫기
+  useEffect(() => {
+    const handleClickOutside = (e: any) => {
+      if (
+        outsideRef.current &&
+        !outsideRef.current.contains(e.target as Node) &&
+        iconRef.current &&
+        !iconRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [outsideRef]);
+
+  return (
+    <>
+      <IconDiv
+        ref={iconRef}
+        style={{
+          position: "absolute",
+          top: "750px",
+          left: "420px",
+          minWidth: "25px",
+        }}
+        onClick={toggleSlide}
+      >
+        <CgMenuGridO style={{ width: "25px", height: "25px" }} />
+
+        {isOpen ? (
+          <ListBox ref={outsideRef}>
+            <Restart onClick={() => Nav("game")}>게임 재시작</Restart>
+            <Restart onClick={() => Nav("rank")}>랭킹</Restart>
+            <Restart onClick={() => Nav("home")}>홈</Restart>
+          </ListBox>
+        ) : (
+          <></>
+        )}
+      </IconDiv>
+    </>
+  );
+};
+
+export default BentoBar;

src/Game/Main/BentoBar/bentoStyle.ts

@@ -0,0 +1,54 @@
+import styled, { keyframes } from "styled-components";
+import { Colors } from "../../../Styles/Colors";
+
+export const Restart = styled.div`
+  display: flex;
+  width: 90px;
+  height: 40px;
+  border: 1px solid #615efc;
+  border-radius: 20px;
+  font-size: 12px;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.5rem;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+  background-color: white;
+  color: black;
+`;
+
+const fadeIn = keyframes`
+    from{
+        opacity:0;
+        transform: translateY(10px)
+    }
+    to{
+        opacity:1;
+        transform: translateY(0)
+    }
+`;
+
+export const ListBox = styled.div`
+  position: absolute;
+  bottom: 50px;
+  width: 100px;
+  height: 150px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 0.5rem;
+  animation: ${fadeIn} 0.5s ease-out forwards;
+  opacity: 0;
+`;
+
+export const IconDiv = styled.div`
+  border-radius: 25px;
+  width: 50px;
+  height: 50px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${Colors.main};
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+`;

src/Game/Main/gameStart.tsx

@@ -18,6 +18,7 @@ const GameMain: React.FC = () => {
   const [nickname, setNickname] = useState<string>("");
   const navigate = useNavigate();
   const [isValidQuantity, setIsValidQuantity] = useState(true);
+  const [isSkipped, setIsSkipped] = useState(false);
 
   const handleRank = () => {
     navigate("/game/rank");
@@ -68,35 +69,42 @@ const GameMain: React.FC = () => {
     setIsValidQuantity(true);
   };
 
+  const handleSkip = () => {
+    setIsSkipped(true);
+    setIsLoadingFinished(false);
+    setIsFlying(false);
+    setIsGame(true);
+  };
+
   useEffect(() => {
-    // Wait for the loading animation to finish (2s + 2s duration of the loading animation)
-    const timer = setTimeout(() => {
-      setIsLoadingFinished(true);
+    if (!isSkipped) {
+      const timer = setTimeout(() => {
+        setIsLoadingFinished(true);
 
-      const flyTimer = setTimeout(() => {
-        setIsFlying(true);
+        const flyTimer = setTimeout(() => {
+          setIsFlying(true);
 
-        const gameTimer = setTimeout(() => {
-          setIsGame(true);
-        }, 2000);
+          const gameTimer = setTimeout(() => {
+            setIsGame(true);
+          }, 2000);
 
-        return () => clearTimeout(gameTimer);
-      }, 2000);
+          return () => clearTimeout(gameTimer);
+        }, 2000);
 
-      return () => clearTimeout(flyTimer);
-    }, 5000);
+        return () => clearTimeout(flyTimer);
+      }, 5000);
 
-    return () => clearTimeout(timer); // Clean up the timer
-  }, []);
+      return () => clearTimeout(timer);
+    }
+  }, [isSkipped]);
 
   return (
     <div className="container">
-      {/* {isGame ? <div style={{ marginBottom: "0.5rem" }}>스껄게임</div> : ""} */}
       <div className="macbook">
         <div className="macbook__topBord">
           <div className="macbook__display">
             <div className="macbook__load"></div>
-            {isLoadingFinished && (
+            {isLoadingFinished && !isSkipped && (
               <img
                 style={{
                   width: "100px",
@@ -159,6 +167,25 @@ const GameMain: React.FC = () => {
           </div>
         </div>
       </div>
+      {/* 스킵 버튼 */}
+      {!isGame && (
+        <button
+          onClick={handleSkip}
+          style={{
+            position: "absolute",
+            top: "10px",
+            right: "10px",
+            backgroundColor: "#615EFC",
+            color: "#fff",
+            border: "none",
+            borderRadius: "5px",
+            padding: "10px",
+            cursor: "pointer",
+          }}
+        >
+          Skip
+        </button>
+      )}
       {isGame && (
         <>
           <div
@@ -169,7 +196,9 @@ const GameMain: React.FC = () => {
               flexDirection: "column",
             }}
           >
-            <GameTitle>Skrr 모의 투자 게임</GameTitle>
+            <GameTitle>
+              <b style={{ color: "#615EFC" }}>Skrrr &nbsp;</b>모의 투자 게임
+            </GameTitle>
             <Input
               colorType="strokeType"
               size="nickname"