Merge pull request #249 from 100-hours-a-week/feature/lucy

Feature/lucy
100-hours-a-week · Sep 30, 2024 · 21e38b5 · 21e38b5
2 parents 37e78cd + 71e8b1d
commit 21e38b5
Show file tree

Hide file tree

Showing 10 changed files with 330 additions and 240 deletions.
diff --git a/src/Component/GameCarousel/carouselItem.tsx b/src/Component/GameCarousel/carouselItem.tsx
@@ -36,6 +36,9 @@ const CarouselItem = ({ data }: any) => {
       <NameStyle>{data.realName}</NameStyle>
       <GameChart data={data.chart} />
       <TitleStyle>해당 종목의 뉴스 히스토리</TitleStyle>
+      <p style={{ marginTop: "0.4rem", fontSize: "13px" }}>
+      ❗️게임 속 제공되던 정보는 여기서 나왔어요{" "}
+      </p>
       <GameNewsList data={data.news} />
     </Container>
   );

diff --git a/src/Component/GameCarousel/gameCarousel.tsx b/src/Component/GameCarousel/gameCarousel.tsx
@@ -2,27 +2,54 @@ import { useSpringCarousel } from "react-spring-carousel";
 import CarouselItem from "./carouselItem";
 import styled from "styled-components";
 import { Colors } from "../../Styles/Colors";
-import { GameStockProps } from "../../constants/interface";
+import { useNavigate } from "react-router-dom";
 
 const BtnContainer = styled.div`
   display: flex;
-  gap: 20px;
-  justify-content: center;
+  justify-content: space-between;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 `;
 const BtnStyle = styled.button`
-  padding: 10px 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  margin-top: 0.2rem;
+  height: 2rem;
   background-color: ${Colors.main};
   border: 1px solid ${Colors.main};
   border-radius: 5px;
   color: white;
   font-size: 17px;
   font-family: "SCDream6";
+  white-space: nowrap;
+  cursor: pointer;
 `;
 const ChartStyle = styled.div`
   overflow: hidden;
 `;
 
+const BackButton = styled.button`
+  padding: 0.5rem;
+  height: 2rem;
+  margin-top: 0.3rem;
+  border-radius: 10px;
+  border: 1px solid ${Colors.main};
+  color: ${Colors.main};
+  background-color: white;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${Colors.main};
+    color: white;
+  }
+`;
+
 const GameCarousel = ({ stocks }: any) => {
+  const nav = useNavigate();
+
   const { carouselFragment, slideToPrevItem, slideToNextItem } =
     useSpringCarousel({
       items: stocks.map((data: any, index: any) => ({
@@ -33,11 +60,18 @@ const GameCarousel = ({ stocks }: any) => {
 
   return (
     <>
-      <ChartStyle>{carouselFragment}</ChartStyle>
       <BtnContainer>
         <BtnStyle onClick={slideToPrevItem}>이전</BtnStyle>
+        <BackButton
+          onClick={() => {
+            nav("/game/result/total");
+          }}
+        >
+          게임 결과 페이지로 돌아가기
+        </BackButton>
         <BtnStyle onClick={slideToNextItem}>다음</BtnStyle>
       </BtnContainer>
+      <ChartStyle>{carouselFragment}</ChartStyle>
     </>
   );
 };

diff --git a/src/Component/GameCarousel/gameChart.tsx b/src/Component/GameCarousel/gameChart.tsx
@@ -25,7 +25,10 @@ const GameChart = ({ data }: LineChartData) => {
           type: "area",
           height: 400,
           toolbar: {
-            show: true,
+            show: false,
+          },
+          zoom: {
+            enabled: false,
           },
         },
         xaxis: {

diff --git a/src/Component/GameCarousel/gameNews.tsx b/src/Component/GameCarousel/gameNews.tsx
@@ -30,10 +30,14 @@ const NewsInfo = styled.div`
 `;
 
 const Title = styled.div`
-  font-size: 20px;
+  font-size: 17px;
+`;
+const Publisher = styled.p`
+  font-size: 15px;
+`;
+const Date = styled.p`
+  font-size: 15px;
 `;
-const Publisher = styled.p``;
-const Date = styled.p``;
 
 const GameNews: React.FC<GameNewsProps> = ({ title, url, publisher, date }) => {
   return (

diff --git a/src/Pages/game/gameStocks.tsx b/src/Pages/game/gameStocks.tsx
@@ -3,10 +3,14 @@ import GameCarousel from "../../Component/GameCarousel/gameCarousel";
 import { useEffect, useState } from "react";
 import axios from "axios";
 import { GameStockProps } from "../../constants/interface";
-import BentoBar from "../../Game/Main/BentoBar/bentoBar";
+import { GoAlert } from "react-icons/go";
+import { Colors } from "../../Styles/Colors";
+import Button from "../../Component/Button/button";
+import { useNavigate } from "react-router-dom";
 
 const GameStocks = () => {
   const [stocks, setStocks] = useState<GameStockProps[]>([]);
+  const nav = useNavigate();
 
   useEffect(() => {
     axios
@@ -33,9 +37,33 @@ const GameStocks = () => {
       {stocks.length > 0 ? (
         <GameCarousel stocks={stocks} />
       ) : (
-        <p>데이터가 없습니다.</p>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            marginTop: "10rem",
+          }}
+        >
+          <GoAlert
+            style={{
+              fontSize: "100px",
+              color: Colors.main,
+              marginBottom: "1rem",
+            }}
+          />
+          <p style={{ marginBottom: "2rem" }}>정상적인 접근 경로가 아닙니다</p>
+          <Button
+            children="게임 홈으로 돌아가기"
+            $state="normal"
+            $colorType="gradient"
+            $size="medium"
+            onClick={() => {
+              nav("/game");
+            }}
+          />
+        </div>
       )}
-      {/* <BentoBar /> */}
     </div>
   );
 };