디자인 변경에 따른 프로그래스바 변경

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>

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>
+  );
+}

src/component/common/ProgressBar/index.ts

@@ -0,0 +1 @@
+export { ProgressBar } from "./ProgressBar.tsx";