From 4a4b4eadf1eedb7bd682204a2eb325f85333cd3a Mon Sep 17 00:00:00 2001
From: bykbyk0401 <bykbyk0401@gmail.com>
Date: Tue, 14 Jan 2025 05:24:32 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EB=9E=98=EC=8A=A4=EB=B0=94=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/progressBar/ProgressBar.tsx        | 29 ++++++++++++++++++
 .../common/progressBar/progressBar.css.ts     | 30 +++++++++++++++++++
 src/stories/ProgressBar.stories.ts            | 26 ++++++++++++++++
 3 files changed, 85 insertions(+)
 create mode 100644 src/components/common/progressBar/ProgressBar.tsx
 create mode 100644 src/components/common/progressBar/progressBar.css.ts
 create mode 100644 src/stories/ProgressBar.stories.ts

diff --git a/src/components/common/progressBar/ProgressBar.tsx b/src/components/common/progressBar/ProgressBar.tsx
new file mode 100644
index 00000000..265fc69a
--- /dev/null
+++ b/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;
diff --git a/src/components/common/progressBar/progressBar.css.ts b/src/components/common/progressBar/progressBar.css.ts
new file mode 100644
index 00000000..ab224e9a
--- /dev/null
+++ b/src/components/common/progressBar/progressBar.css.ts
@@ -0,0 +1,30 @@
+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,
+});
diff --git a/src/stories/ProgressBar.stories.ts b/src/stories/ProgressBar.stories.ts
new file mode 100644
index 00000000..875dd979
--- /dev/null
+++ b/src/stories/ProgressBar.stories.ts
@@ -0,0 +1,26 @@
+import ProgressBar from '@components/common/progressBar/ProgressBar';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Common/ProgressBar',
+  component: ProgressBar,
+  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 = {};

From 8adfaa78d583efe1c11ea826c046c0ff6c210887 Mon Sep 17 00:00:00 2001
From: bykbyk0401 <bykbyk0401@gmail.com>
Date: Tue, 14 Jan 2025 17:45:07 +0900
Subject: [PATCH 2/2] =?UTF-8?q?style:=20transition=20=ED=9A=A8=EA=B3=BC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/progressBar/progressBar.css.ts | 1 +
 src/stories/ProgressBar.stories.ts                   | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/src/components/common/progressBar/progressBar.css.ts b/src/components/common/progressBar/progressBar.css.ts
index ab224e9a..d3e21796 100644
--- a/src/components/common/progressBar/progressBar.css.ts
+++ b/src/components/common/progressBar/progressBar.css.ts
@@ -27,4 +27,5 @@ export const barContainer = style({
 export const barStyle = style({
   height: '100%',
   backgroundColor: theme.COLORS.primary400,
+  transition: 'width 0.3s ease-in-out',
 });
diff --git a/src/stories/ProgressBar.stories.ts b/src/stories/ProgressBar.stories.ts
index 875dd979..cfc34cb6 100644
--- a/src/stories/ProgressBar.stories.ts
+++ b/src/stories/ProgressBar.stories.ts
@@ -4,6 +4,9 @@ import type { Meta, StoryObj } from '@storybook/react';
 const meta = {
   title: 'Common/ProgressBar',
   component: ProgressBar,
+  parameters: {
+    layout: 'centered',
+  },
   args: {
     currentStep: 1,
     totalSteps: 4,