From 6b29b9bced367223c7082ed6b9bf147d9d8be126 Mon Sep 17 00:00:00 2001
From: KyeongS <59828677+leeks9653@users.noreply.github.com>
Date: Sun, 8 Oct 2023 20:08:16 +0900
Subject: [PATCH] :sparkles: progress bar

---
 src/app/test/page.tsx                 |  6 -----
 src/components/common/ProgressBar.tsx | 39 +++++++++++++++++++++++++++
 src/stories/ProgressBar.stories.tsx   | 18 +++++++++++++
 3 files changed, 57 insertions(+), 6 deletions(-)
 delete mode 100644 src/app/test/page.tsx
 create mode 100644 src/components/common/ProgressBar.tsx
 create mode 100644 src/stories/ProgressBar.stories.tsx

diff --git a/src/app/test/page.tsx b/src/app/test/page.tsx
deleted file mode 100644
index f027b6a..0000000
--- a/src/app/test/page.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-"use client";
-
-const Test = () => {
-  return <div></div>;
-};
-export default Test;
diff --git a/src/components/common/ProgressBar.tsx b/src/components/common/ProgressBar.tsx
new file mode 100644
index 0000000..560baa1
--- /dev/null
+++ b/src/components/common/ProgressBar.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import colors from "@/styles/colors";
+import { FC } from "react";
+import styled from "styled-components";
+
+interface ProgressBarProps {
+  /**
+   * 총 스텝의 수
+   */
+  totalStep: number;
+
+  /**
+   * 현재 스텝
+   */
+  currentStep: number;
+}
+
+const ProgressBar: FC<ProgressBarProps> = ({ totalStep, currentStep }) => {
+  return (
+    <ProgressWrap>
+      <Progress percent={currentStep === 0 ? 0 : (currentStep / totalStep) * 100} />
+    </ProgressWrap>
+  );
+};
+
+export default ProgressBar;
+
+const ProgressWrap = styled.div`
+  height: 3px;
+  background-color: ${colors.GRAY[2]};
+  overflow: hidden;
+`;
+
+const Progress = styled.div<{ percent: number }>`
+  translate: -${({ percent }) => 100 - percent}%;
+  height: 100%;
+  background-color: ${colors.BLUE[5]};
+`;
diff --git a/src/stories/ProgressBar.stories.tsx b/src/stories/ProgressBar.stories.tsx
new file mode 100644
index 0000000..2263d4b
--- /dev/null
+++ b/src/stories/ProgressBar.stories.tsx
@@ -0,0 +1,18 @@
+import ProgressBar from "@/components/common/ProgressBar";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Common/ProgressBar",
+  component: ProgressBar,
+  tags: ["autodocs"],
+} satisfies Meta<typeof ProgressBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    totalStep: 5,
+    currentStep: 4,
+  },
+};