From 1695c33d1d018c05bd3d94407bb0e47572e6c5f2 Mon Sep 17 00:00:00 2001
From: klmhyeonwoo <gentlemonster77@likelion.org>
Date: Sat, 6 Jul 2024 21:48:46 +0900
Subject: [PATCH 1/5] chore: #1 Add vercel.json

---
 src/app/test/Staging.tsx                  |  0
 src/component/ProgressBar/ProgressBar.tsx | 28 +++++++++++++++++++++++
 vercel.json                               |  6 +++++
 3 files changed, 34 insertions(+)
 create mode 100644 src/app/test/Staging.tsx
 create mode 100644 src/component/ProgressBar/ProgressBar.tsx
 create mode 100644 vercel.json

diff --git a/src/app/test/Staging.tsx b/src/app/test/Staging.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/ProgressBar/ProgressBar.tsx b/src/component/ProgressBar/ProgressBar.tsx
new file mode 100644
index 00000000..b8198a68
--- /dev/null
+++ b/src/component/ProgressBar/ProgressBar.tsx
@@ -0,0 +1,28 @@
+import {css} from "@emotion/react";
+
+interface ProgressBarProps {
+    curPage: number,
+    lastPage: number,
+}
+
+export default function ProgressBar({ curPage, lastPage }: ProgressBarProps) {
+    return (
+        // FIXME: 추후 디자인 토큰 연동 후 컬러 값 변경
+        <div css={css`
+          position: relative;
+          width: 100%;
+          background-color: #F1F3F5;
+          border-radius: 50px;
+          height: 4px;
+        `}>
+            <div css={css`
+              position: absolute;
+              width: ${100 - (lastPage - curPage) * 10}%;
+              background-color: #608DFF;
+              height: inherit;
+              border-radius: ${lastPage === curPage ? `50px` : `50px 0 0 50px`};
+              transition: 0.4s all;
+            `}></div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 00000000..f90a92e1
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,6 @@
+{
+  "routes": [
+    { "handle": "filesystem" },
+    { "src": "/.*", "dest": "/index.html" }
+  ]
+}
\ No newline at end of file

From 4582a72e6d11ede8b544d53b8871b7c90a772007 Mon Sep 17 00:00:00 2001
From: klmhyeonwoo <gentlemonster77@likelion.org>
Date: Sat, 6 Jul 2024 21:49:20 +0900
Subject: [PATCH 2/5] feat: #11 Add Progress Bar

---
 src/app/test/Staging.tsx                  | 19 +++++++++++++++++++
 src/component/ProgressBar/ProgressBar.tsx |  1 +
 src/router/index.tsx                      |  5 +++++
 3 files changed, 25 insertions(+)

diff --git a/src/app/test/Staging.tsx b/src/app/test/Staging.tsx
index e69de29b..1c2d47bc 100644
--- a/src/app/test/Staging.tsx
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/src/component/ProgressBar/ProgressBar.tsx b/src/component/ProgressBar/ProgressBar.tsx
index b8198a68..78aa4661 100644
--- a/src/component/ProgressBar/ProgressBar.tsx
+++ b/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`
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 593f8a76..9d30f40b 100644
--- a/src/router/index.tsx
+++ b/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([

From 05bbe78f12a481eb5512ad6ae071724de71ac929 Mon Sep 17 00:00:00 2001
From: klm hyeon woo <gentlemonster77@likelion.org>
Date: Sat, 6 Jul 2024 22:14:56 +0900
Subject: [PATCH 3/5] Update src/component/ProgressBar/ProgressBar.tsx

---
 src/component/ProgressBar/ProgressBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/component/ProgressBar/ProgressBar.tsx b/src/component/ProgressBar/ProgressBar.tsx
index 78aa4661..164c33e7 100644
--- a/src/component/ProgressBar/ProgressBar.tsx
+++ b/src/component/ProgressBar/ProgressBar.tsx
@@ -18,7 +18,7 @@ export default function ProgressBar({ curPage, lastPage }: ProgressBarProps) {
         `}>
             <div css={css`
               position: absolute;
-              width: ${100 - (lastPage - curPage) * 10}%;
+              width: ${(curPage / lastPage) * 100}%;
               background-color: #608DFF;
               height: inherit;
               border-radius: ${lastPage === curPage ? `50px` : `50px 0 0 50px`};

From 8dd51487e04c313d9e703de80914f292d55e1f29 Mon Sep 17 00:00:00 2001
From: klmhyeonwoo <gentlemonster77@likelion.org>
Date: Sat, 6 Jul 2024 23:25:30 +0900
Subject: [PATCH 4/5] chore: #1 Add rem css unit

---
 src/style/global.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/style/global.css b/src/style/global.css
index 03afaff8..8f951830 100644
--- a/src/style/global.css
+++ b/src/style/global.css
@@ -1,4 +1,9 @@
+html {
+    font-size: 62.5%;
+}
+
 body {
+    font-size: 1.5rem;
     margin: 0;
     padding: 0;
 }
\ No newline at end of file

From fa383d597908b76f35fed4761c32ebd943487dae Mon Sep 17 00:00:00 2001
From: klmhyeonwoo <gentlemonster77@likelion.org>
Date: Sat, 6 Jul 2024 23:26:44 +0900
Subject: [PATCH 5/5] fix: #17 Change px to rem

---
 src/component/ProgressBar/ProgressBar.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/component/ProgressBar/ProgressBar.tsx b/src/component/ProgressBar/ProgressBar.tsx
index 164c33e7..f55dbc8f 100644
--- a/src/component/ProgressBar/ProgressBar.tsx
+++ b/src/component/ProgressBar/ProgressBar.tsx
@@ -7,23 +7,24 @@ interface ProgressBarProps {
 
 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: 50px;
-          height: 4px;
+          border-radius: 5rem;
+          height: 0.4rem;
         `}>
             <div css={css`
               position: absolute;
               width: ${(curPage / lastPage) * 100}%;
               background-color: #608DFF;
               height: inherit;
-              border-radius: ${lastPage === curPage ? `50px` : `50px 0 0 50px`};
+              border-radius: ${lastPage === curPage ? `5rem` : `5rem 0 0 5rem`};
               transition: 0.4s all;
-            `}></div>
+            `}/>
         </div>
     )
 }
\ No newline at end of file