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

Feature/elle
100-hours-a-week · Sep 30, 2024 · b9eefdf · b9eefdf
2 parents 9bef331 + 075eb1c
commit b9eefdf
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 349 deletions.
diff --git a/src/Component/Chart/chart.tsx b/src/Component/Chart/chart.tsx
@@ -21,7 +21,7 @@ const Chart = ({ data }: CandleData) => {
   const [newsHtml, setNewsHtml] = useState<string>("");
   const latestDate = new Date(data[data.length - 1].x).getTime();
   const initialZoomMin = new Date(
-    latestDate - 90 * 24 * 60 * 60 * 1000
+    latestDate - 60 * 24 * 60 * 60 * 1000
   ).getTime();
 
   const onRequestClose = () => {

diff --git a/src/Component/Dropdown/gameDropdown.tsx b/src/Component/Dropdown/gameDropdown.tsx
@@ -11,6 +11,7 @@ import {
   Button,
   Menu,
 } from "./gameStyle";
+import { useHintStore } from "../../store/hintStore";
 
 export interface StockItemProps {
   onSelectStock: (stockId: number) => void;
@@ -20,6 +21,7 @@ const StockItem: React.FC<StockItemProps> = ({ onSelectStock }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedStock, setSelectedStock] = useState<string | null>(null);
   const { stockData } = useStock();
+  const { purchaseHints, setPurchaseHints } = useHintStore();
 
   const toggleDropdown = () => {
     setIsOpen(!isOpen);
@@ -54,16 +56,40 @@ const StockItem: React.FC<StockItemProps> = ({ onSelectStock }) => {
           style={{ pointerEvents: isOpen ? "auto" : "none" }}
         >
           {stockData &&
-            stockData.map((item) => (
-              <Li
-                variants={itemVariants}
-                key={item.stockId}
-                onClick={() => handleSelect(item)}
-                style={{ marginTop: "0.5rem" }}
-              >
-                <span>{item.name}</span>
-              </Li>
-            ))}
+            stockData.map((item) => {
+              // 해당 종목에서 구매한 단계들 찾기
+              const purchasedLevels = purchaseHints[item.stockId]
+                ? Object.keys(purchaseHints[item.stockId])
+                    .filter(
+                      (level) => purchaseHints[item.stockId][level].purchased
+                    ) // 구매된 단계만 필터링
+                    // .map((level) => "🔑".repeat(parseInt(level)))
+                    .join(", ") // 구매된 단계들을 문자열로 합침
+                : null;
+
+              return (
+                <Li
+                  variants={itemVariants}
+                  key={item.stockId}
+                  onClick={() => handleSelect(item)}
+                  style={{ marginTop: "0.5rem" }}
+                >
+                  <span>{item.name}</span>
+                  {purchaseHints[item.stockId] && (
+                    <span
+                      style={{
+                        marginLeft: "8px",
+                        color: "black",
+                        fontSize: "12px",
+                        textAlign: "right",
+                      }}
+                    >
+                      {purchasedLevels} ✅
+                    </span>
+                  )}
+                </Li>
+              );
+            })}
         </Ul>
       </Menu>
     </>

diff --git a/src/Component/Dropdown/gameStyle.ts b/src/Component/Dropdown/gameStyle.ts
@@ -51,6 +51,9 @@ export const Li = styled(motion.li)`
   color: #6600ff;
   display: block;
   z-index: 3000;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 `;
 
 export const dropdownVariants: Variants = {

diff --git a/src/Component/Layout/Layout.tsx b/src/Component/Layout/Layout.tsx
@@ -3,6 +3,7 @@ import Header from "./Header/Header";
 import NavBar from "./NavBar/NavBar";
 import styled from "styled-components";
 import { useAuth } from "../../contexts/authContext";
+import BentoBar from "../../Game/Main/BentoBar/bentoBar";
 
 const Main = styled.main`
   width: 500px;
@@ -31,12 +32,15 @@ const Layout = (props: { children: React.ReactNode }) => {
   const location = useLocation();
   const isLoginPage = location.pathname === "/nologin";
   const isGame = location.pathname.includes("/game");
+  const GameNav = location.pathname.includes(
+    "/rank" || "/total" || "gameStocks"
+  );
 
   return (
     <Container className="Layout">
       {!isLoginPage && !isGame && <Header />}
       <Main style={{ height: "100%" }}>{props.children}</Main>
-      {!isLoginPage && !isGame && <NavBar />}
+      {!isLoginPage && !isGame ? <NavBar /> : GameNav ? <BentoBar /> : ""}
     </Container>
   );
 };

diff --git a/src/Game/Main/BentoBar/bentoBar.tsx b/src/Game/Main/BentoBar/bentoBar.tsx
@@ -48,14 +48,17 @@ const BentoBar = () => {
   }, [outsideRef]);
 
   return (
-    <>
+    <div style={{ width: "500px", position: "fixed", bottom: "0px" }}>
       <IconDiv
         ref={iconRef}
         style={{
-          position: "absolute",
-          top: "750px",
-          left: "420px",
+          // position: "absolute",
+          // top: "750px",
+          // left: "420px",
+
+          left: "430px",
           minWidth: "25px",
+          bottom: "30px",
         }}
         onClick={toggleSlide}
       >
@@ -71,7 +74,7 @@ const BentoBar = () => {
           <></>
         )}
       </IconDiv>
-    </>
+    </div>
   );
 };
 

diff --git a/src/Game/Main/BentoBar/bentoStyle.ts b/src/Game/Main/BentoBar/bentoStyle.ts
@@ -2,18 +2,18 @@ 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;
+  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`
@@ -28,27 +28,28 @@ const fadeIn = keyframes`
 `;
 
 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;
+  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;
+  border-radius: 25px;
+  width: 50px;
+  height: 50px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${Colors.main};
+  background-color: white;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 `;
diff --git a/src/Game/Shop/exchangeStoreMain.tsx b/src/Game/Shop/exchangeStoreMain.tsx
@@ -4,7 +4,6 @@ import styled from "styled-components";
 import StockItem from "../../Component/Dropdown/gameDropdown";
 import { useLocation } from "react-router-dom";
 import { formatPrice } from "../../util/gameUtil";
-import HintShop from "./hintshop";
 
 const Container = styled.div`
   width: 500px;