Merge pull request #23 from YAPP-Github/feat/#22

[FEAT] 공통 Chip 컴포넌트 구현

Author: jaeml06

src/shared/ui/chip/Chip.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import Chip from './Chip';
+
+const meta: Meta<typeof Chip> = {
+  title: 'Shared/UI/Chip',
+  component: Chip,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['line', 'fill'],
+      description: '칩의 스타일 변형',
+    },
+    size: {
+      control: 'radio',
+      options: ['xs', 'sm', 'md'],
+      description: '칩의 크기',
+    },
+    selected: {
+      control: 'boolean',
+      description: '선택 여부',
+    },
+    text: {
+      control: 'text',
+      description: '표시할 텍스트',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Chip>;
+
+export const Default: Story = {
+  args: {
+    text: 'Chip',
+    variant: 'line',
+    size: 'xs',
+    selected: false,
+  },
+};
+
+export const LineSelected: Story = {
+  args: {
+    text: 'Selected Line',
+    variant: 'line',
+    size: 'sm',
+    selected: true,
+  },
+};
+
+export const Fill: Story = {
+  args: {
+    text: 'Fill Mode',
+    variant: 'fill',
+    size: 'md',
+    selected: false,
+  },
+};
+
+export const FillSelected: Story = {
+  args: {
+    text: 'Selected Fill',
+    variant: 'fill',
+    size: 'md',
+    selected: true,
+  },
+};
+
+export const AllSizes: Story = {
+  render: (args) => (
+    <div className='flex flex-col gap-4'>
+      <div className='flex items-center gap-2'>
+        <span className='w-10 text-xs text-gray-500'>XS:</span>
+        <Chip {...args} size='xs' />
+      </div>
+      <div className='flex items-center gap-2'>
+        <span className='w-10 text-xs text-gray-500'>SM:</span>
+        <Chip {...args} size='sm' />
+      </div>
+      <div className='flex items-center gap-2'>
+        <span className='w-10 text-xs text-gray-500'>MD:</span>
+        <Chip {...args} size='md' />
+      </div>
+    </div>
+  ),
+  args: {
+    text: 'Chip Size',
+    variant: 'line',
+    selected: false,
+  },
+};

src/shared/ui/chip/Chip.tsx

@@ -0,0 +1,80 @@
+import { ButtonHTMLAttributes } from 'react';
+
+export type ChipVariant = 'line' | 'fill';
+export type ChipSize = 'xs' | 'sm' | 'md';
+
+interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * 칩 내부에 들어갈 텍스트입니다. children이 있으면 children이 우선됩니다.
+   */
+  text?: string;
+  /**
+   * 칩의 스타일 변형입니다. 'line' 또는 'fill'을 선택할 수 있습니다.
+   * @default 'line'
+   */
+  variant?: ChipVariant;
+  /**
+   * 칩의 크기입니다. 'xs', 'sm', 'md' 중 선택할 수 있습니다.
+   * @default 'xs'
+   */
+  size?: ChipSize;
+  /**
+   * 칩의 선택 여부입니다. true일 경우 선택된 스타일이 적용됩니다.
+   * @default false
+   */
+  selected?: boolean;
+}
+
+export default function Chip({
+  children,
+  text = 'chip',
+  variant = 'line',
+  size = 'xs',
+  selected = false,
+  className,
+  ...props
+}: ChipProps) {
+  // 기본 스타일
+  const baseStyles =
+    'relative flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap rounded border transition-colors';
+
+  // 크기별 스타일 (Height, Padding, Typography)
+  const sizeStyles = {
+    xs: 'text-caption-7 h-6 px-2',
+    sm: 'text-body-5 h-7 px-2.5',
+    md: 'text-body-4 h-8 px-3',
+  };
+
+  // 변형(Variant) 및 선택(Selected) 상태에 따른 색상 스타일
+  let colorStyles = '';
+
+  if (variant === 'line') {
+    if (selected) {
+      colorStyles =
+        'bg-blue-10 border-primary-default text-primary-default hover:bg-blue-30';
+    } else {
+      colorStyles =
+        'bg-gray-0 border-line-nonclickable text-text-secondary hover:text-text-primary hover:bg-gray-50';
+    }
+  } else {
+    // Fill
+    if (selected) {
+      // Hover brightness for 'main color' effect
+      colorStyles =
+        'bg-primary-default border-transparent text-text-inverse hover:brightness-95';
+    } else {
+      colorStyles =
+        'bg-gray-100 border-transparent text-text-secondary hover:text-text-primary hover:bg-gray-200';
+    }
+  }
+
+  return (
+    <button
+      type='button'
+      className={`${baseStyles} ${sizeStyles[size]} ${colorStyles} ${className || ''}`}
+      {...props}
+    >
+      {children || text}
+    </button>
+  );
+}

src/shared/ui/chip/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Chip';
+export * from './Chip';