[#41] ✨ 공통 컴포넌트 Chip 개발 (#82)

* [#41] ✨ add label types to team.d.ts and community.d.ts

* [#41] 🚚 move chip components in components directory

* [#41] 🚚 move chip in common/chip

* [#41] 💄 correct few styles along to its label

* [#41] ✅ add Chip story

* [#41] ✅ add chip test codes

* [#41] 🐛 fix twMerge class name merging issues along to the test result

* [#20] 💄 add lineheight and letter spacing to fontPallete

* [#41] 🗑️ remove unused package

* [#41] 💄 roll back default bg text styles to base style

* [#41] ✨ add deletable chip component

* [#41] ✨ add module bridge index.ts

* [#41] 💄 turn ic close svg into currentColor

* [#41] ✅ add deletable story

* [#41] ✅ add deletable test + mock jest with svg

Author: KingNono1030

jest.config.ts

@@ -21,7 +21,8 @@ const config: Config = {
   ],
   testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1',
+    '\\.svg$': '<rootDir>/src/__mocks__/fileMock.js', // SVG 파일을 모킹
+    '^@/(.*)$': '<rootDir>/src/$1', // 다른 경로 매핑
   },
 }
 

src/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub'

src/assets/icons/ic-close.svg

@@ -0,0 +1,67 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+
+import { Chip } from './Chip'
+
+describe('Chip Component', () => {
+  test('renders the Chip component with correct label', () => {
+    // Chip 컴포넌트가 올바른 라벨을 렌더링하는지 확인합니다.
+    render(<Chip label='모집 중' />)
+    const chipElement = screen.getByText(/모집 중/i)
+    expect(chipElement).toBeInTheDocument()
+  })
+
+  test('applies correct styles for each label', () => {
+    // 각 라벨에 대해 올바른 스타일이 적용되는지 확인합니다.
+    const labelStyles = {
+      '모집 중': 'bg-blue-100 text-blue-500',
+      '모집 완료': 'bg-gray-200 text-gray-600',
+      스터디: 'bg-green-100 text-green-500',
+      프로젝트: 'bg-purple-100 text-purple-500',
+      멘토링: 'bg-red-100 text-red-500',
+      기술: 'bg-blue-100 text-blue-500',
+      커리어: 'bg-pink-100 text-pink-500',
+      기타: 'bg-orange-100 text-orange-500',
+    }
+
+    Object.entries(labelStyles).forEach(([label, expectedClasses]) => {
+      render(<Chip label={label} />)
+      const chipElement = screen.getByText(label)
+
+      // expectedClasses에 포함된 각 클래스가 chipElement에 포함되는지 확인합니다.
+      expectedClasses.split(' ').forEach(className => {
+        expect(chipElement).toHaveClass(className)
+      })
+    })
+  })
+
+  test('applies additional className passed as prop', () => {
+    // className prop을 통해 추가된 클래스가 Chip 컴포넌트에 적용되는지 확인합니다.
+    render(<Chip label='기술' className='custom-class' />)
+    const chipElement = screen.getByText(/기술/i)
+    expect(chipElement).toHaveClass('custom-class')
+  })
+
+  test('applies base styles correctly', () => {
+    // 기본 스타일이 Chip 컴포넌트에 올바르게 적용되는지 확인합니다.
+    render(<Chip label='커리어' />)
+    const chipElement = screen.getByText(/커리어/i)
+    expect(chipElement).toHaveClass(
+      'flex',
+      'h-28',
+      'items-center',
+      'justify-center',
+      'rounded-4',
+      'px-6',
+      'text-body3',
+      'font-medium'
+    )
+  })
+
+  test('applies default styles when label is not in styleByLabel', () => {
+    // styleByLabel에 없는 라벨에 대해 기본 스타일이 적용되는지 확인합니다.
+    render(<Chip label='기타 라벨' />)
+    const chipElement = screen.getByText(/기타 라벨/i)
+    expect(chipElement).toHaveClass('bg-gray-200', 'text-gray-500')
+  })
+})

src/components/common/chip/Chip.test.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx'
+
+type ChipProps = {
+  label: string
+  className?: string
+}
+
+const baseStyle =
+  'flex h-28 items-center justify-center rounded-4 bg-gray-200 px-6 text-body3 font-medium text-gray-500'
+
+const styleByLabel: Record<string, string> = {
+  '모집 중': 'bg-blue-100 text-blue-500',
+  '모집 완료': 'bg-gray-200 text-gray-600',
+  스터디: 'bg-green-100 text-green-500',
+  프로젝트: 'bg-purple-100 text-purple-500',
+  멘토링: 'bg-red-100 text-red-500',
+  기술: 'bg-blue-100 text-blue-500',
+  커리어: 'bg-pink-100 text-pink-500',
+  기타: 'bg-orange-100 text-orange-500',
+}
+
+export const Chip = ({ label, className = '' }: ChipProps): JSX.Element => {
+  const labelStyle = styleByLabel[label] || ''
+  const chipStyle = clsx(baseStyle, labelStyle, className)
+  return <span className={chipStyle}>{label}</span>
+}

src/components/common/chip/Chip.tsx

@@ -0,0 +1,62 @@
+import '@testing-library/jest-dom'
+import { fireEvent, render, screen } from '@testing-library/react'
+
+import { DeletableChip } from './DeletableChip'
+
+describe('DeletableChip Component', () => {
+  test('renders the chip with correct label', () => {
+    // 올바른 label이 렌더링되는지 확인합니다.
+    render(<DeletableChip label='스터디' onDelete={() => {}} />)
+    const chipElement = screen.getByText(/스터디/i)
+    expect(chipElement).toBeInTheDocument()
+  })
+
+  test('renders with the default blue color style', () => {
+    // 기본 색상이 blue로 렌더링되는지 확인합니다.
+    render(<DeletableChip label='스터디' onDelete={() => {}} />)
+    const chipElement = screen.getByText(/스터디/i)
+    expect(chipElement).toHaveClass('bg-blue-800', 'text-common-white')
+  })
+
+  test('renders with the gray color style when specified', () => {
+    // gray 색상이 지정되었을 때 올바르게 스타일링되는지 확인합니다.
+    render(<DeletableChip label='스터디' color='gray' onDelete={() => {}} />)
+    const chipElement = screen.getByText(/스터디/i)
+    expect(chipElement).toHaveClass(
+      'border-1',
+      'border-solid',
+      'border-gray-200',
+      'bg-gray-100',
+      'text-gray-700'
+    )
+  })
+
+  test('renders delete button with gray color style when chip color is gray', () => {
+    // chip이 gray일 때 delete 버튼이 gray 스타일을 가지는지 확인합니다.
+    render(<DeletableChip label='스터디' color='gray' onDelete={() => {}} />)
+    const buttonElement = screen.getByRole('button', { name: /스터디 삭제/i })
+    expect(buttonElement).toHaveClass('text-gray-400')
+  })
+
+  test('calls onDelete when delete button is clicked', () => {
+    // 삭제 버튼 클릭 시 onDelete가 호출되는지 확인합니다.
+    const handleDelete = jest.fn()
+    render(<DeletableChip label='스터디' onDelete={handleDelete} />)
+    const buttonElement = screen.getByRole('button', { name: /스터디 삭제/i })
+    fireEvent.click(buttonElement)
+    expect(handleDelete).toHaveBeenCalledTimes(1)
+  })
+
+  test('applies additional className when specified', () => {
+    // 추가된 className이 적용되는지 확인합니다.
+    render(
+      <DeletableChip
+        label='스터디'
+        onDelete={() => {}}
+        className='custom-class'
+      />
+    )
+    const chipElement = screen.getByText(/스터디/i)
+    expect(chipElement).toHaveClass('custom-class')
+  })
+})

src/components/common/chip/DeletableChip.test.tsx

@@ -0,0 +1,42 @@
+import { IcClose } from '@/assets/IconList'
+import clsx from 'clsx'
+
+type Color = 'blue' | 'gray'
+
+type ChipProps = {
+  onDelete: () => void
+  color?: Color
+  label: string
+  className?: string
+}
+
+const baseStyle =
+  'flex h-36 items-center justify-center gap-4 rounded-4 px-8 text-body2 font-medium'
+
+const styleByColor = {
+  blue: 'bg-blue-800 text-common-white',
+  gray: 'border-1 border-solid border-gray-200 bg-gray-100 text-gray-700',
+}
+
+export const DeletableChip = ({
+  onDelete,
+  label,
+  color = 'blue',
+  className = '',
+}: ChipProps): JSX.Element => {
+  const chipStyle = clsx(baseStyle, styleByColor[color], className)
+  const buttonStyle = clsx({ 'text-gray-400': color === 'gray' })
+  return (
+    <span className={chipStyle}>
+      {label}
+      <button
+        onClick={onDelete}
+        className={buttonStyle}
+        type='button'
+        aria-label={`${label} 삭제`}
+      >
+        <IcClose />
+      </button>
+    </span>
+  )
+}

src/components/common/chip/DeletableChip.tsx

@@ -0,0 +1,4 @@
+import { Chip } from './Chip'
+import { DeletableChip } from './DeletableChip'
+
+export { Chip, DeletableChip }

src/components/common/chip/index.ts

@@ -0,0 +1,39 @@
+import { fn } from '@storybook/test'
+
+import { Chip } from '@/components/common/chip'
+
+export default {
+  title: 'Common/Chip/Chip',
+  component: Chip,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['common', 'chip'],
+  argTypes: {
+    label: {
+      control: 'radio',
+      options: [
+        '모집 중',
+        '모집 완료',
+        '스터디',
+        '프로젝트',
+        '멘토링',
+        '기술',
+        '커리어',
+        '기타',
+        '프론트엔드',
+        '#Spring',
+      ],
+      description: '문자열만 받습니다.',
+    },
+  },
+  args: {
+    onClick: fn(),
+  },
+}
+
+export const Default = {
+  args: {
+    label: '스터디',
+  },
+}

src/stories/common/chip/Chip.stories.ts

@@ -0,0 +1,43 @@
+import { fn } from '@storybook/test'
+
+import { DeletableChip } from '@/components/common/chip'
+
+export default {
+  title: 'Common/Chip/DeletableChip',
+  component: DeletableChip,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['common', 'chip', 'deletable'],
+  argTypes: {
+    label: {
+      control: 'radio',
+      options: [
+        'Spring',
+        'ReactNative',
+        'MongoDB',
+        'TypeScript',
+        '프론트엔드',
+        '풀스택',
+        'DevOps 엔지니어',
+      ],
+      description: '문자열만 받습니다.',
+    },
+  },
+  args: {
+    onDelete: fn(),
+  },
+}
+
+export const Default = {
+  args: {
+    label: '스터디',
+  },
+}
+
+export const Gray = {
+  args: {
+    label: '기술',
+    color: 'gray',
+  },
+}