[#40] ✨ 공통 컴포넌트 Button 개발 (#78)

* [#40] 🌱 initial button commit

* [#20] 💄 add primary-transparent to color palette

* [#40] ✨ add clickable component

* [#40] ✅ add clickable story

* [#40] ✨ add Button component

* [#40] ✅ add Button story

* [#40] ♻️ update interface in Clickable component

* [#40] ✨ add Link component

* [#40] ✨ add common path to components under button directory by adding an index.ts

* [#40] 🗑️ remove example Button components

* [#40] ✅ add Link test code

* [#40] 🔧 exclude assets from test run + delete useless test code

* [#40] ✅ add more test cases with korean comments

Author: KingNono1030

jest.config.ts

@@ -2,21 +2,22 @@ import type { Config } from 'jest'
 
 const config: Config = {
   testEnvironment: 'jsdom',
-  globals: {
-    'ts-jest': {
-      tsconfig: 'tsconfig.jest.json',
-    },
-  },
   transform: {
-    '^.+\\.(ts|tsx)$': 'ts-jest',
+    '^.+\\.(ts|tsx)$': [
+      'ts-jest',
+      {
+        tsconfig: 'tsconfig.jest.json', // 사용할 tsconfig 파일 지정
+      },
+    ],
   },
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
   collectCoverage: true,
   collectCoverageFrom: [
     'src/**/*.{ts,tsx}',
     '!src/**/*.d.ts',
-    '!**/*.stories.{ts,tsx}',
+    '!**/*.stories.{ts,tsx}', // stories 파일 제외
+    '!src/assets/**', // assets 디렉토리 제외
   ],
   testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
   moduleNameMapper: {

src/components/common/Button.test.tsx

@@ -0,0 +1,45 @@
+import '@testing-library/jest-dom'
+import { fireEvent, render, screen } from '@testing-library/react'
+
+import { Button } from './Button'
+
+describe('Button Component', () => {
+  test('renders the Button with the correct label', () => {
+    // 버튼이 올바른 레이블로 렌더링되는지 확인합니다.
+    render(<Button label='Click Me' />)
+    const buttonElement = screen.getByRole('button', { name: /click me/i })
+    expect(buttonElement).toBeInTheDocument()
+  })
+
+  test('calls onClick when the button is clicked', () => {
+    // 버튼이 클릭될 때 onClick 핸들러가 호출되는지 확인합니다.
+    const handleClick = jest.fn()
+    render(<Button label='Click Me' onClick={handleClick} />)
+
+    const buttonElement = screen.getByRole('button', { name: /click me/i })
+    fireEvent.click(buttonElement)
+
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  test('does not call onClick when the button is disabled', () => {
+    // 버튼이 비활성화되었을 때 onClick 핸들러가 호출되지 않는지 확인합니다.
+    const handleClick = jest.fn()
+    render(<Button label='Click Me' onClick={handleClick} disabled />)
+
+    const buttonElement = screen.getByRole('button', { name: /click me/i })
+    fireEvent.click(buttonElement)
+
+    expect(handleClick).not.toHaveBeenCalled()
+  })
+
+  test('passes additional props to the Clickable component', () => {
+    // Button 컴포넌트가 Clickable 컴포넌트에 추가적인 props를 올바르게 전달하는지 확인합니다.
+    render(<Button label='Click Me' variant='outlined' size='lg' />)
+    const clickableElement = screen.getByText(/click me/i)
+
+    expect(clickableElement).toHaveClass('text-primary-normal')
+    expect(clickableElement).toHaveClass('h-48') // "lg" 크기가 h-48 클래스를 적용하는지 확인
+    expect(clickableElement).toHaveClass('border-1') // "outlined" 변형이 border-1 클래스를 적용하는지 확인
+  })
+})

src/components/common/Button.tsx

@@ -0,0 +1,16 @@
+import { Clickable, ClickableProps } from './Clickable'
+
+interface ButtonProps
+  extends ClickableProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const Button = ({
+  onClick,
+  type = 'button',
+  disabled = false,
+  ...props
+}: ButtonProps): JSX.Element => (
+  <button onClick={onClick} type={type} disabled={disabled}>
+    <Clickable {...props} disabled={disabled} />
+  </button>
+)

src/components/common/button/Button.test.tsx

@@ -0,0 +1,100 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+
+import { Clickable, ClickableProps } from './Clickable'
+
+describe('Clickable Component', () => {
+  const defaultProps: ClickableProps = {
+    label: 'Click me',
+  }
+
+  test('renders label correctly', () => {
+    // label이 제대로 렌더링되는지 확인합니다.
+    render(<Clickable {...defaultProps} />)
+    const element = screen.getByText('Click me')
+    expect(element).toBeInTheDocument()
+  })
+
+  test('applies the correct variant class', () => {
+    // variant가 'outlined'일 때 해당 클래스가 제대로 적용되는지 확인합니다.
+    render(<Clickable {...defaultProps} variant='outlined' />)
+    const element = screen.getByText('Click me')
+    expect(element).toHaveClass(
+      'border-1 border-solid border-primary-normal bg-common-white text-primary-normal'
+    )
+  })
+
+  test('applies the correct size class', () => {
+    // size가 'lg'일 때 크기 관련 클래스가 제대로 적용되는지 확인합니다.
+    render(<Clickable {...defaultProps} size='lg' />)
+    const element = screen.getByText('Click me')
+    expect(element).toHaveClass('h-48 px-16')
+  })
+
+  test('applies the fullWidth class when fullWidth is true', () => {
+    // fullWidth가 true일 때 'w-full' 클래스가 적용되는지 확인합니다.
+    render(<Clickable {...defaultProps} fullWidth />)
+    const element = screen.getByText('Click me')
+    expect(element).toHaveClass('w-full')
+  })
+
+  test('applies the leftAlign class when leftAlign is true', () => {
+    // leftAlign이 true일 때 'justify-start' 클래스가 적용되는지 확인합니다.
+    render(<Clickable {...defaultProps} leftAlign />)
+    const element = screen.getByText('Click me')
+    expect(element).toHaveClass('justify-start')
+  })
+
+  test('applies disabled styles when disabled is true', () => {
+    // disabled가 true일 때 비활성화 관련 스타일과 aria-disabled 속성이 적용되는지 확인합니다.
+    render(<Clickable {...defaultProps} disabled />)
+    const element = screen.getByText('Click me')
+    expect(element).toHaveAttribute('aria-disabled', 'true')
+    expect(element).toHaveClass(
+      'aria-disabled:border-0 aria-disabled:bg-gray-100 aria-disabled:text-gray-400 aria-disabled:cursor-not-allowed'
+    )
+  })
+
+  test('renders startIcon and endIcon if provided', () => {
+    // startIcon과 endIcon이 제공되었을 때 각각 렌더링되는지 확인합니다.
+    const StartIcon = () => <span data-testid='start-icon'>Start</span>
+    const EndIcon = () => <span data-testid='end-icon'>End</span>
+    render(
+      <Clickable
+        {...defaultProps}
+        startIcon={<StartIcon />}
+        endIcon={<EndIcon />}
+      />
+    )
+
+    const startIcon = screen.getByTestId('start-icon')
+    const endIcon = screen.getByTestId('end-icon')
+
+    expect(startIcon).toBeInTheDocument()
+    expect(endIcon).toBeInTheDocument()
+  })
+
+  test('applies the correct text color class', () => {
+    // textColor가 'gray400'일 때 텍스트 색상 클래스가 올바르게 적용되는지 확인합니다.
+    render(<Clickable {...defaultProps} textColor='gray400' />)
+    const element = screen.getByText('Click me')
+    expect(element).toHaveClass('text-gray-400')
+  })
+
+  test('applies the correct background color class', () => {
+    // backgroundColor가 'blue'일 때 배경 색상 클래스가 올바르게 적용되는지 확인합니다.
+    render(<Clickable {...defaultProps} backgroundColor='blue' />)
+    const element = screen.getByText('Click me')
+    expect(element).toHaveClass('bg-primary-normal')
+  })
+
+  test('applies the correct border color class', () => {
+    // borderColor가 'gray'이고 variant가 'outlined'일 때 테두리 색상 클래스가 올바르게 적용되는지 확인합니다.
+    render(
+      <Clickable {...defaultProps} variant='outlined' borderColor='gray' />
+    )
+    const element = screen.getByText('Click me')
+    expect(element).toHaveClass('border-gray-200')
+  })
+})

src/components/common/button/Button.tsx

@@ -0,0 +1,108 @@
+import clsx from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export interface ClickableProps {
+  label?: string
+  variant?: Variant
+  size?: Size
+  borderColor?: BorderColor
+  backgroundColor?: BackgroundColor
+  textColor?: TextColor
+  startIcon?: React.ReactElement
+  endIcon?: React.ReactElement
+  fullWidth?: boolean
+  leftAlign?: boolean
+  disabled?: boolean
+  className?: string
+}
+
+type Variant = 'contained' | 'outlined' | 'text'
+type Size = 'sm' | 'md' | 'lg' | 'xl'
+type BorderColor = 'blue' | 'gray'
+type BackgroundColor = 'blue' | 'white' | 'gray' | 'transparentBlue'
+type TextColor = 'blue' | 'white' | 'black' | 'gray400' | 'gray500' | 'gray600'
+
+const baseStyle =
+  'flex items-center justify-center gap-4 rounded-8 text-body1 font-medium'
+
+const disabledStyle =
+  'aria-disabled:border-0 aria-disabled:bg-gray-100 aria-disabled:text-gray-400 aria-disabled:cursor-not-allowed'
+
+const styleByVariant: Record<Variant, string> = {
+  contained: 'bg-primary-normal text-common-white active:bg-primary-strong',
+  outlined:
+    'border-1 border-solid border-primary-normal bg-common-white text-primary-normal',
+  text: 'text-gray-1000',
+}
+
+const styleBySize: Record<Size, string> = {
+  sm: 'h-40 px-12',
+  md: 'h-44 px-16',
+  lg: 'h-48 px-16',
+  xl: 'h-52 px-20',
+}
+
+const styleByBorderColor: Record<BorderColor, string> = {
+  gray: 'border-gray-200',
+  blue: 'border-primary-normal',
+}
+
+const styleByBackgroundColor: Record<BackgroundColor, string> = {
+  blue: 'bg-primary-normal',
+  white: 'bg-common-white',
+  gray: 'bg-gray-100',
+  transparentBlue: 'bg-primary-transparent',
+}
+
+const styleByTextColor: Record<TextColor, string> = {
+  blue: 'text-primary-normal',
+  white: 'text-common-white',
+  black: 'text-common-black',
+  gray400: 'text-gray-400',
+  gray500: 'text-gray-500',
+  gray600: 'text-gray-600',
+}
+
+export const Clickable = ({
+  label = '',
+  variant = 'contained',
+  size = 'md',
+  borderColor,
+  backgroundColor,
+  textColor,
+  startIcon,
+  endIcon,
+  fullWidth = false,
+  leftAlign = false,
+  disabled = false,
+  className = '',
+}: ClickableProps): JSX.Element => {
+  const borderColorClass = borderColor ? styleByBorderColor[borderColor] : ''
+  const backgroundColorClass = backgroundColor
+    ? styleByBackgroundColor[backgroundColor]
+    : ''
+  const textColorClass = textColor ? styleByTextColor[textColor] : ''
+
+  const clickableStyle = twMerge(
+    baseStyle,
+    styleByVariant[variant],
+    styleBySize[size],
+    textColorClass,
+    clsx({
+      [borderColorClass]: variant === 'outlined',
+      [backgroundColorClass]: variant !== 'text',
+      [disabledStyle]: disabled,
+      'w-full': fullWidth,
+      'justify-start': leftAlign,
+    }),
+    className
+  )
+
+  return (
+    <span className={clickableStyle} aria-disabled={disabled}>
+      {startIcon}
+      {label}
+      {endIcon}
+    </span>
+  )
+}

src/components/common/button/Clickable.test.tsx

@@ -0,0 +1,40 @@
+import '@testing-library/jest-dom'
+import { fireEvent, render, screen } from '@testing-library/react'
+
+import { Link } from './Link'
+
+describe('Link Component', () => {
+  test('renders the link with correct href', () => {
+    // 올바른 href 속성을 가진 링크가 렌더링되는지 확인합니다.
+    render(<Link href='/test' label='Test Link' />)
+    const linkElement = screen.getByRole('link', { name: /test link/i })
+    expect(linkElement).toHaveAttribute('href', '/test')
+  })
+
+  test('prevents click when disabled', () => {
+    // disabled 상태일 때 클릭 이벤트가 실행되지 않는지 확인합니다.
+    const handleClick = jest.fn()
+    render(
+      <Link href='/test' label='Disabled Link' disabled onClick={handleClick} />
+    )
+
+    const linkElement = screen.getByRole('link', { name: /disabled link/i })
+    fireEvent.click(linkElement)
+    expect(handleClick).not.toHaveBeenCalled()
+    expect(linkElement).toHaveAttribute('aria-disabled', 'true')
+  })
+
+  test('renders Clickable component with proper props', () => {
+    // Clickable 컴포넌트가 올바른 props와 함께 렌더링되는지 확인합니다.
+    render(<Link href='/test' label='Clickable Test' />)
+    const clickableElement = screen.getByText(/clickable test/i)
+    expect(clickableElement).toBeInTheDocument()
+  })
+
+  test('applies custom className to the Clickable component', () => {
+    // Link 컴포넌트가 전달된 className을 Clickable 컴포넌트에 적용하는지 확인합니다.
+    render(<Link href='/test' label='Styled Link' className='custom-class' />)
+    const clickableElement = screen.getByText(/styled link/i)
+    expect(clickableElement).toHaveClass('custom-class')
+  })
+})