Merge pull request #17 from depromeet/feature/11/AddProgressBar

공통 컴포넌트 프로그래스 바 개발

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

@@ -0,0 +1,30 @@
+import {css} from "@emotion/react";
+
+interface ProgressBarProps {
+    curPage: number,
+    lastPage: number,
+}
+
+export default function ProgressBar({ curPage, lastPage }: ProgressBarProps) {
+    if (curPage > lastPage) curPage = lastPage;
+
+    return (
+        // FIXME: 추후 디자인 토큰 연동 후 컬러 값 변경
+        <div css={css`
+          position: relative;
+          width: 100%;
+          background-color: #F1F3F5;
+          border-radius: 5rem;
+          height: 0.4rem;
+        `}>
+            <div css={css`
+              position: absolute;
+              width: ${(curPage / lastPage) * 100}%;
+              background-color: #608DFF;
+              height: inherit;
+              border-radius: ${lastPage === curPage ? `5rem` : `5rem 0 0 5rem`};
+              transition: 0.4s all;
+            `}/>
+        </div>
+    )
+}

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([

src/style/global.css

@@ -1,4 +1,9 @@
+html {
+    font-size: 62.5%;
+}
+
 body {
+    font-size: 1.5rem;
     margin: 0;
     padding: 0;
 }

vercel.json

@@ -0,0 +1,6 @@
+{
+  "routes": [
+    { "handle": "filesystem" },
+    { "src": "/.*", "dest": "/index.html" }
+  ]
+}