feat: #11 Add Progress Bar

src/app/test/Staging.tsx

@@ -0,0 +1,19 @@
+import ProgressBar from "@/component/ProgressBar/ProgressBar.tsx";
+import {useState} from "react";
+import {css} from "@emotion/react";
+
+export default function Staging() {
+
+    const [page, setPage] = useState(0);
+
+    return (
+        <section css={css`
+            padding-top: 50px;
+        `}>
+            <ProgressBar curPage={page} lastPage={10}/>
+            <div> 현재 페이지 넘버 {page}</div>
+            <button onClick={() => setPage(page + 1)}> 현재 페이지 + 1</button>
+            <button onClick={() => setPage(page - 1)}> 현재 페이지 - 1</button>
+        </section>
+    )
+}

src/component/ProgressBar/ProgressBar.tsx

@@ -6,6 +6,7 @@ interface ProgressBarProps {
 }
 
 export default function ProgressBar({ curPage, lastPage }: ProgressBarProps) {
+    if (curPage > lastPage) curPage = lastPage;
     return (
         // FIXME: 추후 디자인 토큰 연동 후 컬러 값 변경
         <div css={css`

src/router/index.tsx

@@ -3,12 +3,17 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
 import MainPage from "@/app/MainPage.tsx"; /* FIXME - 실제 메인 페이지 작성 후 대체해주세요. */
 import { DefaultLayout } from "@/layout/default.tsx";
+import Staging from "@/app/test/Staging.tsx";
 
 const routerChildren = [
   {
     path: "/",
     element: <MainPage />,
   },
+  {
+    path: '/staging',
+    element: <Staging/>
+  }
 ];
 
 const router = createBrowserRouter([