feat: chip component 추가 및 스토리북 적용

src/components/Chip/Chip.stories.ts

@@ -0,0 +1,36 @@
+import Chip from '@/components/Chip/Chip';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Component/Chip',
+  component: Chip,
+  parameters: {
+    layout: 'centered',
+    controls: {
+      include: ['selected', 'children'],
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    selected: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    selected: false,
+    children: '텍스트',
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    selected: true,
+    children: '텍스트',
+  },
+};

src/components/Chip/Chip.tsx

@@ -0,0 +1,28 @@
+import { cva } from '@/styled-system/css';
+import { styled } from '@/styled-system/jsx';
+
+const chipStyle = cva({
+  base: {
+    padding: '6px 14px',
+    display: 'inline-block',
+    textStyle: 'body3',
+    borderRadius: '20px',
+    transition: 'all 0.3s',
+  },
+  variants: {
+    selected: {
+      true: {
+        background: 'purple.purple300',
+        color: 'text.primary',
+      },
+      false: {
+        background: 'gray.gray100',
+        color: 'text.tertiary',
+      },
+    },
+  },
+});
+
+const Chip = styled('div', chipStyle);
+
+export default Chip;