feat: chip component 추가

src/ui/chip/chip.styles.css.ts

@@ -0,0 +1,76 @@
+import { style } from '@vanilla-extract/css';
+import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
+import { typography } from '../typography.css.ts';
+import { globalVars } from './../theme.css.ts';
+
+const base = style([
+  {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    border: '1px solid',
+  },
+]);
+
+export const chipVariants = recipe({
+  base,
+  variants: {
+    shape: {
+      pill: { borderRadius: 20, padding: '6px 10px' },
+      rect: { borderRadius: 8, padding: '8px 10px' },
+    },
+    state: {
+      default: {
+        borderColor: globalVars.color.grey200,
+        color: globalVars.color.grey500,
+      },
+      active: {
+        backgroundColor: globalVars.color.blue100,
+        color: globalVars.color.mainblue500,
+      },
+      tag: [
+        typography('body_4_12_b'),
+        {
+          border: 0,
+          padding: '4px 10px',
+        },
+      ],
+    },
+    color: {
+      default: [typography('body_2_14_sb'), {}],
+      grey: {
+        backgroundColor: globalVars.color.grey200,
+        color: globalVars.color.grey500,
+      },
+      blue: {
+        backgroundColor: globalVars.color.blue200,
+        color: globalVars.color.blue400,
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      variants: {
+        state: 'default',
+        shape: 'pill',
+        color: 'default',
+      },
+      style: [
+        typography('body_3_14_r'),
+        {
+          color: globalVars.color.grey900,
+        },
+      ],
+    },
+  ],
+});
+
+export type ChipVariants = Exclude<
+  RecipeVariants<typeof chipVariants>,
+  undefined
+>;
+
+export const chipHasElement = style({
+  cursor: 'pointer',
+  paddingRight: 2,
+});

src/ui/chip/chip.tsx

@@ -0,0 +1,32 @@
+import { ComponentProps, PropsWithChildren } from 'react';
+import { globalVars } from '../theme.css.ts';
+import { cx } from '../util.ts';
+import * as styles from './chip.styles.css.ts';
+import { DeleteIcon } from './delete-icon.tsx';
+
+export type ChipProps = ComponentProps<'div'> & styles.ChipVariants;
+
+export const Chip = (props: PropsWithChildren<ChipProps>) => {
+  const { className, state, shape, color, ...restProps } = props;
+
+  const hasRightButton =
+    state === 'active' && shape === 'pill' && color === 'default';
+
+  return (
+    <div
+      {...restProps}
+      className={cx(
+        styles.chipVariants({
+          state,
+          shape,
+          color,
+        }),
+        hasRightButton && styles.chipHasElement,
+        className,
+      )}
+    >
+      {props.children}
+      {hasRightButton && <DeleteIcon color={globalVars.color.mainblue500} />}
+    </div>
+  );
+};

src/ui/chip/index.ts

@@ -0,0 +1 @@
+export { Chip, type ChipProps } from './chip.tsx';