Feat : 페이지 유효성 검사 -> url에 년도 입력해서 접속하는 경우 정상적인 접근 경로가 아닙니다 페이지 보여주도록 추가

100-hours-a-week · Sep 28, 2024 · 3237e81 · 3237e81
1 parent 61e9d91
commit 3237e81
Show file tree

Hide file tree

Showing 5 changed files with 276 additions and 182 deletions.
diff --git 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
@@ -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
@@ -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>
+      )}
+    </>
   );
 };