Feat(design-system): 카테고리 칩 컴포넌트 (#34)

* feat: 카테고리 색상 분기

* feat: 스토리북 코드 연결

* fix: 타입 지정 수정

* feat: 카테고리명 필수화

* feat: 스토리북 가운데 정렬 설정

* feat: 변수 네이밍 수정정

* chore: 머지 충돌에러 해결

Author: jllee000

packages/design-system/src/components/chip/Chip.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Chip from './Chip';
+
+const meta: Meta<typeof Chip> = {
+  title: 'Components/Chip',
+  component: Chip,
+  tags: ['autodocs'],
+  args: {
+    category: 'Frontend',
+    color: 'red',
+  },
+  argTypes: {
+    category: {
+      control: 'text',
+      description: '칩에 표시할 텍스트',
+    },
+    color: {
+      control: { type: 'select' },
+      options: [
+        'red',
+        'purple',
+        'navyblue',
+        'skyblue',
+        'emerald',
+        'navygreen',
+        'khaki',
+        'orange',
+        'amber',
+        'maroon',
+      ],
+      description: '카테고리 색상',
+    },
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          '카테고리를 색상별로 표시하는 Chip 컴포넌트. cva로 색상 variants를 스위칭합니다.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Chip>;
+
+export const Default: Story = {};
+
+export const AllColors: Story = {
+  args: { category: 'Category' },
+  render: (args) => {
+    const colors = [
+      'red',
+      'purple',
+      'navyblue',
+      'skyblue',
+      'emerald',
+      'navygreen',
+      'khaki',
+      'orange',
+      'amber',
+      'maroon',
+    ] as const;
+
+    return (
+      <div style={{ display: 'grid', gap: '8px' }}>
+        {colors.map((color) => (
+          <div
+            key={color}
+            style={{ display: 'flex', alignItems: 'center', gap: 8 }}
+          >
+            <Chip {...args} color={color} />
+            <code style={{ fontSize: 12 }}>{color}</code>
+          </div>
+        ))}
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: { story: '팔레트 뷰: 모든 색상 변형을 한 번에 미리보기' },
+    },
+  },
+};

packages/design-system/src/components/chip/Chip.tsx

@@ -0,0 +1,46 @@
+import { cva } from 'class-variance-authority';
+type ChipColor =
+  | 'red'
+  | 'purple'
+  | 'navyblue'
+  | 'skyblue'
+  | 'emerald'
+  | 'navygreen'
+  | 'khaki'
+  | 'orange'
+  | 'amber'
+  | 'maroon';
+
+interface ChipProps {
+  color: ChipColor;
+  category: string;
+}
+const ChipColorVariants = cva(
+  'caption2-sb rounded-[0.4rem] px-[0.8rem] py-[0.39rem]',
+  {
+    variants: {
+      color: {
+        red: 'bg-category-red-bg text-category-red-text',
+        purple: 'bg-category-purple-bg text-category-purple-text',
+        navyblue: 'bg-category-navyblue-bg text-category-navyblue-text',
+        skyblue: 'bg-category-skyblue-bg text-category-skyblue-text',
+        emerald: 'bg-category-emerald-bg text-category-emerald-text',
+        navygreen: 'bg-category-navygreen-bg text-category-navygreen-text',
+        khaki: 'bg-category-khaki-bg text-category-khaki-text',
+        orange: 'bg-category-orange-bg text-category-orange-text',
+        amber: 'bg-category-amber-bg text-category-amber-text',
+        maroon: 'bg-category-maroon-bg text-category-maroon-text',
+      },
+    },
+    defaultVariants: {
+      color: 'red',
+    },
+  }
+);
+const Chip = ({ color, category }: ChipProps) => {
+  return (
+    <span className={ChipColorVariants({ color: color })}>{category}</span>
+  );
+};
+
+export default Chip;

packages/design-system/src/components/index.ts

@@ -2,6 +2,7 @@ export { default as Button } from './button/Button';
 export { Switch } from './switch/Switch';
 export { default as Badge } from './badge/Badge';
 export { default as Input } from './input/Input';
+export { default as Chip } from './chip/Chip';
 export { default as Level } from './level/Level';
 export { Textarea } from './textarea/Textarea';
 export { Progress } from './progress/Progress';