[TECH-QA] class-variance-authority 라이브러리

import { cva } from 'class-variance-authority';

// CVA로 버튼 스타일 변형 정의
const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md font-medium', // 기본 스타일
  {
   variants: {
       intent: {
       primary: 'bg-blue-500 text-white hover:bg-blue-600',
       secondary: 'bg-gray-500 text-white hover:bg-gray-600',
       danger: 'bg-red-500 text-white hover:bg-red-600',
   },
   size: {
       small: 'px-2 py-1 text-sm',
       medium: 'px-4 py-2 text-base',
       large: 'px-6 py-3 text-lg',
      },
   },
   defaultVariants: {
   	intent: 'primary',
   	size: 'medium',
      },
   }
);

// React 컴포넌트에서 사용
interface ButtonProps {
  intent?: 'primary' | 'secondary' | 'danger';
  size?: 'small' | 'medium' | 'large';
  children: React.ReactNode;
}

const Button = ({ intent, size, children }: ButtonProps) => {
  return (
    <button className={buttonVariants({ intent, size })}>
      {children}
    </button>
  );
};

// 사용 예시
const App = () => (
 <div>
   <Button intent="primary" size="small">Primary Small</Button>
   <Button intent="secondary" size="medium">Secondary Medium</Button>
   <Button intent="danger" size="large">Danger Large</Button>
   <Button>Default Button</Button> {/* 기본값: primary, medium */}
 </div>
);

export default App;