fix: resolve conflicts

apps/web/src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Icon, Toast, Text, Button } from '@repo/ui';
+import { Icon, Toast, Text, Button, Badge } from '@repo/ui';
 import { overlay } from 'overlay-kit';
 
 export default function Home() {
@@ -45,6 +45,23 @@ export default function Home() {
       <Button size="large" variant="primary" leftIcon="stack" rightIcon="chat">
         버튼
       </Button>
+      <div style={{ display: 'flex', gap: '8px' }}>
+        <Badge size="medium" variant="neutral" shape="round">
+          X Premium 계정 전용
+        </Badge>
+        <Badge size="medium" variant="primary" shape="round">
+          X Premium 계정 전용
+        </Badge>
+        <Badge size="medium" variant="pink" shape="square">
+          전체 적용
+        </Badge>
+        <Badge size="medium" variant="blue" shape="square">
+          개별 적용
+        </Badge>
+        <Badge size="large" variant="neutral" shape="square">
+          요약
+        </Badge>
+      </div>
     </div>
   );
 }

packages/ui/src/components/Badge/Badge.css.ts

@@ -0,0 +1,68 @@
+import { recipe } from '@vanilla-extract/recipes';
+import { vars } from '@repo/theme';
+
+export const badge = recipe({
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    whiteSpace: 'nowrap',
+    height: 'fit-content',
+  },
+
+  variants: {
+    size: {
+      medium: {
+        fontSize: vars.typography.fontSize[14],
+        fontWeight: vars.typography.fontWeight.medium,
+        lineHeight: '150%',
+      },
+      large: {
+        fontSize: vars.typography.fontSize[20],
+        fontWeight: vars.typography.fontWeight.semibold,
+        lineHeight: '150%',
+      },
+    },
+    variant: {
+      neutral: {
+        backgroundColor: vars.colors.grey50,
+        color: vars.colors.grey600,
+      },
+      primary: {
+        backgroundColor: vars.colors.primary600,
+        color: vars.colors.grey,
+      },
+      pink: {
+        backgroundColor: vars.colors.pink200,
+        color: vars.colors.grey600,
+      },
+      blue: {
+        backgroundColor: vars.colors.blue200,
+        color: vars.colors.grey600,
+      },
+    },
+    shape: {
+      round: {
+        borderRadius: 100,
+      },
+      square: {
+        borderRadius: '4px',
+      },
+    },
+  },
+
+  compoundVariants: [
+    {
+      variants: { shape: 'round', size: 'medium' },
+      style: { padding: '4px 10px' },
+    },
+    {
+      variants: { shape: 'square', size: 'medium' },
+      style: { padding: '2px 6px' },
+    },
+    {
+      variants: { shape: 'square', size: 'large' },
+      style: { padding: '4px 8px' },
+    },
+  ],
+});

packages/ui/src/components/Badge/Badge.tsx

@@ -0,0 +1,53 @@
+import { forwardRef } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
+import * as styles from './Badge.css';
+
+export type BadgeSize = 'medium' | 'large';
+export type BadgeVariant = 'neutral' | 'primary' | 'pink' | 'blue';
+export type BadgeShape = 'round' | 'square';
+
+type BadgeCombination =
+  | {
+      size: Extract<BadgeSize, 'medium'>;
+      variant: Extract<BadgeVariant, 'neutral'>;
+      shape: Extract<BadgeShape, 'round'>;
+    }
+  | {
+      size: Extract<BadgeSize, 'medium'>;
+      variant: Extract<BadgeVariant, 'pink'>;
+      shape: Extract<BadgeShape, 'square'>;
+    }
+  | {
+      size: Extract<BadgeSize, 'medium'>;
+      variant: Extract<BadgeVariant, 'primary'>;
+      shape: Extract<BadgeShape, 'round'>;
+    }
+  | {
+      size: Extract<BadgeSize, 'medium'>;
+      variant: Extract<BadgeVariant, 'blue'>;
+      shape: Extract<BadgeShape, 'square'>;
+    }
+  | {
+      size: Extract<BadgeSize, 'large'>;
+      variant: Extract<BadgeVariant, 'neutral'>;
+      shape: Extract<BadgeShape, 'square'>;
+    };
+
+export type BadgeProps = HTMLAttributes<HTMLSpanElement> &
+  BadgeCombination & {
+    children: ReactNode;
+  };
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ size, variant, shape, children, className = '', ...props }, ref) => (
+    <span
+      ref={ref}
+      className={`${styles.badge({ size, variant, shape })} ${className}`}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+);
+
+Badge.displayName = 'Badge';

packages/ui/src/components/index.ts

@@ -8,3 +8,5 @@ export { Text } from './Text/Text.subComponents';
 export type { AllowedTags, TextProps } from './Text/Text';
 export { Button } from './Button/Button';
 export type { ButtonSize, ButtonVariant, ButtonProps } from './Button/Button';
+export { Badge } from './Badge/Badge';
+export type { BadgeProps } from './Badge/Badge';