From 2b389d908be0312e5d921bd633ddfe058176f56d Mon Sep 17 00:00:00 2001
From: klmhyeonwoo <gentlemonster77@likelion.org>
Date: Wed, 17 Jul 2024 01:15:35 +0900
Subject: [PATCH] refactor: #11 Change ProgressBar

---
 src/app/test/Staging.tsx                      | 14 +++++-
 src/component/ProgressBar/ProgressBar.tsx     | 30 -----------
 .../common/ProgressBar/ProgressBar.tsx        | 50 +++++++++++++++++++
 src/component/common/ProgressBar/index.ts     |  1 +
 4 files changed, 64 insertions(+), 31 deletions(-)
 delete mode 100644 src/component/ProgressBar/ProgressBar.tsx
 create mode 100644 src/component/common/ProgressBar/ProgressBar.tsx
 create mode 100644 src/component/common/ProgressBar/index.ts

diff --git a/src/app/test/Staging.tsx b/src/app/test/Staging.tsx
index a8d4810f..4fae2a19 100644
--- a/src/app/test/Staging.tsx
+++ b/src/app/test/Staging.tsx
@@ -1,9 +1,11 @@
-import { Fragment, useEffect } from "react";
+import { css } from "@emotion/react";
+import { Fragment, useEffect, useState } from "react";
 
 import { BottomSheet } from "@/component/BottomSheet";
 import { Button, ButtonProvider } from "@/component/common/button";
 import { CheckBox, CheckBoxGroup } from "@/component/common/checkBox";
 import { Input, InputLabelContainer, Label } from "@/component/common/input";
+import { ProgressBar } from "@/component/common/ProgressBar";
 import { Radio, RadioButtonGroup } from "@/component/common/radioButton";
 import { useBottomSheet } from "@/hooks/useBottomSheet.ts";
 import { useCheckBox } from "@/hooks/useCheckBox";
@@ -15,6 +17,7 @@ export default function Staging() {
   const [isRadioChecked, onChange, selectedValue] = useRadioButton();
   const [isCheckBoxChecked, toggle, selectedValues] = useCheckBox();
   const { openBottomSheet, bottomSheetState } = useBottomSheet();
+  const [number, setNumber] = useState(0);
   const [layerName, handleChangeName] = useInput();
 
   useEffect(() => {
@@ -31,6 +34,15 @@ export default function Staging() {
 
   return (
     <DefaultLayout>
+      <ProgressBar
+        curPage={number}
+        lastPage={5}
+        css={css`
+          margin-bottom: 1rem;
+        `}
+      />
+      <Button onClick={() => setNumber(number + 1)}>업</Button>
+      <Button onClick={() => setNumber(number - 1)}>다운</Button>
       <Button onClick={openBottomSheet}> 그냥 그저 그런 버튼 </Button>
       <Button colorSchema={"gray"}> 그냥 그저 그런 버튼 </Button>
       <Button colorSchema={"sky"}> 그냥 그저 그런 버튼 </Button>
diff --git a/src/component/ProgressBar/ProgressBar.tsx b/src/component/ProgressBar/ProgressBar.tsx
deleted file mode 100644
index f55dbc8f..00000000
--- a/src/component/ProgressBar/ProgressBar.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-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>
-    )
-}
\ No newline at end of file
diff --git a/src/component/common/ProgressBar/ProgressBar.tsx b/src/component/common/ProgressBar/ProgressBar.tsx
new file mode 100644
index 00000000..7d34c3c3
--- /dev/null
+++ b/src/component/common/ProgressBar/ProgressBar.tsx
@@ -0,0 +1,50 @@
+import { css } from "@emotion/react";
+import { Fragment } from "react";
+
+type ProgressBarProps = {
+  curPage: number;
+  lastPage: number;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "type">;
+
+export function ProgressBar({ curPage, lastPage, ...props }: ProgressBarProps) {
+  if (curPage > lastPage) curPage = lastPage;
+
+  const segments = Array.from({ length: lastPage }, (_, i) => i < curPage);
+
+  return (
+    <div
+      css={css`
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        gap: 0.5rem;
+      `}
+      {...props}
+    >
+      {segments.map((isActive, index) => (
+        <Fragment key={index}>
+          <div
+            css={css`
+              position: relative;
+              width: 100%;
+              background-color: #f1f3f5;
+              border-radius: 5rem;
+              height: 0.4rem;
+            `}
+          >
+            <div
+              css={css`
+                position: absolute;
+                width: ${isActive ? 100 : 0}%;
+                background-color: #608dff;
+                border-radius: 5rem;
+                height: inherit;
+                transition: 0.4s all;
+              `}
+            />
+          </div>
+        </Fragment>
+      ))}
+    </div>
+  );
+}
diff --git a/src/component/common/ProgressBar/index.ts b/src/component/common/ProgressBar/index.ts
new file mode 100644
index 00000000..4d83fe2b
--- /dev/null
+++ b/src/component/common/ProgressBar/index.ts
@@ -0,0 +1 @@
+export { ProgressBar } from "./ProgressBar.tsx";