[Feature/BAR-89] Badge 컴포넌트 구현 (#22)

src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Badge from './Badge';
+import { BADGE_TYPE } from './constants';
+
+const meta: Meta<typeof Badge> = {
+  title: 'Components/Badge',
+  component: Badge,
+  parameters: {
+    componentSubtitle: '카테고리를 나타내는 컴포넌트',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Basic: Story = {
+  args: {
+    children: '부탁하기',
+    color: 'blue',
+  },
+  render: (args) => <Badge color={args.color}>{args.children}</Badge>,
+};
+
+export const AllBadges: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '8px' }}>
+      <Badge color={BADGE_TYPE['부탁하기']}>부탁하기</Badge>
+      <Badge color={BADGE_TYPE['보고하기']}>보고하기</Badge>
+      <Badge color={BADGE_TYPE['축하하기']}>축하하기</Badge>
+      <Badge color={BADGE_TYPE['위로하기']}>위로하기</Badge>
+      <Badge color={BADGE_TYPE['감사 전하기']}>감사 전하기</Badge>
+      <Badge color={BADGE_TYPE['안부 전하기']}>안부 전하기</Badge>
+      <Badge color={BADGE_TYPE['기타']}>기타</Badge>
+    </div>
+  ),
+};

src/components/Badge/Badge.tsx

@@ -0,0 +1,21 @@
+import type { PropsWithChildren } from 'react';
+
+import * as styles from './style.css';
+
+interface BadgeProps {
+  color:
+    | 'blue'
+    | 'green'
+    | 'yellow'
+    | 'red'
+    | 'orange'
+    | 'purple'
+    | 'grey'
+    | 'black';
+}
+
+const Badge = ({ children, color }: PropsWithChildren<BadgeProps>) => {
+  return <span className={styles.badge({ color })}>{children}</span>;
+};
+
+export default Badge;

src/components/Badge/constants.ts

@@ -0,0 +1,9 @@
+export const BADGE_TYPE = {
+  부탁하기: 'blue',
+  보고하기: 'orange',
+  축하하기: 'green',
+  위로하기: 'purple',
+  '감사 전하기': 'red',
+  '안부 전하기': 'yellow',
+  기타: 'black',
+} as const;

src/components/Badge/style.css.ts

@@ -0,0 +1,47 @@
+import { recipe } from '@vanilla-extract/recipes';
+
+import { sprinkles } from '@/src/styles/sprinkles.css';
+import { COLORS } from '@/src/styles/tokens';
+
+export const badge = recipe({
+  base: [
+    sprinkles({ typography: '13/Title/Semibold' }),
+    {
+      display: 'inline-block',
+      width: 'fit-content',
+      padding: '6px 8px',
+      color: COLORS['Grey/White'],
+      borderRadius: '6px',
+      whiteSpace: 'nowrap',
+    },
+  ],
+  variants: {
+    color: {
+      blue: {
+        backgroundColor: COLORS['Blue/Default'],
+      },
+      green: {
+        backgroundColor: COLORS['Green'],
+      },
+      yellow: {
+        backgroundColor: COLORS['Yellow'],
+      },
+      red: {
+        backgroundColor: COLORS['LightRed'],
+      },
+      orange: {
+        backgroundColor: COLORS['Orange'],
+      },
+      purple: {
+        backgroundColor: COLORS['Purple'],
+      },
+      grey: {
+        color: COLORS['Grey/250'],
+        backgroundColor: COLORS['Grey/600'],
+      },
+      black: {
+        backgroundColor: COLORS['Grey/800'],
+      },
+    },
+  },
+});

src/styles/tokens.ts

@@ -137,6 +137,12 @@ export const TYPOGRAPHY = {
     lineHeight: '14px',
     letterSpacing: '0px',
   },
+  '11/Caption/Regular': {
+    fontSize: '11px',
+    fontWeight: FONT_WEIGHT.regular,
+    lineHeight: '14px',
+    letterSpacing: '-0.3px',
+  },
 };
 
 export const COLORS = {