[FEAT] 프로그레스 바 구현

src/shared/index.ts

@@ -18,6 +18,7 @@ export { MediaUpload } from './ui/MediaUpload';
 export { NavBack } from './ui/NavBack';
 export { Pagination } from './ui/Pagination';
 export { Portal } from './ui/Portal';
+export { ProgressBar } from './ui/ProgressBar';
 export { Select, GroupingSelect } from './ui/Select';
 export { Skeleton } from './ui/Skeleton';
 export { Radio, RadioItem } from './ui/Radio';

src/shared/lib/colors.ts

@@ -32,6 +32,7 @@ export const colors = {
   purple: '#a855f7',
   white: '#ffffff',
   black: '#000000',
+  pink: '#FF507D',
 };
 
 export const COLORS = {
@@ -41,9 +42,11 @@ export const COLORS = {
   green: colors['green'][300],
   black: colors['black'],
   white: colors['white'],
+  pink: colors['pink'],
 };
 
 export type Colors = keyof typeof colors;
 export type IconColor = keyof typeof COLORS;
 export type SwitchColor = keyof typeof COLORS;
+export type ProgressBarColor = keyof typeof colors;
 export const colorNames = Object.keys(colors) as Colors[];

src/shared/ui/ProgressBar/ProgressBar.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { COLORS } from '@/shared/lib/colors';
+
+import { ProgressBar } from './ProgressBar';
+
+const meta = {
+  title: 'Components/ProgressBar',
+  component: ProgressBar,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'ProgressBar 컴포넌트는 진행 상황을 시각적으로 표시하는 컴포넌트입니다.',
+      },
+    },
+  },
+} satisfies Meta<typeof ProgressBar>;
+
+export default meta;
+
+export const Basic: StoryObj<typeof ProgressBar> = {
+  args: {
+    percent: 60,
+    color: 'pink',
+  },
+  argTypes: {
+    percent: { control: { type: 'range', min: 0, max: 100, step: 1 } },
+    color: {
+      control: { type: 'select' },
+      table: {
+        type: { summary: 'Colors' },
+        defaultValue: { summary: 'primary' },
+      },
+      options: Object.keys(COLORS),
+    },
+  },
+  render: (args) => <ProgressBar {...args} />,
+};

src/shared/ui/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,40 @@
+import { COLORS, colors } from '@/shared/lib/colors';
+import { cn } from '@/shared/lib/core';
+import { Flex } from '@/shared/ui/Flex';
+
+type Props = {
+  /**
+   *   defined in percentage (0-100).
+   */
+  percent: number;
+  /**
+   * color of the switch.
+   * @default 'primary'
+   */
+  color?: keyof typeof COLORS;
+  className?: string;
+};
+
+export function ProgressBar({ color = 'primary', percent, className }: Props) {
+  const clampedPercent = Math.min(100, Math.max(0, percent));
+  const barColor = COLORS[color];
+
+  return (
+    <Flex>
+      <div
+        className={cn('h-[0.625rem] w-[16.5rem] overflow-hidden rounded-full', className)}
+        style={{
+          backgroundColor: colors.gray[100],
+        }}
+      >
+        <div
+          className="h-full rounded-full transition-[width] duration-600 ease-in-out"
+          style={{
+            width: `${clampedPercent}%`,
+            backgroundColor: barColor,
+          }}
+        />
+      </div>
+    </Flex>
+  );
+}

src/shared/ui/ProgressBar/index.ts

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