[FEAT] 프로그래스바 컴포넌트

src/components/common/progressBar/ProgressBar.tsx

@@ -0,0 +1,29 @@
+import Icon from '@assets/svgs';
+import React from 'react';
+
+import * as ProgressBarStyle from './progressBar.css';
+
+interface ProgressBarProps {
+  currentStep: number;
+  totalSteps: number;
+  onBackClick: () => void;
+}
+
+const ProgressBar = ({ currentStep, totalSteps, onBackClick }: ProgressBarProps) => {
+  const progressPercentage = (currentStep / totalSteps) * 100;
+
+  return (
+    <div className={ProgressBarStyle.container}>
+      <button className={ProgressBarStyle.backButton} onClick={onBackClick}>
+        <Icon.IcnArrowBlackLeft />
+      </button>
+      <div className={ProgressBarStyle.barContainer}>
+        <div
+          className={ProgressBarStyle.barStyle}
+          style={{ width: `${progressPercentage}%` }}></div>
+      </div>
+    </div>
+  );
+};
+
+export default ProgressBar;

src/components/common/progressBar/progressBar.css.ts

@@ -0,0 +1,31 @@
+import theme from '@styles/theme.css';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  alignItems: 'start',
+  width: '37.5rem',
+  height: '6.4rem',
+  paddingTop: '1.2rem',
+});
+
+export const backButton = style({
+  width: '4rem',
+  height: '4rem',
+  marginLeft: '1.2rem',
+});
+
+export const barContainer = style({
+  width: '100%',
+  height: '0.2rem',
+  backgroundColor: theme.COLORS.gray1,
+  overflow: 'hidden',
+});
+
+export const barStyle = style({
+  height: '100%',
+  backgroundColor: theme.COLORS.primary400,
+  transition: 'width 0.3s ease-in-out',
+});

src/stories/ProgressBar.stories.ts

@@ -0,0 +1,29 @@
+import ProgressBar from '@components/common/progressBar/ProgressBar';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Common/ProgressBar',
+  component: ProgressBar,
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    currentStep: 1,
+    totalSteps: 4,
+    onBackClick: () => alert('clicked'),
+  },
+  argTypes: {
+    currentStep: {
+      control: { type: 'number', min: 1 },
+    },
+    totalSteps: {
+      control: { type: 'number', min: 1 },
+    },
+  },
+} satisfies Meta<typeof ProgressBar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};