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

Feature/elle

src/Game/Loading/progressBar.tsx

@@ -0,0 +1,49 @@
+import styled from "styled-components";
+
+const Container = styled.div`
+  width: 100%;
+  max-width: 400px;
+  margin: 10px auto;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 50px;
+  padding: 5px;
+  display: flex;
+  border: 2px solid #ff79c6;
+`;
+
+const Bar = styled.div`
+  background: linear-gradient(90deg, #ff79c6, #8be9fd);
+  height: 30px;
+  border-radius: 50px;
+  transition: width 0.4s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Text = styled.span`
+  color: white;
+  font-weight: bold;
+  z-index: 1;
+  font-size: 12px;
+`;
+
+interface ProgressBarProps {
+  progress: number;
+}
+
+const ProgressBar: React.FC<ProgressBarProps> = ({ progress }) => {
+  return (
+    <Container>
+      <Bar
+        style={{
+          width: `${progress}%`,
+        }}
+      >
+        <Text>{progress.toFixed(0)}%</Text>
+      </Bar>
+    </Container>
+  );
+};
+
+export default ProgressBar;

src/Game/Main/gameStart.tsx

@@ -245,7 +245,7 @@ const GameMain: React.FC = () => {
                         placeholder="닉네임"
                         onChange={handleChangeQuantity}
                         value={nickname}
-                        maxLength={5}
+                        maxLength={8}
                       />
                     </div>
                     <ButtonDiv>

src/Game/Shop/shop.tsx

@@ -71,7 +71,7 @@ const Shop: React.FC<ShopProps> = ({ selectedStock, budget, setBudget }) => {
       if (res.status === 200) {
         swal({
           icon: "success",
-          title: "구매가 되었습니다.",
+          title: "구매가 완료되었습니다.",
         });
         setHint(res.data.hint);
         setBudget(

src/Pages/game/playPage.tsx

@@ -16,6 +16,7 @@ import { useStock } from "../../store/stockContext";
 import { usePortfolioStore } from "../../store/usePortfolioStore";
 
 import RollModal from "../../Game/Tutorial/roll";
+import ProgressBar from "../../Game/Loading/progressBar";
 
 const Container = styled.div`
   display: flex;
@@ -40,6 +41,9 @@ const PlayPage = () => {
   const check = usePortfolioStore((state) => state.check);
   const setCheck = usePortfolioStore((state) => state.setCheck);
 
+  const startYear = 2014;
+  const lastYear = 2023;
+
   // 튜토리얼을 볼지 결정하는 상태 (첫 번째 튜토리얼 단계 관리)
   const [fir, setFir] = useState(true); // 처음엔 true로 설정하여 튜토리얼 표시
   const [sec, setSec] = useState(false); // 두 번째 튜토리얼 단계를 위한 상태
@@ -100,6 +104,15 @@ const PlayPage = () => {
     }
   }, [location.pathname, fir, sec]); // location.pathname, fir, sec이 변경될 때마다 실행
 
+  // 년도 진행률 표시
+  const calculateProgress = () => {
+    return (
+      ((parseInt(yearValue, 10) - startYear) / (lastYear - startYear)) * 100
+    );
+  };
+
+  const [progress, setProgress] = useState<number>(calculateProgress);
+
   // 거래하기 모달 핸들러
   const openTradeModal = () => {
     setIsTradeModalVisible(true);
@@ -152,6 +165,10 @@ const PlayPage = () => {
           const nextYear = (parseInt(yearValue, 10) + 1).toString();
           nav(`/game/play/${nextYear}`);
           setCheck(!check);
+          setProgress(
+            ((parseInt(nextYear, 10) - startYear) / (lastYear - startYear)) *
+              100
+          );
         }
       }
     } catch (error) {
@@ -165,6 +182,17 @@ const PlayPage = () => {
   return (
     <Container>
       <GameHeader text={year || "Default"} />
+      <div
+        style={{
+          width: "100%",
+          marginTop: "1rem",
+          textAlign: "left",
+        }}
+      >
+        <p style={{ paddingLeft: "3.5rem", fontSize: "12px" }}>게임 진행도</p>
+        <ProgressBar progress={progress} />
+      </div>
+
       <GameMoney setBudget={setBudget} budget={budget} />
       <StocksTable stocks={stockData || []} />
       <GameButtons
@@ -203,4 +231,3 @@ const PlayPage = () => {
 };
 
 export default PlayPage;
-