From 6217d314633aeafcf73c01c6fdf71cafa9fbecd2 Mon Sep 17 00:00:00 2001
From: lucy726j <lucy726jeon@gmail.com>
Date: Tue, 24 Sep 2024 17:51:15 +0900
Subject: [PATCH 01/18] pull

---
 src/Component/Game/Rank/rankBox.tsx |  4 +-
 src/util/gameUtil.ts                | 66 ++++++++++++++---------------
 2 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/Component/Game/Rank/rankBox.tsx b/src/Component/Game/Rank/rankBox.tsx
index 7c91040..644f466 100644
--- a/src/Component/Game/Rank/rankBox.tsx
+++ b/src/Component/Game/Rank/rankBox.tsx
@@ -3,7 +3,7 @@ import * as S from "./rankBoxStyle";
 import gold from "../../../img/goldMedal.png";
 import silver from "../../../img/silverMedal.png";
 import bronze from "../../../img/bronzeMedal.png";
-import { formatPrice, formatRate } from "../../../util/util";
+import { formatPrice, formatChangeRateFrom } from "../../../util/gameUtil";
 
 const RankBox: React.FC<RankDataProps> = ({
   nickname,
@@ -24,7 +24,7 @@ const RankBox: React.FC<RankDataProps> = ({
       <S.UserContainer>
         <S.Nickname>{nickname}</S.Nickname>
         <S.Budget>{formatPrice(total)}</S.Budget>
-        <S.Rate>{formatRate(profitRate)} %</S.Rate>
+        <S.Rate>{profitRate} %</S.Rate>
       </S.UserContainer>
     </S.Container>
   );
diff --git a/src/util/gameUtil.ts b/src/util/gameUtil.ts
index bf5af11..1405fc6 100644
--- a/src/util/gameUtil.ts
+++ b/src/util/gameUtil.ts
@@ -1,48 +1,48 @@
 import React from "react";
 
 export const formatPrice = (num: number): string => {
-    if (num === 0) {
-        return "-";
-    }
+  if (num === 0) {
+    return "-";
+  }
 
-    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 };
 
 export const formatChangeRate = (changeRate: number): string => {
-    if (changeRate === 0) {
-        return "-";
-    }
+  if (changeRate === 0) {
+    return "-";
+  }
 
-    const formattedRate = `${Math.abs(changeRate).toFixed()}%`; // 소수점 2자리까지 표시
-    if (changeRate > 0) {
-        return `▲ + ${formattedRate}`;
-    } else if (changeRate < 0) {
-        return `▼ - ${formattedRate}`;
-    } else {
-        return formattedRate;
-    }
+  const formattedRate = `${Math.abs(changeRate).toFixed(1)}%`; // 소수점 2자리까지 표시
+  if (changeRate > 0) {
+    return `▲ ${formattedRate}`;
+  } else if (changeRate < 0) {
+    return `▼ ${formattedRate}`;
+  } else {
+    return formattedRate;
+  }
 };
 
 interface ChangeRateResult {
-    format: string;
-    color: string;
+  format: string;
+  color: string;
 }
 
 export const formatChangeRateFrom = (changeRate: number): ChangeRateResult => {
-    if (changeRate > 0) {
-        return {
-            format: `+ ${changeRate}%`,
-            color: "red",
-        };
-    } else if (changeRate < 0) {
-        return {
-            format: `- ${changeRate}`,
-            color: "blue",
-        };
-    } else {
-        return {
-            format: "-",
-            color: "black",
-        };
-    }
+  if (changeRate > 0) {
+    return {
+      format: `+ ${changeRate}%`,
+      color: "red",
+    };
+  } else if (changeRate < 0) {
+    return {
+      format: `- ${changeRate}`,
+      color: "blue",
+    };
+  } else {
+    return {
+      format: "-",
+      color: "black",
+    };
+  }
 };

From 6e766353234548ad6c28746e40dca6e16fc6b529 Mon Sep 17 00:00:00 2001
From: lucy726j <lucy726jeon@gmail.com>
Date: Thu, 26 Sep 2024 15:52:07 +0900
Subject: [PATCH 02/18] pull

---
 src/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/index.tsx b/src/index.tsx
index d97ca1d..c7cbae3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";

From b73e949209896394ce650c3233bf78536699fbf1 Mon Sep 17 00:00:00 2001
From: lucy726j <lucy726jeon@gmail.com>
Date: Fri, 27 Sep 2024 14:21:22 +0900
Subject: [PATCH 03/18] =?UTF-8?q?Fix=20:=20=EB=9E=AD=ED=82=B9=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=20=EB=B2=84=ED=8A=BC=20nav=20=EC=82=AD=EC=A0=9C,=20?=
 =?UTF-8?q?=EB=93=B1=EB=A1=9D=20=ED=99=95=EC=9D=B8=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=EB=9D=84=EC=9A=B0=EA=B8=B0=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Pages/game/totalResult.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/Pages/game/totalResult.tsx b/src/Pages/game/totalResult.tsx
index fb5be86..e0034ef 100644
--- a/src/Pages/game/totalResult.tsx
+++ b/src/Pages/game/totalResult.tsx
@@ -106,7 +106,13 @@ const TotalResult = () => {
       )
       .then((res) => {
         if (res.status === 200) {
-          nav("/game/rank");
+          {
+            swal({
+              title: "랭킹 등록 완료!",
+              text: "랭킹이 등록되었습니다.",
+              icon: "success",
+            });
+          }
         } else {
           {
             swal({

From 50b7a47f0e7bf9ab3c38ee22d40049adf22087b2 Mon Sep 17 00:00:00 2001
From: lucy726j <lucy726jeon@gmail.com>
Date: Fri, 27 Sep 2024 14:23:38 +0900
Subject: [PATCH 04/18] =?UTF-8?q?Fix=20:=20=EA=B2=8C=EC=9E=84=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94=EC=97=90=20=EB=A3=B0=20=EC=84=A4=EB=AA=85=20=EB=8B=AC?=
 =?UTF-8?q?=EB=A6=AC=EB=8A=94=20=EA=B1=B0=20=EA=B2=8C=EC=9E=84=EC=A4=91?=
 =?UTF-8?q?=EC=97=90=EB=A7=8C=20=EB=8B=AC=EB=A6=AC=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Component/Game/GameHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Component/Game/GameHeader.tsx b/src/Component/Game/GameHeader.tsx
index 3dc22af..54add40 100644
--- a/src/Component/Game/GameHeader.tsx
+++ b/src/Component/Game/GameHeader.tsx
@@ -21,7 +21,7 @@ const GameHeader: React.FC<GameHeaderProp> = ({ text }) => {
   return (
     <Container>
       <>{text}</>
-      <RuleModal />
+      {text.length < 4 ? <RuleModal /> : <></>}
     </Container>
   );
 };

From b883d08b58efe93086dc67038cc9e1c85b9e5c70 Mon Sep 17 00:00:00 2001
From: lucy726j <lucy726jeon@gmail.com>
Date: Fri, 27 Sep 2024 14:40:55 +0900
Subject: [PATCH 05/18] =?UTF-8?q?Fix=20:=20=EB=9E=AD=ED=82=B9=20=EB=B0=95?=
 =?UTF-8?q?=EC=8A=A4=20=ED=95=AD=EB=AA=A9=20=EC=B6=94=EA=B0=80=20#222?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Pages/game/rank.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/Pages/game/rank.tsx b/src/Pages/game/rank.tsx
index 72c8eab..c57bb67 100644
--- a/src/Pages/game/rank.tsx
+++ b/src/Pages/game/rank.tsx
@@ -4,7 +4,15 @@ import { RankDataProps, RankListProps } from "../../constants/interface";
 import axios from "axios";
 import RankList from "../../Component/Game/Rank/rankList";
 import BentoBar from "../../Game/Main/BentoBar/bentoBar";
-import swal from "sweetalert";
+import styled from "styled-components";
+
+const TitleContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-top: 1rem;
+  border-bottom: 1px solid black;
+  padding-bottom: 0.5rem;
+`;
 
 const Rank = () => {
   const [rankList, setRankList] = useState<RankDataProps[]>([]);
@@ -29,6 +37,12 @@ const Rank = () => {
   return (
     <div style={{ position: "relative" }}>
       <GameHeader text={"명예의 전당"} />
+      <TitleContainer>
+        <p style={{ marginLeft: "1.7rem" }}>순위</p>
+        <p style={{ marginLeft: "1rem" }}>닉네임</p>
+        <p style={{ marginLeft: "11rem" }}>수익금</p>
+        <p style={{ marginLeft: "5rem" }}>수익률</p>
+      </TitleContainer>
       <RankList data={rankList} />
       <BentoBar />
     </div>

From 0434ff922d4217710f5aac9056fb96ef8ee552a6 Mon Sep 17 00:00:00 2001
From: lucy726j <lucy726jeon@gmail.com>
Date: Fri, 27 Sep 2024 14:53:32 +0900
Subject: [PATCH 06/18] =?UTF-8?q?Style=20:=20=EC=B5=9C=EC=A2=85=20?=
 =?UTF-8?q?=EA=B2=B0=EA=B3=BC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Pages/game/rank.tsx        | 4 ++--
 src/Pages/game/totalResult.tsx | 8 +++-----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/Pages/game/rank.tsx b/src/Pages/game/rank.tsx
index c57bb67..e180aaf 100644
--- a/src/Pages/game/rank.tsx
+++ b/src/Pages/game/rank.tsx
@@ -39,8 +39,8 @@ const Rank = () => {
       <GameHeader text={"명예의 전당"} />
       <TitleContainer>
         <p style={{ marginLeft: "1.7rem" }}>순위</p>
-        <p style={{ marginLeft: "1rem" }}>닉네임</p>
-        <p style={{ marginLeft: "11rem" }}>수익금</p>
+        <p style={{ marginLeft: "2rem" }}>닉네임</p>
+        <p style={{ marginLeft: "10rem" }}>수익금</p>
         <p style={{ marginLeft: "5rem" }}>수익률</p>
       </TitleContainer>
       <RankList data={rankList} />
diff --git a/src/Pages/game/totalResult.tsx b/src/Pages/game/totalResult.tsx
index e0034ef..d0ca08b 100644
--- a/src/Pages/game/totalResult.tsx
+++ b/src/Pages/game/totalResult.tsx
@@ -22,6 +22,7 @@ const SkrrContainer = styled.div`
   display: flex;
   flex-direction: row;
   position: relative;
+  margin-top: 1.5rem;
 `;
 
 const ImgStyle = styled.img`
@@ -38,9 +39,9 @@ const BtnBox = styled.div`
   flex-direction: row;
   align-items: center;
   gap: 1rem;
-  margin-top: 0.5rem;
   margin-left: auto;
   margin-right: 2.5rem;
+  margin-top: 1rem;
 `;
 
 const NickBox = styled.div`
@@ -134,10 +135,7 @@ const TotalResult = () => {
         <ImgStyle src={SkrrImg} alt="껄무새 이미지" />
       </SkrrContainer>
       <BtnBox>
-        <NickBox>
-          <p style={{ color: "black" }}>{user} </p>
-          <p>의 점수를</p>
-        </NickBox>
+        <NickBox>{user}</NickBox>
         <Button
           children="랭킹에 등록하기"
           $state="normal"

From 43650b29a706b74d04cd24c0416629fd13f6e510 Mon Sep 17 00:00:00 2001
From: lucy726j <lucy726jeon@gmail.com>
Date: Sat, 28 Sep 2024 15:51:39 +0900
Subject: [PATCH 07/18] =?UTF-8?q?Style=20:=20=EB=9E=AD=ED=82=B9=20?=
 =?UTF-8?q?=EB=B0=95=EC=8A=A4=20=EC=95=88=EC=97=90=20=EC=88=98=EC=9D=B5?=
 =?UTF-8?q?=EB=A5=A0=20=EB=93=B1=EB=9D=BD=EC=97=90=20=EB=94=B0=EB=A5=B8=20?=
 =?UTF-8?q?=EC=83=89=EC=83=81=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Component/Game/Rank/rankBox.tsx     |  4 ++--
 src/Component/Game/Rank/rankBoxStyle.ts |  3 ---
 src/util/gameUtil.ts                    | 17 +++++++++++++++++
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/Component/Game/Rank/rankBox.tsx b/src/Component/Game/Rank/rankBox.tsx
index 644f466..65aec36 100644
--- a/src/Component/Game/Rank/rankBox.tsx
+++ b/src/Component/Game/Rank/rankBox.tsx
@@ -3,7 +3,7 @@ import * as S from "./rankBoxStyle";
 import gold from "../../../img/goldMedal.png";
 import silver from "../../../img/silverMedal.png";
 import bronze from "../../../img/bronzeMedal.png";
-import { formatPrice, formatChangeRateFrom } from "../../../util/gameUtil";
+import { formatPrice, formatRateColor } from "../../../util/gameUtil";
 
 const RankBox: React.FC<RankDataProps> = ({
   nickname,
@@ -24,7 +24,7 @@ const RankBox: React.FC<RankDataProps> = ({
       <S.UserContainer>
         <S.Nickname>{nickname}</S.Nickname>
         <S.Budget>{formatPrice(total)}</S.Budget>
-        <S.Rate>{profitRate} %</S.Rate>
+        <S.Rate style={formatRateColor(profitRate)}>{profitRate} %</S.Rate>
       </S.UserContainer>
     </S.Container>
   );
diff --git a/src/Component/Game/Rank/rankBoxStyle.ts b/src/Component/Game/Rank/rankBoxStyle.ts
index f1424f0..0b243b7 100644
--- a/src/Component/Game/Rank/rankBoxStyle.ts
+++ b/src/Component/Game/Rank/rankBoxStyle.ts
@@ -4,14 +4,12 @@ import { Colors } from "../../../Styles/Colors";
 export const Container = styled.div`
   display: flex;
   flex-direction: row;
-  /* justify-content: start; */
   align-items: center;
   border-radius: 20px;
   margin-bottom: 1rem;
   padding: 0.8rem 1rem;
   box-shadow: 0px 6px 5px rgb(213, 213, 213);
   border: 1px solid rgb(213, 213, 213);
-  /* min-width: 95%; */
   white-space: nowrap;
   gap: 1rem;
 `;
@@ -45,7 +43,6 @@ export const Budget = styled.div`
 `;
 
 export const Rate = styled.div`
-  color: ${Colors.red};
   font-family: "SCDream3";
   text-align: right;
   width: 100px;
diff --git a/src/util/gameUtil.ts b/src/util/gameUtil.ts
index 1405fc6..0857e34 100644
--- a/src/util/gameUtil.ts
+++ b/src/util/gameUtil.ts
@@ -1,4 +1,5 @@
 import React from "react";
+import { P } from "../Component/GoogleLogin/loginStyle";
 
 export const formatPrice = (num: number): string => {
   if (num === 0) {
@@ -46,3 +47,19 @@ export const formatChangeRateFrom = (changeRate: number): ChangeRateResult => {
     };
   }
 };
+
+export const formatRateColor = (profitRate: number) => {
+  if (profitRate > 0) {
+    return {
+      color: "red",
+    };
+  } else if (profitRate < 0) {
+    return {
+      color: "blue",
+    };
+  } else {
+    return {
+      color: "black",
+    };
+  }
+};

From c6e15c93b0c0617ce694267be719f7dbf8fd9f95 Mon Sep 17 00:00:00 2001
From: lucy726j <lucy726jeon@gmail.com>
Date: Sat, 28 Sep 2024 16:51:19 +0900
Subject: [PATCH 08/18] =?UTF-8?q?Style=20:=20=ED=99=88=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=20CSS=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=9D=98?=
 =?UTF-8?q?=EB=AF=B8=20=EB=AA=85=ED=99=95=ED=95=98=EA=B2=8C=20=EC=84=A4?=
 =?UTF-8?q?=EB=AA=85=20=EC=B6=94=EA=B0=80=20#219?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Component/News/NewsList.tsx |  91 +++++++++++------------
 src/Pages/home.tsx              | 125 ++++++++------------------------
 src/Pages/homeStyle.ts          |  80 ++++++++++++++++++++
 3 files changed, 156 insertions(+), 140 deletions(-)
 create mode 100644 src/Pages/homeStyle.ts

diff --git a/src/Component/News/NewsList.tsx b/src/Component/News/NewsList.tsx
index 4c141d4..a139509 100644
--- a/src/Component/News/NewsList.tsx
+++ b/src/Component/News/NewsList.tsx
@@ -9,57 +9,58 @@ import { useLocation, useNavigate } from "react-router-dom";
 import NoNews from "./\bnoNews";
 
 const ListWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 20px;
-    gap: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  gap: 10px;
+  height: 400px;
+  overflow: scroll;
+  scrollbar-width: none;
 `;
 
 const NewsList: React.FC = () => {
-    // 나만의 뉴스 데이터
-    const [news, setNews] = useState([]);
-    const navigate = useNavigate();
-    const location = useLocation();
-    // const change = usePortfolioStore((state) => state.change);
+  // 나만의 뉴스 데이터
+  const [news, setNews] = useState([]);
+  const navigate = useNavigate();
+  const location = useLocation();
+  // const change = usePortfolioStore((state) => state.change);
 
-    useEffect(() => {
-        axios
-            .get(
-                `${process.env.REACT_APP_API_URL}/v1/news/user`,
+  useEffect(() => {
+    axios
+      .get(
+        `${process.env.REACT_APP_API_URL}/v1/news/user`,
 
-                {
-                    withCredentials: true,
-                    headers: {
-                        "Content-Type": "application/json",
-                    },
-                }
-            )
-            .then((res) => {
-                if (res.status === 200) {
-                    setNews(res.data);
-                } else if (res.status === 204) {
-                    setNews([]);
-                } else if (res.status === 401) {
-                    navigate("/noLogin");
-                }
-            })
-            .catch((e) => {});
-    }, [location, navigate]);
+        {
+          withCredentials: true,
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      )
+      .then((res) => {
+        if (res.status === 200) {
+          setNews(res.data);
+        } else if (res.status === 204) {
+          setNews([]);
+        } else if (res.status === 401) {
+          navigate("/noLogin");
+        }
+      })
+      .catch((e) => {});
+  }, [location, navigate]);
 
-    return (
-        <div>
-            <ListWrapper>
-                {news.length > 0 ? (
-                    news.map((news: NewsProps) => (
-                        <NewsItem key={news.code} {...news} />
-                    ))
-                ) : (
-                    <NoNews />
-                )}
-            </ListWrapper>
-        </div>
-    );
+  return (
+    // <div>
+    <ListWrapper>
+      {news.length > 0 ? (
+        news.map((news: NewsProps) => <NewsItem key={news.code} {...news} />)
+      ) : (
+        <NoNews />
+      )}
+    </ListWrapper>
+    // </div>
+  );
 };
 
 export default NewsList;
diff --git a/src/Pages/home.tsx b/src/Pages/home.tsx
index 25c26eb..f184a77 100644
--- a/src/Pages/home.tsx
+++ b/src/Pages/home.tsx
@@ -1,84 +1,12 @@
 import React, { useEffect, useState } from "react";
 import NewsList from "../Component/News/NewsList";
-import styled from "styled-components";
-import { MarketDataProps, ValueProps } from "../constants/interface";
+import { MarketDataProps } from "../constants/interface";
 import axios from "axios";
 import { useNavigate } from "react-router-dom";
-
+import * as S from "./homeStyle";
 import StockDataList from "../Component/List/Data/stockDataList";
 import { GoTriangleDown, GoTriangleUp } from "react-icons/go";
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 25px;
-`;
-
-const MarketContainer = styled.div`
-  width: 100%;
-  height: 80px;
-  box-shadow: 0px 4px 7px -2px #ada9bb;
-  border-radius: 10px;
-  border: none;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 12px;
-  margin: 20px 0px 25px;
-  @media (max-width: 768px) {
-    width: 100%;
-    font-size: 12px;
-  }
-`;
-
-const Kospi = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-`;
-
-const Kosdaq = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-`;
-
-export const Info = styled.div<ValueProps>`
-  color: ${(props) => (props.$isNegative ? "#615EFC" : "#FF5759")};
-
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: 50px;
-`;
-
-const ListContainer = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  /* margin-right: auto; */
-`;
-
-const Title = styled.div`
-  font-size: 17px;
-  font-weight: bold;
-  margin-bottom: 10px;
-  margin-left: 10px;
-`;
-
-const StockWrapper = styled.div`
-  width: 100%;
-  height: 325px;
-  overflow: scroll;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  margin-bottom: 23px;
-`;
-
-const NewsContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
+import { Colors } from "../Styles/Colors";
 
 const Home: React.FC = () => {
   const nav = useNavigate();
@@ -130,12 +58,13 @@ const Home: React.FC = () => {
   }, []);
 
   return (
-    <Container>
-      <MarketContainer>
-        <Kospi>
+    <S.Container>
+      <S.Title>오늘의 증시</S.Title>
+      <S.MarketContainer>
+        <S.Kospi>
           <span>KOSPI</span>
           {market ? (
-            <Info $isNegative={market.kospi.changeRate < 0}>
+            <S.Info $isNegative={market.kospi.changeRate < 0}>
               <span>{market.kospi.price}</span>
               <span>
                 {market.kospi.change < 0 ? (
@@ -146,15 +75,15 @@ const Home: React.FC = () => {
                 {Math.abs(market.kospi.change)}
               </span>
               <span>{market.kospi.changeRate}%</span>
-            </Info>
+            </S.Info>
           ) : (
             <div>로딩중</div>
           )}
-        </Kospi>
-        <Kosdaq>
+        </S.Kospi>
+        <S.Kosdaq>
           <span>KOSDAQ</span>
           {market ? (
-            <Info $isNegative={market.kosdaq.changeRate < 0}>
+            <S.Info $isNegative={market.kosdaq.changeRate < 0}>
               <span>{market.kosdaq.price}</span>
               <span>
                 {market.kosdaq.change < 0 ? (
@@ -165,23 +94,29 @@ const Home: React.FC = () => {
                 {Math.abs(market.kosdaq.change)}
               </span>
               <span>{market.kosdaq.changeRate}%</span>
-            </Info>
+            </S.Info>
           ) : (
             <div>로딩중</div>
           )}
-        </Kosdaq>
-      </MarketContainer>
-      <Title>오늘의 인기 종목</Title>
-      <ListContainer>
-        <StockWrapper>
+        </S.Kosdaq>
+      </S.MarketContainer>
+      <hr style={{ marginBottom: "1.5rem" }} />
+      <S.Title>오늘의 인기 종목</S.Title>
+      <S.SubTitle>🏆 오늘 가장 거래가 많은 종목을 확인해보세요 !</S.SubTitle>
+      <S.ListContainer>
+        <S.StockWrapper>
           {list ? <StockDataList data={list} /> : <div>로딩중</div>}
-        </StockWrapper>
-      </ListContainer>
-      <NewsContainer>
-        <Title>나만의 뉴스</Title>
+        </S.StockWrapper>
+      </S.ListContainer>
+      <hr style={{ marginBottom: "1.5rem" }} />
+      <S.NewsContainer>
+        <S.Title>나만의 뉴스</S.Title>
+        <S.SubTitle>
+          👀 내 포트폴리오에 등록된 종목들의 뉴스만 모아서 확인할 수 있어요 !
+        </S.SubTitle>
         <NewsList />
-      </NewsContainer>
-    </Container>
+      </S.NewsContainer>
+    </S.Container>
   );
 };
 
diff --git a/src/Pages/homeStyle.ts b/src/Pages/homeStyle.ts
new file mode 100644
index 0000000..d20fa16
--- /dev/null
+++ b/src/Pages/homeStyle.ts
@@ -0,0 +1,80 @@
+import styled from "styled-components";
+import { ValueProps } from "../constants/interface";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const MarketContainer = styled.div`
+  width: 100%;
+  height: 80px;
+  box-shadow: 0px 4px 7px -2px #ada9bb;
+  border-radius: 10px;
+  border: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 12px;
+  margin: 5px 0px 25px;
+  @media (max-width: 768px) {
+    width: 100%;
+    font-size: 12px;
+  }
+`;
+
+export const Kospi = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+`;
+
+export const Kosdaq = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+`;
+
+export const Info = styled.div<ValueProps>`
+  color: ${(props) => (props.$isNegative ? "#615EFC" : "#FF5759")};
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 50px;
+`;
+
+export const ListContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  /* margin-right: auto; */
+`;
+
+export const Title = styled.div`
+  font-size: 17px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  margin-left: 10px;
+`;
+
+export const StockWrapper = styled.div`
+  width: 100%;
+  height: 325px;
+  overflow: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  margin-bottom: 1rem;
+`;
+
+export const NewsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const SubTitle = styled.p`
+  font-size: 12px;
+  font-family: "SCDream3";
+  margin-left: 0.7rem;
+  margin-bottom: 0.5rem;
+`;

From 3fbc0a2ad5a9958c0c3bbbb8267195c41dfc18b1 Mon Sep 17 00:00:00 2001
From: lucy726j <lucy726jeon@gmail.com>
Date: Sat, 28 Sep 2024 17:11:26 +0900
Subject: [PATCH 09/18] =?UTF-8?q?Style=20:=20=EB=89=B4=EC=8A=A4=20?=
 =?UTF-8?q?=EC=99=B8=EB=B6=80=20=EC=9D=B4=EB=8F=99=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=EC=BD=98=20=EC=B6=94=EA=B0=80=20#219?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Component/Game/GameNews/gameNewsItem.tsx | 5 -----
 src/Component/Game/GameNews/gmaeNewsList.tsx | 5 -----
 src/Component/News/NewsItem.tsx              | 2 ++
 src/Component/News/NewsList.tsx              | 2 --
 4 files changed, 2 insertions(+), 12 deletions(-)
 delete mode 100644 src/Component/Game/GameNews/gameNewsItem.tsx
 delete mode 100644 src/Component/Game/GameNews/gmaeNewsList.tsx

diff --git a/src/Component/Game/GameNews/gameNewsItem.tsx b/src/Component/Game/GameNews/gameNewsItem.tsx
deleted file mode 100644
index 169681f..0000000
--- a/src/Component/Game/GameNews/gameNewsItem.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const GameNewsItem = () => {
-  return <div>게임용 뉴스 아이템</div>;
-};
-
-export default GameNewsItem;
diff --git a/src/Component/Game/GameNews/gmaeNewsList.tsx b/src/Component/Game/GameNews/gmaeNewsList.tsx
deleted file mode 100644
index 8455d30..0000000
--- a/src/Component/Game/GameNews/gmaeNewsList.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const GameNewsList = () => {
-  return <div>게임용 뉴스 리스으</div>;
-};
-
-export default GameNewsList;
diff --git a/src/Component/News/NewsItem.tsx b/src/Component/News/NewsItem.tsx
index 59b8a1e..c3643b2 100644
--- a/src/Component/News/NewsItem.tsx
+++ b/src/Component/News/NewsItem.tsx
@@ -1,4 +1,5 @@
 import { NewsProps } from "../../constants/interface";
+import { HiOutlineExternalLink } from "react-icons/hi";
 
 const NewsItem: React.FC<NewsProps> = ({
   code,
@@ -30,6 +31,7 @@ const NewsItem: React.FC<NewsProps> = ({
           <p>{date}</p>
         </div>
       </div>
+      <HiOutlineExternalLink />
     </a>
   );
 };
diff --git a/src/Component/News/NewsList.tsx b/src/Component/News/NewsList.tsx
index a139509..174bfab 100644
--- a/src/Component/News/NewsList.tsx
+++ b/src/Component/News/NewsList.tsx
@@ -51,7 +51,6 @@ const NewsList: React.FC = () => {
   }, [location, navigate]);
 
   return (
-    // <div>
     <ListWrapper>
       {news.length > 0 ? (
         news.map((news: NewsProps) => <NewsItem key={news.code} {...news} />)
@@ -59,7 +58,6 @@ const NewsList: React.FC = () => {
         <NoNews />
       )}
     </ListWrapper>
-    // </div>
   );
 };
 

From 23e92af3fbce8b26d1c90920bcd6132bb0cb45d9 Mon Sep 17 00:00:00 2001
From: lucy726j <lucy726jeon@gmail.com>
Date: Sat, 28 Sep 2024 18:09:20 +0900
Subject: [PATCH 10/18] pull

---
 src/Component/Dropdown/Dropdown.tsx | 116 ++++++++++++++--------------
 1 file changed, 58 insertions(+), 58 deletions(-)

diff --git a/src/Component/Dropdown/Dropdown.tsx b/src/Component/Dropdown/Dropdown.tsx
index bbb4544..96839fa 100644
--- a/src/Component/Dropdown/Dropdown.tsx
+++ b/src/Component/Dropdown/Dropdown.tsx
@@ -4,78 +4,78 @@ import { useState } from "react";
 import { DropdownProps } from "../../constants/interface";
 
 const DropdownContainer = styled.div`
-    display: flex;
-    flex-direction: row;
-    gap: 5px;
+  display: flex;
+  flex-direction: row;
 `;
 
 const DropdownBox = styled.option`
-    width: 75px;
-    font-size: 10px;
-    color: black;
-    text-align: start;
-    padding: 8px;
+  width: 75px;
+  font-size: 10px;
+  color: black;
+  text-align: start;
+  padding: 8px;
 
-    &:hover {
-        color: ${Colors.main};
-        background-color: #f5f4fb;
-    }
+  &:hover {
+    color: ${Colors.main};
+    background-color: #f5f4fb;
+  }
 `;
 
 const DropdownListBox = styled.select`
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    border: 1px solid ${Colors.main};
-    border-radius: 5px;
-    background-color: white;
-    top: 35px;
-    z-index: 1;
-    padding: 10px 5px;
-    height: 35px;
-    width: 85px;
-    text-align: center;
-    text-justify: center;
-    margin-bottom: 1rem;
-    font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border: 1px solid ${Colors.main};
+  border-radius: 5px;
+  background-color: white;
+  top: 35px;
+  z-index: 1;
+  padding: 10px 5px;
+  height: 35px;
+  width: 85px;
+  text-align: center;
+  text-justify: center;
+  margin-bottom: 1rem;
+  font-size: 12px;
+  cursor: pointer;
 
-    &::-webkit-scrollbar {
-        display: none;
-    }
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 const Dropdown: React.FC<DropdownProps> = ({ dropList, onSelect }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [value, setValue] = useState(dropList[0]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [value, setValue] = useState(dropList[0]);
 
-    // const handleToggle = () => {
-    //     setIsOpen((prev) => !prev);
-    // };
+  // const handleToggle = () => {
+  //     setIsOpen((prev) => !prev);
+  // };
 
-    const handleSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {
-        const selectedValue = event.target.value;
-        setValue(selectedValue);
-        setIsOpen(false);
-        onSelect(selectedValue);
-    };
+  const handleSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedValue = event.target.value;
+    setValue(selectedValue);
+    setIsOpen(false);
+    onSelect(selectedValue);
+  };
 
-    return (
-        <DropdownContainer>
-            <DropdownListBox onChange={handleSelect}>
-                {dropList.map((el) => (
-                    <DropdownBox key={el} value={el}>
-                        {el === "capital"
-                            ? "시가총액순"
-                            : el === "trade"
-                            ? "거래량순"
-                            : el === "change"
-                            ? "등락율순"
-                            : el}
-                    </DropdownBox>
-                ))}
-            </DropdownListBox>
-        </DropdownContainer>
-    );
+  return (
+    <DropdownContainer>
+      <DropdownListBox onChange={handleSelect}>
+        {dropList.map((el) => (
+          <DropdownBox key={el} value={el}>
+            {el === "capital"
+              ? "시가총액순"
+              : el === "trade"
+              ? "거래량순"
+              : el === "change"
+              ? "등락율순"
+              : el}
+          </DropdownBox>
+        ))}
+      </DropdownListBox>
+    </DropdownContainer>
+  );
 };
 
 export default Dropdown;

From 7f3a9cf196a09a493fa8ca1fbf9d142b69a7caa8 Mon Sep 17 00:00:00 2001
From: lucy726j <lucy726jeon@gmail.com>
Date: Thu, 26 Sep 2024 15:52:07 +0900
Subject: [PATCH 11/18] pull

---
 src/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/index.tsx b/src/index.tsx
index d97ca1d..c7cbae3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";

From 46a9fce8bd651f0699f0e9606cf6799b427360ae Mon Sep 17 00:00:00 2001
From: lucy726j <lucy726jeon@gmail.com>
Date: Sat, 28 Sep 2024 19:11:12 +0900
Subject: [PATCH 12/18] =?UTF-8?q?Fix=20:=20=ED=97=A4=EB=8D=94,=20=EB=84=A4?=
 =?UTF-8?q?=EB=B9=84=EB=B0=94,=20=EB=B2=84=ED=8A=BC=20=EB=93=B1=20cursor?=
 =?UTF-8?q?=20:=20pointer=20=EC=84=A4=EC=A0=95=20#188?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Component/Button/button.tsx         | 21 +++++++++++----------
 src/Component/GoogleLogin/loginStyle.ts |  1 +
 src/Component/Layout/Header/Header.tsx  |  1 +
 src/Component/Layout/Header/Profile.tsx |  3 +++
 src/Component/Layout/NavBar/NavBar.tsx  |  1 +
 5 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/Component/Button/button.tsx b/src/Component/Button/button.tsx
index 4420703..32b9254 100644
--- a/src/Component/Button/button.tsx
+++ b/src/Component/Button/button.tsx
@@ -4,20 +4,21 @@ import { buttonSize, buttonType } from "../../Styles/button";
 import { ButtonStyleProps, ButtonProps } from "../../constants/interface";
 
 const ButtonStyle = styled.button<ButtonStyleProps>`
-    border-radius: 10px;
+  border-radius: 10px;
+  cursor: pointer;
 
-    ${(props) => buttonSize[props.$size]}
-    ${(props) => buttonType[props.$colorType]?.[props.$state]}
+  ${(props) => buttonSize[props.$size]}
+  ${(props) => buttonType[props.$colorType]?.[props.$state]}
 `;
 
 const Button = ({ onClick, children, ...styleprops }: ButtonProps) => {
-    return (
-        <>
-            <ButtonStyle {...styleprops} onClick={onClick}>
-                {children}
-            </ButtonStyle>
-        </>
-    );
+  return (
+    <>
+      <ButtonStyle {...styleprops} onClick={onClick}>
+        {children}
+      </ButtonStyle>
+    </>
+  );
 };
 
 export default Button;
diff --git a/src/Component/GoogleLogin/loginStyle.ts b/src/Component/GoogleLogin/loginStyle.ts
index ccd0cde..625b733 100644
--- a/src/Component/GoogleLogin/loginStyle.ts
+++ b/src/Component/GoogleLogin/loginStyle.ts
@@ -35,4 +35,5 @@ export const Description = styled.p`
 export const Button = styled.button`
   border: none;
   background: none;
+  cursor: pointer;
 `;
diff --git a/src/Component/Layout/Header/Header.tsx b/src/Component/Layout/Header/Header.tsx
index a22ddbd..c6640c4 100644
--- a/src/Component/Layout/Header/Header.tsx
+++ b/src/Component/Layout/Header/Header.tsx
@@ -11,6 +11,7 @@ const HeaderStyle = styled.header`
   align-items: center;
   margin: 10px 0px;
   padding: 0px 20px;
+  cursor: pointer;
   @media (max-width: 768px) {
     width: 100%;
     height: 100%;
diff --git a/src/Component/Layout/Header/Profile.tsx b/src/Component/Layout/Header/Profile.tsx
index cf5d556..f2117a1 100644
--- a/src/Component/Layout/Header/Profile.tsx
+++ b/src/Component/Layout/Header/Profile.tsx
@@ -10,6 +10,7 @@ const ProfileContainer = styled.div`
   display: flex;
   align-items: center;
   gap: 1rem;
+  cursor: pointer;
 `;
 
 const ImgStyle = styled.img`
@@ -17,6 +18,7 @@ const ImgStyle = styled.img`
   height: 35px;
   border: #615efc 1px solid;
   border-radius: 50%;
+  cursor: pointer;
 `;
 
 const LogoutBox = styled.div`
@@ -31,6 +33,7 @@ const LogoutBox = styled.div`
   position: absolute;
   top: 40px;
   right: 40px;
+  cursor: pointer;
 `;
 
 const Profile = () => {
diff --git a/src/Component/Layout/NavBar/NavBar.tsx b/src/Component/Layout/NavBar/NavBar.tsx
index a867d84..c617edd 100644
--- a/src/Component/Layout/NavBar/NavBar.tsx
+++ b/src/Component/Layout/NavBar/NavBar.tsx
@@ -49,6 +49,7 @@ const NavBoxStyle = styled.div<{ $isActive?: boolean }>`
   justify-content: center;
   align-items: center;
   gap: 10px;
+  cursor: pointer;
 
   &:hover ${ImgStyle}, &:hover ${TextStyle} {
     color: ${Colors.main}; /* Change both icon and text color on hover */

From 14ed16189a35af981dc4454194e6358f5d2ddbe2 Mon Sep 17 00:00:00 2001
From: lucy726j <lucy726jeon@gmail.com>
Date: Sat, 28 Sep 2024 19:33:32 +0900
Subject: [PATCH 13/18] =?UTF-8?q?Fix=20:=20=EC=A3=BC=EC=8B=9D=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EC=A0=95=EB=B3=B4=20=EC=A1=B0=ED=9A=8C=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=A3=BC=EC=8B=9D=20=EC=A0=95=EB=B3=B4=20?=
 =?UTF-8?q?@media=20=EC=A0=81=EC=9A=A9=20#192?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Pages/stockDetail/stockDetailStyle.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/Pages/stockDetail/stockDetailStyle.ts b/src/Pages/stockDetail/stockDetailStyle.ts
index edaa70a..a5c6534 100644
--- a/src/Pages/stockDetail/stockDetailStyle.ts
+++ b/src/Pages/stockDetail/stockDetailStyle.ts
@@ -18,6 +18,10 @@ export const InfoContainer = styled.div`
 export const StockName = styled.div`
   font-size: 35px;
   font-weight: 900;
+
+  @media (max-width: 768px) {
+    font-size: 20px;
+  }
 `;
 
 export const CodeContainer = styled.div`
@@ -45,6 +49,9 @@ export const StockPrice = styled.div`
   white-space: nowrap;
   display: flex;
   flex-direction: row;
+  @media (max-width: 768px) {
+    font-size: 15px;
+  }
 `;
 
 export const ChangeContainer = styled.div`
@@ -56,6 +63,9 @@ export const ChangeContainer = styled.div`
 export const StockChange = styled.span`
   font-size: 20px;
   color: ${Colors.main};
+  @media (max-width: 768px) {
+    font-size: 15px;
+  }
 `;
 
 export const ViewSelectContainer = styled.div`

From 21a3ea7692cbd1c665ac4c814647b3ca35c469c5 Mon Sep 17 00:00:00 2001
From: lucy726j <lucy726jeon@gmail.com>
Date: Sat, 28 Sep 2024 21:00:08 +0900
Subject: [PATCH 14/18] =?UTF-8?q?Style=20:=20=EC=A7=84=EC=B2=99=EC=9C=A8,?=
 =?UTF-8?q?=20=EB=A3=B0=EC=84=A4=EB=AA=85=20css=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Component/Chart/chart.tsx    |   5 +-
 src/Game/Loading/progressBar.tsx |   7 +-
 src/Game/Tutorial/rule.tsx       |  16 +-
 src/Pages/game/playPage.tsx      | 288 +++++++++++++++----------------
 4 files changed, 163 insertions(+), 153 deletions(-)

diff --git a/src/Component/Chart/chart.tsx b/src/Component/Chart/chart.tsx
index 038962a..af189ec 100644
--- a/src/Component/Chart/chart.tsx
+++ b/src/Component/Chart/chart.tsx
@@ -3,6 +3,7 @@ import ApexCharts from "apexcharts";
 import { ChartStyle } from "./chartStyle"; // Assuming you have the styles defined in this file
 import { formatPrice } from "../../util/util";
 import ModalOpen from "../Modal/modal";
+import { HiOutlineExternalLink } from "react-icons/hi";
 
 // import { HiOutlineArrowTopRightOnSquare } from "react-icons/hi2";
 
@@ -178,9 +179,7 @@ const Chart = ({ data }: CandleData) => {
                 fontSize: "15px",
               }}
             >
-              <div dangerouslySetInnerHTML={{ __html: newsHtml }}>
-                {/* <HiOutlineArrowTopRightOnSquare /> */}
-              </div>
+              <div dangerouslySetInnerHTML={{ __html: newsHtml }}></div>
             </span>
           </p>
         </ModalOpen>
diff --git a/src/Game/Loading/progressBar.tsx b/src/Game/Loading/progressBar.tsx
index a3e0e89..940ab2c 100644
--- a/src/Game/Loading/progressBar.tsx
+++ b/src/Game/Loading/progressBar.tsx
@@ -1,9 +1,11 @@
 import styled from "styled-components";
 
 const Container = styled.div`
-  width: 100%;
+  width: 70%;
   max-width: 400px;
-  margin: 15px auto;
+  /* margin: 15px auto; */
+  margin: 0.1rem 1rem 1rem 0.5rem;
+
   background-color: rgba(255, 255, 255, 0.1);
   border-radius: 50px;
   padding: 5px;
@@ -28,6 +30,7 @@ const Text = styled.span`
   font-weight: bold;
   z-index: 1;
   font-size: 12px;
+  margin-left: 0%.8;
 `;
 
 interface ProgressBarProps {
diff --git a/src/Game/Tutorial/rule.tsx b/src/Game/Tutorial/rule.tsx
index 64df4e5..5a308cb 100644
--- a/src/Game/Tutorial/rule.tsx
+++ b/src/Game/Tutorial/rule.tsx
@@ -10,7 +10,7 @@ const Overlay = styled.div`
   left: 0;
   width: 100vw;
   height: 100vh;
-  background-color: rgba(0, 0, 0, 0.8); /* 반투명한 검정색 배경 */
+  background-color: rgba(163, 152, 152, 0.8); /* 반투명한 검정색 배경 */
   z-index: 10; /* 모달 뒤에 위치, 모달보다 낮은 z-index */
 `;
 
@@ -67,10 +67,20 @@ const RuleModal = () => {
 
   return (
     <ModalContainer onClick={() => setOnModal(true)}>
-      <p style={{ color: "black", fontSize: "12px", marginRight: "0.6rem" }}>
+      <p
+        style={{
+          color: "black",
+          fontSize: "15px",
+          marginRight: "0.6rem",
+          marginTop: "1rem",
+        }}
+      >
         룰 설명
       </p>
-      <img src={Role} style={{ width: "50px", height: "50px" }} />
+      <img
+        src={Role}
+        style={{ width: "50px", height: "50px", cursor: "pointer" }}
+      />
       {onModal && (
         <Overlay onClick={handleClickOutside}>
           <Container>
diff --git a/src/Pages/game/playPage.tsx b/src/Pages/game/playPage.tsx
index ec36cca..9678c29 100644
--- a/src/Pages/game/playPage.tsx
+++ b/src/Pages/game/playPage.tsx
@@ -16,156 +16,154 @@ import { usePortfolioStore } from "../../store/usePortfolioStore";
 import ProgressBar from "../../Game/Loading/progressBar";
 
 const Container = styled.div`
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
 `;
 
 const PlayPage = () => {
-    const { year } = useParams<{ year: string }>();
-    const { stockData, setStockData } = useStock();
-    const nav = useNavigate();
-    const yearValue = year || "2014";
-    const [isTradeModalVisible, setIsTradeModalVisible] = useState(false);
-    const [isPassModalVisible, setIsPassModalVisible] = useState(false);
-    const [isHappyNewYearModal, setIsHappyNewYearModal] = useState(false);
-    const [budget, setBudget] = useState(0);
-    const [loading, setLoading] = useState(false);
-
-    const check = usePortfolioStore((state) => state.check);
-    const setCheck = usePortfolioStore((state) => state.setCheck);
-
-    const startYear = 2014;
-    const lastYear = 2023;
-
-    // 년도 진행률 표시
-    const calculateProgress = () => {
-        return (
-            ((parseInt(yearValue, 10) - startYear) / (lastYear - startYear)) *
-            100
-        );
-    };
-
-    const [progress, setProgress] = useState<number>(calculateProgress);
-
-    // 거래하기 모달 핸들러
-    const openTradeModal = () => {
-        setIsTradeModalVisible(true);
-    };
-
-    const closeTradeModal = () => {
-        setIsTradeModalVisible(false);
-    };
-
-    // 넘어가기 모달 핸들러
-    const openPassModal = () => {
-        setIsPassModalVisible(true);
-    };
-
-    const closePassModal = () => {
-        setIsPassModalVisible(false);
-    };
-
-    // 넘어가기 버튼 누르면 중간결과 호출
-    const handleConfirmPass = async () => {
-        try {
-            setLoading(true);
-            setIsHappyNewYearModal(true);
-            setIsPassModalVisible(false);
-
-            if (year === "2023") {
-                console.log("게임 끝");
-                nav("/game/result/total");
-            } else {
-                const response = await axios.get(
-                    `${process.env.REACT_APP_API_URL}/v1/game/interim`,
-                    {
-                        withCredentials: true,
-                        headers: {
-                            "Content-Type": "application/json",
-                        },
-                    }
-                );
-                if (response.status === 200) {
-                    if (
-                        (parseInt(yearValue, 10) + 1).toString() ===
-                        response.data.year.toString()
-                    ) {
-                        const updatedStockList = response.data.stockList;
-                        setStockData(updatedStockList);
-                    }
-
-                    // API 완료 후 모달 닫고 페이지 이동
-                    setIsHappyNewYearModal(false);
-                    const nextYear = (parseInt(yearValue, 10) + 1).toString();
-                    nav(`/game/play/${nextYear}`);
-                    setCheck(!check);
-                    setProgress(
-                        ((parseInt(nextYear, 10) - startYear) /
-                            (lastYear - startYear)) *
-                            100
-                    );
-                }
-            }
-        } catch (error) {
-            console.error(error);
-        } finally {
-            setLoading(false);
-            closePassModal();
-        }
-    };
-
+  const { year } = useParams<{ year: string }>();
+  const { stockData, setStockData } = useStock();
+  const nav = useNavigate();
+  const yearValue = year || "2014";
+  const [isTradeModalVisible, setIsTradeModalVisible] = useState(false);
+  const [isPassModalVisible, setIsPassModalVisible] = useState(false);
+  const [isHappyNewYearModal, setIsHappyNewYearModal] = useState(false);
+  const [budget, setBudget] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  const check = usePortfolioStore((state) => state.check);
+  const setCheck = usePortfolioStore((state) => state.setCheck);
+
+  const startYear = 2014;
+  const lastYear = 2023;
+
+  // 년도 진행률 표시
+  const calculateProgress = () => {
     return (
-        <Container>
-            <GameHeader text={year || "Default"} />
-
-            <div
-                style={{
-                    width: "100%",
-                    marginTop: "1rem",
-                    textAlign: "left",
-                    display: "flex",
-                    flexDirection: "column",
-                }}
-            >
-                <div>
-                    <p
-                        style={{
-                            paddingLeft: "3.5rem",
-                            fontSize: "12px",
-                            marginBottom: "0.5rem",
-                        }}
-                    >
-                        게임 진행도
-                    </p>
-                </div>
-                <ProgressBar progress={progress} />
-            </div>
-            <GameMoney setBudget={setBudget} budget={budget} />
-            <StocksTable stocks={stockData || []} year={yearValue} />
-            <GameButtons
-                openTradeModal={openTradeModal}
-                openPassModal={openPassModal}
-                setBudget={setBudget}
-                budget={budget}
-            />
-            <GameTradeSwipe
-                isVisible={isTradeModalVisible}
-                onClose={closeTradeModal}
-                year={yearValue.toString()}
-                budget={budget}
-            />
-            <PassConfirmModal
-                isOpen={isPassModalVisible}
-                onRequestClose={closePassModal}
-                onConfirm={handleConfirmPass}
-                year={yearValue}
-            />
-            <HappyNewYearModal isVisible={isHappyNewYearModal} />
-        </Container>
+      ((parseInt(yearValue, 10) - startYear) / (lastYear - startYear)) * 100
     );
+  };
+
+  const [progress, setProgress] = useState<number>(calculateProgress);
+
+  // 거래하기 모달 핸들러
+  const openTradeModal = () => {
+    setIsTradeModalVisible(true);
+  };
+
+  const closeTradeModal = () => {
+    setIsTradeModalVisible(false);
+  };
+
+  // 넘어가기 모달 핸들러
+  const openPassModal = () => {
+    setIsPassModalVisible(true);
+  };
+
+  const closePassModal = () => {
+    setIsPassModalVisible(false);
+  };
+
+  // 넘어가기 버튼 누르면 중간결과 호출
+  const handleConfirmPass = async () => {
+    try {
+      setLoading(true);
+      setIsHappyNewYearModal(true);
+      setIsPassModalVisible(false);
+
+      if (year === "2023") {
+        console.log("게임 끝");
+        nav("/game/result/total");
+      } else {
+        const response = await axios.get(
+          `${process.env.REACT_APP_API_URL}/v1/game/interim`,
+          {
+            withCredentials: true,
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        if (response.status === 200) {
+          if (
+            (parseInt(yearValue, 10) + 1).toString() ===
+            response.data.year.toString()
+          ) {
+            const updatedStockList = response.data.stockList;
+            setStockData(updatedStockList);
+          }
+
+          // API 완료 후 모달 닫고 페이지 이동
+          setIsHappyNewYearModal(false);
+          const nextYear = (parseInt(yearValue, 10) + 1).toString();
+          nav(`/game/play/${nextYear}`);
+          setCheck(!check);
+          setProgress(
+            ((parseInt(nextYear, 10) - startYear) / (lastYear - startYear)) *
+              100
+          );
+        }
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+      closePassModal();
+    }
+  };
+
+  return (
+    <Container>
+      <GameHeader text={year || "Default"} />
+
+      <div
+        style={{
+          width: "100%",
+          marginTop: "1rem",
+          textAlign: "left",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        {/* <div> */}
+        {/* <p
+          style={{
+            paddingLeft: "3.5rem",
+            fontSize: "15px",
+            marginBottom: "0.5rem",
+          }}
+        >
+          게임 진행도
+        </p> */}
+        {/* </div> */}
+        <ProgressBar progress={progress} />
+      </div>
+      <GameMoney setBudget={setBudget} budget={budget} />
+      <StocksTable stocks={stockData || []} year={yearValue} />
+      <GameButtons
+        openTradeModal={openTradeModal}
+        openPassModal={openPassModal}
+        setBudget={setBudget}
+        budget={budget}
+      />
+      <GameTradeSwipe
+        isVisible={isTradeModalVisible}
+        onClose={closeTradeModal}
+        year={yearValue.toString()}
+        budget={budget}
+      />
+      <PassConfirmModal
+        isOpen={isPassModalVisible}
+        onRequestClose={closePassModal}
+        onConfirm={handleConfirmPass}
+        year={yearValue}
+      />
+      <HappyNewYearModal isVisible={isHappyNewYearModal} />
+    </Container>
+  );
 };
 
 export default PlayPage;

From 57c3872ff35357fae88f754917bed44ace5861da Mon Sep 17 00:00:00 2001
From: lucy726j <lucy726jeon@gmail.com>
Date: Sat, 28 Sep 2024 21:05:41 +0900
Subject: [PATCH 15/18] =?UTF-8?q?Fix=20:=20=EC=A0=95=EB=B3=B4=EA=B1=B0?=
 =?UTF-8?q?=EB=9E=98=EC=86=8C=EC=97=90=EC=84=9C=20=EB=A3=B0=EC=84=A4?=
 =?UTF-8?q?=EB=AA=85=20=EC=95=88=EB=B3=B4=EC=9D=B4=EA=B2=8C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Component/Game/GameHeader.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/Component/Game/GameHeader.tsx b/src/Component/Game/GameHeader.tsx
index 26f5c21..be93bc4 100644
--- a/src/Component/Game/GameHeader.tsx
+++ b/src/Component/Game/GameHeader.tsx
@@ -25,7 +25,10 @@ const GameHeader: React.FC<GameHeaderProp> = ({ text }) => {
   return (
     <Container>
       <>{text}</>
-      {rule === "gameStocks" || rule === "total" || rule === "rank" ? (
+      {rule === "gameStocks" ||
+      rule === "total" ||
+      rule === "rank" ||
+      rule === "info" ? (
         <></>
       ) : (
         <RuleModal />

From 674751b4d317b8d158431dcefdf25e8216e8d8ad Mon Sep 17 00:00:00 2001
From: lucy726j <lucy726jeon@gmail.com>
Date: Sat, 28 Sep 2024 21:48:53 +0900
Subject: [PATCH 16/18] =?UTF-8?q?Style=20:=20=EC=A0=95=EB=B3=B4=20?=
 =?UTF-8?q?=EA=B1=B0=EB=9E=98=EC=86=8C=20=EB=89=B4=EC=8A=A4=20=EB=82=B4?=
 =?UTF-8?q?=EC=9A=A9=20=EA=B8=B8=EB=A9=B4=20css=20=EA=B9=A8=EC=A7=80?=
 =?UTF-8?q?=EB=8A=94=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Game/Shop/shop.tsx | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/Game/Shop/shop.tsx b/src/Game/Shop/shop.tsx
index 5dc6b2b..b4d90b4 100644
--- a/src/Game/Shop/shop.tsx
+++ b/src/Game/Shop/shop.tsx
@@ -174,39 +174,54 @@ const Shop: React.FC<ShopProps> = ({ selectedStock, budget, setBudget }) => {
                       </div>
                     </div>
                   ) : (
-                    <div>
+                    <div
+                      style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "center",
+                        width: "100%",
+                        padding: "0px",
+                        gap: "3rem",
+                      }}
+                    >
                       <div
                         style={{
                           display: "flex",
                           flexDirection: "column",
                           justifyContent: "center",
                           alignItems: "center",
+                          width: "100%",
                         }}
                       >
                         <h2 style={{ fontSize: "34px" }}>Skrr News</h2>
                         <hr
                           style={{
-                            width: "100%",
+                            width: "90%",
                             borderTop: "2px solid #000000",
                           }}
                         />
                         <hr
                           style={{
-                            width: "100%",
+                            width: "90%",
                             borderTop: "1px solid #000000",
                             marginBottom: "1rem",
                           }}
                         />
                         <div
                           style={{
-                            width: "100%",
+                            width: "90%",
                             display: "flex",
                             justifyContent: "space-between",
                             fontSize: "15px",
                             marginBottom: "2rem",
                           }}
                         >
-                          <p style={{ color: "red", fontWeight: "600" }}>
+                          <p
+                            style={{
+                              color: "red",
+                              fontWeight: "600",
+                            }}
+                          >
                             {selectedStockData ? selectedStockData.name : ""}{" "}
                             {""}
                             {selectedTab.level}
@@ -216,7 +231,7 @@ const Shop: React.FC<ShopProps> = ({ selectedStock, budget, setBudget }) => {
                           </p>
                         </div>
                         <div
-                          style={{ width: "100%", border: "2px solid #000000" }}
+                          style={{ width: "90%", border: "2px solid #000000" }}
                         >
                           <p
                             style={{

From 61e9d91d62e7fc5e5d2649fc4d1c0e37c71c4882 Mon Sep 17 00:00:00 2001
From: lucy726j <lucy726jeon@gmail.com>
Date: Sat, 28 Sep 2024 21:58:19 +0900
Subject: [PATCH 17/18] =?UTF-8?q?Docs:=20=EC=9E=90=EC=9E=98=ED=95=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Component/Game/GameHeader.tsx   |  2 +-
 src/Component/Game/Rank/rankBox.tsx |  4 +++-
 src/Pages/game/rank.tsx             |  2 +-
 src/util/gameUtil.ts                | 19 ++++++++-----------
 4 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/Component/Game/GameHeader.tsx b/src/Component/Game/GameHeader.tsx
index be93bc4..b96e231 100644
--- a/src/Component/Game/GameHeader.tsx
+++ b/src/Component/Game/GameHeader.tsx
@@ -26,7 +26,7 @@ const GameHeader: React.FC<GameHeaderProp> = ({ text }) => {
     <Container>
       <>{text}</>
       {rule === "gameStocks" ||
-      rule === "total" ||
+      rule === "result" ||
       rule === "rank" ||
       rule === "info" ? (
         <></>
diff --git a/src/Component/Game/Rank/rankBox.tsx b/src/Component/Game/Rank/rankBox.tsx
index 65aec36..d3fdf31 100644
--- a/src/Component/Game/Rank/rankBox.tsx
+++ b/src/Component/Game/Rank/rankBox.tsx
@@ -24,7 +24,9 @@ const RankBox: React.FC<RankDataProps> = ({
       <S.UserContainer>
         <S.Nickname>{nickname}</S.Nickname>
         <S.Budget>{formatPrice(total)}</S.Budget>
-        <S.Rate style={formatRateColor(profitRate)}>{profitRate} %</S.Rate>
+        <S.Rate style={formatRateColor(profitRate)}>
+          {profitRate.toFixed(1)} %
+        </S.Rate>
       </S.UserContainer>
     </S.Container>
   );
diff --git a/src/Pages/game/rank.tsx b/src/Pages/game/rank.tsx
index e180aaf..1a17210 100644
--- a/src/Pages/game/rank.tsx
+++ b/src/Pages/game/rank.tsx
@@ -40,7 +40,7 @@ const Rank = () => {
       <TitleContainer>
         <p style={{ marginLeft: "1.7rem" }}>순위</p>
         <p style={{ marginLeft: "2rem" }}>닉네임</p>
-        <p style={{ marginLeft: "10rem" }}>수익금</p>
+        <p style={{ marginLeft: "9rem" }}>수익금</p>
         <p style={{ marginLeft: "5rem" }}>수익률</p>
       </TitleContainer>
       <RankList data={rankList} />
diff --git a/src/util/gameUtil.ts b/src/util/gameUtil.ts
index ba33680..1ff9aa8 100644
--- a/src/util/gameUtil.ts
+++ b/src/util/gameUtil.ts
@@ -1,23 +1,20 @@
-import React from "react";
-import { P } from "../Component/GoogleLogin/loginStyle";
-
 export const formatPrice = (num: number): string => {
   if (num === 0) {
-    return "-";
+    return "0";
   }
 
   return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 };
 
 export const formatPriceWithYear = (num: number, year: string): string => {
-    if (num === 0 && year !== "2014") {
-        return "상장폐지";
-    }
-    if (num === 0) {
-        return "-";
-    }
+  if (num === 0 && year !== "2014") {
+    return "상장폐지";
+  }
+  if (num === 0) {
+    return "-";
+  }
 
-    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 };
 
 export const formatChangeRate = (changeRate: number): string => {

From 3237e81d2f15b0d83f9f1e432d5d680cff9ab832 Mon Sep 17 00:00:00 2001
From: lucy726j <lucy726jeon@gmail.com>
Date: Sat, 28 Sep 2024 22:41:06 +0900
Subject: [PATCH 18/18] =?UTF-8?q?Feat=20:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=82=AC=20->=20url?=
 =?UTF-8?q?=EC=97=90=20=EB=85=84=EB=8F=84=20=EC=9E=85=EB=A0=A5=ED=95=B4?=
 =?UTF-8?q?=EC=84=9C=20=EC=A0=91=EC=86=8D=ED=95=98=EB=8A=94=20=EA=B2=BD?=
 =?UTF-8?q?=EC=9A=B0=20=EC=A0=95=EC=83=81=EC=A0=81=EC=9D=B8=20=EC=A0=91?=
 =?UTF-8?q?=EA=B7=BC=20=EA=B2=BD=EB=A1=9C=EA=B0=80=20=EC=95=84=EB=8B=99?=
 =?UTF-8?q?=EB=8B=88=EB=8B=A4=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B3=B4?=
 =?UTF-8?q?=EC=97=AC=EC=A3=BC=EB=8F=84=EB=A1=9D=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Component/Game/GameMoney.tsx | 269 ++++++++++++++++---------------
 src/Pages/404/noUser.tsx         |   2 -
 src/Pages/game/infoPage.tsx      |  50 +++++-
 src/Pages/game/playPage.tsx      | 122 +++++++++-----
 src/store/useGameStore.ts        |  15 ++
 5 files changed, 276 insertions(+), 182 deletions(-)
 create mode 100644 src/store/useGameStore.ts

diff --git a/src/Component/Game/GameMoney.tsx b/src/Component/Game/GameMoney.tsx
index f89a1bc..f9cef8f 100644
--- a/src/Component/Game/GameMoney.tsx
+++ b/src/Component/Game/GameMoney.tsx
@@ -4,162 +4,167 @@ import { holding } from "../../constants/interface";
 import { useState, useEffect } from "react";
 import axios from "axios";
 import { usePortfolioStore } from "../../store/usePortfolioStore";
+import { useGameStore } from "../../store/useGameStore";
 import { useNavigate } from "react-router-dom";
 import GameViewTab from "./gameViewTab";
 
 const GameMoney = ({
-    setBudget,
-    budget,
+  setBudget,
+  budget,
 }: {
-    setBudget: (budget: number) => void;
-    budget: number;
+  setBudget: (budget: number) => void;
+  budget: number;
 }) => {
-    const nav = useNavigate();
-
-    const [nickname, setNickname] = useState(""); // 닉네임
-    const [total, setTotal] = useState(0); // 총 평가금액
-    const [changeFromLast, setChangeFromLast] = useState(0); // 작년 대비 금액
-    const [changeFromStart, setChangeFromStart] = useState(0); // 전체 대비 금액
-    const [changeRateFromLast, setChangeRateFromLast] = useState(0); // 작년 대비 변동률
-    const [changeRateFromStart, setChangeRateFromStart] = useState(0); // 전체 대비 변동률
-    const [holdingList, setHoldingList] = useState<holding[]>([]); // 20xx년 주식가격
-    const [showTable, setShowTable] = useState(false);
-
-    const check = usePortfolioStore((state) => state.check);
-
-    useEffect(() => {
-        axios
-            .get(`${process.env.REACT_APP_API_URL}/v1/game/user`, {
-                withCredentials: true,
-                headers: {
-                    "Content-Type": "application/json",
-                },
-            })
-            .then((res) => {
-                if (res.status === 200) {
-                    setNickname(res.data.nickname);
-                    setBudget(res.data.budget);
-                    setTotal(res.data.total);
-                    setChangeFromLast(res.data.changeFromLast);
-                    setChangeFromStart(res.data.changeFromStart);
-                    setChangeRateFromLast(res.data.changeRateFromLast);
-                    setChangeRateFromStart(res.data.changeRateFromStart);
-                    setHoldingList(res.data.holdingList);
-                } else if (res.status === 401) {
-                    alert("401");
-                }
-            })
-            .catch((e) => {
-                nav("/error");
-            });
-    }, [check]);
-
-    const handleShowTable = () => {
-        setShowTable((prev) => !prev);
-    };
-
-    return (
-        <GameMoneyContainer>
-            <GameMoneyTitle>
-                <strong>{nickname}</strong> 님의 계좌잔고 💰
-            </GameMoneyTitle>
-            <GameMoneyBalance>
-                <BalanceTitle>거래가능금액</BalanceTitle>
-                <div className="BalanceValue">{formatPrice(budget)} 원</div>
-            </GameMoneyBalance>
-            <hr />
-            <GameMoneyBalance>
-                <BalanceTitle>총 평가금액</BalanceTitle>
-                <div className="BalanceValue">{formatPrice(total)} 원</div>
-            </GameMoneyBalance>
-            <GameMoneyBalance>
-                <BalanceTitle>작년 대비</BalanceTitle>
-                <div
-                    className="BalanceValue"
-                    style={{
-                        color:
-                            changeRateFromLast > 0
-                                ? "red"
-                                : changeRateFromLast < 0
-                                ? "blue"
-                                : "black",
-                    }}
-                >
-                    {formatPrice(changeFromLast)} 원 ({changeRateFromLast}%)
-                </div>
-            </GameMoneyBalance>
-            <GameMoneyBalance>
-                <BalanceTitle>전체 대비</BalanceTitle>
-                <div
-                    className="BalanceValue"
-                    style={{
-                        color:
-                            changeRateFromStart > 0
-                                ? "red"
-                                : changeRateFromStart < 0
-                                ? "blue"
-                                : "black",
-                    }}
-                >
-                    {formatPrice(changeFromStart)} 원 ({changeRateFromStart}%)
-                </div>
-            </GameMoneyBalance>
-            <BalanceDetailButton>
-                <Button onClick={handleShowTable}>
-                    {showTable ? "닫기" : "더보기"}
-                </Button>
-            </BalanceDetailButton>
-
-            {showTable && <GameViewTab holdingList={holdingList} />}
-        </GameMoneyContainer>
-    );
+  const nav = useNavigate();
+
+  const [nickname, setNickname] = useState(""); // 닉네임
+  const [total, setTotal] = useState(0); // 총 평가금액
+  const [changeFromLast, setChangeFromLast] = useState(0); // 작년 대비 금액
+  const [changeFromStart, setChangeFromStart] = useState(0); // 전체 대비 금액
+  const [changeRateFromLast, setChangeRateFromLast] = useState(0); // 작년 대비 변동률
+  const [changeRateFromStart, setChangeRateFromStart] = useState(0); // 전체 대비 변동률
+  const [holdingList, setHoldingList] = useState<holding[]>([]); // 20xx년 주식가격
+  const [showTable, setShowTable] = useState(false);
+
+  const check = usePortfolioStore((state) => state.check);
+
+  // 페이지 유효성 검사
+  const setCheckYear = useGameStore((state) => state.setCheckYear);
+
+  useEffect(() => {
+    axios
+      .get(`${process.env.REACT_APP_API_URL}/v1/game/user`, {
+        withCredentials: true,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      })
+      .then((res) => {
+        if (res.status === 200) {
+          setCheckYear(res.data.year);
+          setNickname(res.data.nickname);
+          setBudget(res.data.budget);
+          setTotal(res.data.total);
+          setChangeFromLast(res.data.changeFromLast);
+          setChangeFromStart(res.data.changeFromStart);
+          setChangeRateFromLast(res.data.changeRateFromLast);
+          setChangeRateFromStart(res.data.changeRateFromStart);
+          setHoldingList(res.data.holdingList);
+        } else if (res.status === 401) {
+          alert("401");
+        }
+      })
+      .catch((e) => {
+        nav("/error");
+      });
+  }, [check]);
+
+  const handleShowTable = () => {
+    setShowTable((prev) => !prev);
+  };
+
+  return (
+    <GameMoneyContainer>
+      <GameMoneyTitle>
+        <strong>{nickname}</strong> 님의 계좌잔고 💰
+      </GameMoneyTitle>
+      <GameMoneyBalance>
+        <BalanceTitle>거래가능금액</BalanceTitle>
+        <div className="BalanceValue">{formatPrice(budget)} 원</div>
+      </GameMoneyBalance>
+      <hr />
+      <GameMoneyBalance>
+        <BalanceTitle>총 평가금액</BalanceTitle>
+        <div className="BalanceValue">{formatPrice(total)} 원</div>
+      </GameMoneyBalance>
+      <GameMoneyBalance>
+        <BalanceTitle>작년 대비</BalanceTitle>
+        <div
+          className="BalanceValue"
+          style={{
+            color:
+              changeRateFromLast > 0
+                ? "red"
+                : changeRateFromLast < 0
+                ? "blue"
+                : "black",
+          }}
+        >
+          {formatPrice(changeFromLast)} 원 ({changeRateFromLast}%)
+        </div>
+      </GameMoneyBalance>
+      <GameMoneyBalance>
+        <BalanceTitle>전체 대비</BalanceTitle>
+        <div
+          className="BalanceValue"
+          style={{
+            color:
+              changeRateFromStart > 0
+                ? "red"
+                : changeRateFromStart < 0
+                ? "blue"
+                : "black",
+          }}
+        >
+          {formatPrice(changeFromStart)} 원 ({changeRateFromStart}%)
+        </div>
+      </GameMoneyBalance>
+      <BalanceDetailButton>
+        <Button onClick={handleShowTable}>
+          {showTable ? "닫기" : "더보기"}
+        </Button>
+      </BalanceDetailButton>
+
+      {showTable && <GameViewTab holdingList={holdingList} />}
+    </GameMoneyContainer>
+  );
 };
 
 const GameMoneyContainer = styled.div`
-    width: 85%;
-    height: auto;
-    border-radius: 20px;
-    box-shadow: 3px 3px 3px rgb(213, 213, 213);
-    padding: 20px 10px;
-    position: relative;
-    margin-top: 20px;
-    margin-bottom: 20px;
+  width: 85%;
+  height: auto;
+  border-radius: 20px;
+  box-shadow: 3px 3px 3px rgb(213, 213, 213);
+  padding: 20px 10px;
+  position: relative;
+  margin-top: 20px;
+  margin-bottom: 20px;
 `;
 
 const GameMoneyTitle = styled.div`
-    margin-bottom: 30px;
+  margin-bottom: 30px;
 `;
 
 const GameMoneyBalance = styled.div`
-    display: flex;
-    margin: 15px 0;
-    flex-direction: row;
+  display: flex;
+  margin: 15px 0;
+  flex-direction: row;
 `;
 
 const BalanceDetailButton = styled.div`
-    position: absolute;
-    top: 118px;
-    right: 20px;
+  position: absolute;
+  top: 118px;
+  right: 20px;
 `;
 
 const BalanceTitle = styled.div`
-    color: #6c6c6c;
-    width: 110px;
+  color: #6c6c6c;
+  width: 110px;
 `;
 
 const Button = styled.button`
-    width: 78px;
-    height: 40px;
-    border-radius: 50px;
-    border: none;
-    background-color: #f1f1f1;
-    cursor: pointer;
-
-    &:hover {
-        background-color: #615efc;
-        color: white;
-        font-weight: 600;
-    }
+  width: 78px;
+  height: 40px;
+  border-radius: 50px;
+  border: none;
+  background-color: #f1f1f1;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #615efc;
+    color: white;
+    font-weight: 600;
+  }
 `;
 
 export default GameMoney;
diff --git a/src/Pages/404/noUser.tsx b/src/Pages/404/noUser.tsx
index 296e704..e323774 100644
--- a/src/Pages/404/noUser.tsx
+++ b/src/Pages/404/noUser.tsx
@@ -2,8 +2,6 @@ import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import { GoAlert } from "react-icons/go";
 import { Colors } from "../../Styles/Colors";
-import Header from "../../Component/Layout/Header/Header";
-import NavBar from "../../Component/Layout/NavBar/NavBar";
 
 const Box = styled.div`
   height: 60vh;
diff --git a/src/Pages/game/infoPage.tsx b/src/Pages/game/infoPage.tsx
index 3ad2be0..a086451 100644
--- a/src/Pages/game/infoPage.tsx
+++ b/src/Pages/game/infoPage.tsx
@@ -1,14 +1,54 @@
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import ExchangeStoreMain from "../../Game/Shop/exchangeStoreMain";
 import GameHeader from "../../Component/Game/GameHeader";
+import { GoAlert } from "react-icons/go";
+import { Colors } from "../../Styles/Colors";
+import Button from "../../Component/Button/button";
+import { useGameStore } from "../../store/useGameStore";
 
 const InfoPage = () => {
   const { year } = useParams<{ year: string }>();
+  const yearValue = year || "2014";
+  const yearNumber = parseInt(yearValue, 10);
+  const checkYear = useGameStore((state) => state.checkYear);
+  const nav = useNavigate();
+
   return (
-    <div>
-      <GameHeader text="정보거래소" />
-      <ExchangeStoreMain />
-    </div>
+    <>
+      {yearNumber !== checkYear ? (
+        <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>
+      ) : (
+        <div>
+          <GameHeader text="정보거래소" />
+          <ExchangeStoreMain />
+        </div>
+      )}
+    </>
   );
 };
 
diff --git a/src/Pages/game/playPage.tsx b/src/Pages/game/playPage.tsx
index 9678c29..c904916 100644
--- a/src/Pages/game/playPage.tsx
+++ b/src/Pages/game/playPage.tsx
@@ -1,5 +1,4 @@
-import { useNavigate, useParams, useLocation } from "react-router-dom";
-import { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
 import GameButtons from "../../Component/Game/GameButtons";
 import GameHeader from "../../Component/Game/GameHeader";
 import GameMoney from "../../Component/Game/GameMoney";
@@ -13,7 +12,11 @@ import "./gameStyle.css";
 import HappyNewYearModal from "./HappyNewYearModal";
 import { useStock } from "../../store/stockContext";
 import { usePortfolioStore } from "../../store/usePortfolioStore";
+import { useGameStore } from "../../store/useGameStore";
 import ProgressBar from "../../Game/Loading/progressBar";
+import { GoAlert } from "react-icons/go";
+import { Colors } from "../../Styles/Colors";
+import Button from "../../Component/Button/button";
 
 const Container = styled.div`
   display: flex;
@@ -24,16 +27,19 @@ const Container = styled.div`
 `;
 
 const PlayPage = () => {
-  const { year } = useParams<{ year: string }>();
+  const { year } = useParams<{ year?: string }>();
   const { stockData, setStockData } = useStock();
   const nav = useNavigate();
   const yearValue = year || "2014";
+  // 페이지 유효성 검사를 위한 변수
+  const yearNumber = parseInt(yearValue, 10);
   const [isTradeModalVisible, setIsTradeModalVisible] = useState(false);
   const [isPassModalVisible, setIsPassModalVisible] = useState(false);
   const [isHappyNewYearModal, setIsHappyNewYearModal] = useState(false);
   const [budget, setBudget] = useState(0);
   const [loading, setLoading] = useState(false);
 
+  const checkYear = useGameStore((state) => state.checkYear);
   const check = usePortfolioStore((state) => state.check);
   const setCheck = usePortfolioStore((state) => state.setCheck);
 
@@ -75,7 +81,6 @@ const PlayPage = () => {
       setIsPassModalVisible(false);
 
       if (year === "2023") {
-        console.log("게임 끝");
         nav("/game/result/total");
       } else {
         const response = await axios.get(
@@ -116,20 +121,49 @@ const PlayPage = () => {
   };
 
   return (
-    <Container>
-      <GameHeader text={year || "Default"} />
-
-      <div
-        style={{
-          width: "100%",
-          marginTop: "1rem",
-          textAlign: "left",
-          display: "flex",
-          flexDirection: "column",
-        }}
-      >
-        {/* <div> */}
-        {/* <p
+    <>
+      {yearNumber !== checkYear ? (
+        <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>
+      ) : (
+        <Container>
+          <GameHeader text={year || "Default"} />
+
+          <div
+            style={{
+              width: "100%",
+              marginTop: "1rem",
+              textAlign: "left",
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
+            {/* <div> */}
+            {/* <p
           style={{
             paddingLeft: "3.5rem",
             fontSize: "15px",
@@ -138,31 +172,33 @@ const PlayPage = () => {
         >
           게임 진행도
         </p> */}
-        {/* </div> */}
-        <ProgressBar progress={progress} />
-      </div>
-      <GameMoney setBudget={setBudget} budget={budget} />
-      <StocksTable stocks={stockData || []} year={yearValue} />
-      <GameButtons
-        openTradeModal={openTradeModal}
-        openPassModal={openPassModal}
-        setBudget={setBudget}
-        budget={budget}
-      />
-      <GameTradeSwipe
-        isVisible={isTradeModalVisible}
-        onClose={closeTradeModal}
-        year={yearValue.toString()}
-        budget={budget}
-      />
-      <PassConfirmModal
-        isOpen={isPassModalVisible}
-        onRequestClose={closePassModal}
-        onConfirm={handleConfirmPass}
-        year={yearValue}
-      />
-      <HappyNewYearModal isVisible={isHappyNewYearModal} />
-    </Container>
+            {/* </div> */}
+            <ProgressBar progress={progress} />
+          </div>
+          <GameMoney setBudget={setBudget} budget={budget} />
+          <StocksTable stocks={stockData || []} year={yearValue} />
+          <GameButtons
+            openTradeModal={openTradeModal}
+            openPassModal={openPassModal}
+            setBudget={setBudget}
+            budget={budget}
+          />
+          <GameTradeSwipe
+            isVisible={isTradeModalVisible}
+            onClose={closeTradeModal}
+            year={yearValue.toString()}
+            budget={budget}
+          />
+          <PassConfirmModal
+            isOpen={isPassModalVisible}
+            onRequestClose={closePassModal}
+            onConfirm={handleConfirmPass}
+            year={yearValue}
+          />
+          <HappyNewYearModal isVisible={isHappyNewYearModal} />
+        </Container>
+      )}
+    </>
   );
 };
 
diff --git a/src/store/useGameStore.ts b/src/store/useGameStore.ts
new file mode 100644
index 0000000..5bd84a5
--- /dev/null
+++ b/src/store/useGameStore.ts
@@ -0,0 +1,15 @@
+import { create } from "zustand";
+import { PortfolioProps, StockProps } from "../constants/interface";
+
+interface GameState {
+  checkYear: number;
+  setCheckYear: (checkYear: number) => void;
+}
+
+export const useGameStore = create<GameState>((set) => ({
+  checkYear: 2014,
+
+  setCheckYear(checkYear) {
+    set({ checkYear });
+  },
+}));