Merge pull request #22 from 8princesses/feat/progress-bar

✨ progress bar

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]};
+`;

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