[FEAT] Badge 컴포넌트, 스토리북

src/shared/ui/Badge/Badge.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Badge } from './Badge';
+
+const meta = {
+  title: 'Components/common/Badge',
+  component: Badge,
+  argTypes: {
+    color: { control: 'radio', options: ['red', 'green', 'gray'] },
+    text: { control: 'text' },
+  },
+  parameters: {
+    docs: {
+      autodocs: true,
+    },
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+
+export const Default: StoryObj<typeof Badge> = {
+  args: {
+    color: undefined,
+    text: '상태 없음',
+  },
+};

src/shared/ui/Badge/Badge.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+type Props = {
+  /**
+   * - `'green'`: 초록색 (`bg-green-100 text-green-300`)
+   * - `'red'`: 빨간색 (`bg-red-100 text-red-300`)
+   * - `'gray'`: 회색 (`bg-gray-100 text-gray-400`)
+   * - `null`: 기본값 (회색)
+   *
+   * @default null
+   */
+  color?: 'red' | 'green' | 'gray' | null;
+
+  /**
+   * 특정 상태가 없을 경우
+   *
+   * @default '상태 없음'
+   */
+  text?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+/**
+ * `Badge` is a UI element that visually represents various statuses.
+ */
+export function Badge({ color, text, ...props }: Props) {
+  let badgeColor = 'bg-gray-100 text-gray-400';
+
+  if (color === 'green') {
+    badgeColor = 'bg-green-100 text-green-300';
+  } else if (color === 'red') {
+    badgeColor = 'bg-red-100 text-red-300';
+  } else if (color === 'gray') {
+    badgeColor = 'bg-gray-100 text-gray-400';
+  }
+
+  const badgeText = text ?? '상태 없음';
+
+  return (
+    <div
+      className={`w-min whitespace-nowrap rounded-xl p-1 px-2 font-semibold ${badgeColor}`}
+      {...props}
+    >
+      {badgeText}
+    </div>
+  );
+}

src/shared/ui/Badge/index.ts

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