[Feat] Chip 컴포넌트 추가

apps/web/src/app/page.tsx

@@ -212,7 +212,7 @@ export default function Home() {
         </Breadcrumb>
       </div>
       <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-        <Chip variant="green" leftAddon={<Icon name="circle" type="fill" />}>
+        <Chip variant="green" leftAddon={<Chip.Icon variant="green" />}>
           업로드할 글
         </Chip>
         <Chip variant="grey" leftAddon={<Icon name="circle" type="fill" />}>

packages/ui/src/components/Chip/Chip.tsx

@@ -1,61 +1,9 @@
-import { ComponentPropsWithoutRef, forwardRef, ReactElement } from 'react';
-import { addonRootRecipe, chipCloseButtonRecipe, chipRecipe } from './Chip.css';
-import { Icon } from '../Icon/Icon';
-import { Text } from '../Text/Text';
+import { ChipIcon } from './ChipIcon';
+import { ChipItem } from './ChipItem';
 
-export type ButtonVariant = 'grey' | 'purple' | 'green';
+export const Chip = Object.assign(ChipItem, {
+  Icon: ChipIcon,
+});
 
-export type ChipProps = ComponentPropsWithoutRef<'span'> & {
-  variant: ButtonVariant;
-  leftAddon?: ReactElement;
-  rightAddon?: ReactElement;
-  closable?: boolean;
-  onClose?: () => void;
-};
-
-export const Chip = forwardRef<HTMLSpanElement, ChipProps>(
-  ({
-    className = '',
-    variant,
-    leftAddon,
-    rightAddon,
-    closable = false,
-    children,
-    onClose,
-    ...rest
-  }) => {
-    return (
-      <span className={`${chipRecipe({ variant })} ${className}`} {...rest}>
-        {leftAddon && (
-          <span className={addonRootRecipe({ color: variant })}>
-            {leftAddon}
-          </span>
-        )}
-        <Text fontSize={16} fontWeight="semibold">
-          {children}
-        </Text>
-        {rightAddon && (
-          <span className={addonRootRecipe({ color: variant })}>
-            {rightAddon}
-          </span>
-        )}
-        {closable && (
-          <button
-            type="button"
-            aria-label="Close"
-            className={chipCloseButtonRecipe({ clickable: closable })}
-            onClick={onClose}
-          >
-            <Icon
-              name="x"
-              size="1.6rem"
-              type="stroke"
-              strokeWidth={'0.244rem'}
-              color={`${variant}400`}
-            />
-          </button>
-        )}
-      </span>
-    );
-  }
-);
+export type { ChipProps } from './ChipItem';
+export type { ChipIconProps } from './ChipIcon';

packages/ui/src/components/Chip/ChipIcon.tsx

@@ -0,0 +1,24 @@
+import { ColorsType } from '@repo/theme';
+import { Icon, IconProps } from '../Icon/Icon';
+import { ButtonVariant } from './ChipItem';
+
+export type ChipIconProps = {
+  variant: ButtonVariant;
+  name?: IconProps['name'];
+  type?: IconProps['type'];
+} & Omit<IconProps, 'color' | 'name' | 'type'>;
+
+const color: Record<ButtonVariant, keyof ColorsType> = {
+  grey: 'grey600',
+  purple: 'purple800',
+  green: 'green800',
+};
+
+export function ChipIcon({
+  variant,
+  name = 'circle',
+  type = 'fill',
+  ...rest
+}: ChipIconProps) {
+  return <Icon name={name} type={type} color={color[variant]} {...rest} />;
+}

packages/ui/src/components/Chip/ChipItem.tsx

@@ -0,0 +1,54 @@
+import { ComponentPropsWithoutRef, forwardRef, ReactElement } from 'react';
+import { chipCloseButtonRecipe, chipRecipe } from './Chip.css';
+import { Icon } from '../Icon/Icon';
+import { Text } from '../Text/Text';
+import { isNil } from '../../utils';
+
+export type ButtonVariant = 'grey' | 'purple' | 'green';
+
+export type ChipProps = ComponentPropsWithoutRef<'span'> & {
+  variant: ButtonVariant;
+  leftAddon?: ReactElement;
+  rightAddon?: ReactElement;
+  closable?: boolean;
+  onClose?: () => void;
+};
+
+export const ChipItem = forwardRef<HTMLSpanElement, ChipProps>(
+  ({
+    className = '',
+    variant,
+    leftAddon,
+    rightAddon,
+    closable = false,
+    children,
+    onClose,
+    ...rest
+  }) => {
+    return (
+      <span className={`${chipRecipe({ variant })} ${className}`} {...rest}>
+        {leftAddon}
+        <Text fontSize={16} fontWeight="semibold">
+          {children}
+        </Text>
+        {rightAddon}
+        {isNil(closable) && (
+          <button
+            type="button"
+            aria-label="Close"
+            className={chipCloseButtonRecipe({ clickable: closable })}
+            onClick={onClose}
+          >
+            <Icon
+              name="x"
+              size="1.6rem"
+              type="stroke"
+              strokeWidth={'0.244rem'}
+              color={`${variant}400`}
+            />
+          </button>
+        )}
+      </span>
+    );
+  }
+);

packages/ui/src/components/index.ts

@@ -1,3 +1,4 @@
+import { ChipIcon } from './Chip/ChipIcon';
 export { IconButton } from './IconButton/IconButton';
 export type { IconButtonProps } from './IconButton/IconButton';
 export { Spacing } from './Spacing/Spacing';
@@ -32,7 +33,7 @@ export type {
   TextFieldCounterProps,
 } from './TextField/TextField';
 export { Chip } from './Chip/Chip';
-export type { ChipProps } from './Chip/Chip';
+export type { ChipProps, ChipIconProps } from './Chip/Chip';
 export { RadioCards } from './RadioCards/RadioCards';
 export type {
   RadioCardsProps,