ShadCN UI 학습기: button 컴포넌트

Button 컴포넌트 실습

ShadCN에서 제공하는 Button 컴포넌트를 활용하여 여러 가지 스타일을 적용해 보았습니다.
또한, 버튼 클릭 시 alert이 뜨도록 이벤트도 추가했습니다.

ShadCN Button 스타일 적용

ShadCN에서 제공하는 Button 컴포넌트는 다양한 variant 속성을 가집니다.
아래와 같은 스타일을 기본적으로 지원합니다.

• Variant 설명
  default 기본 버튼 (배경 있음)
  destructive 경고/삭제 버튼 (빨간색 배경)
  outline 테두리만 있는 버튼
  secondary 보조 버튼 (연한 배경)
  ghost 투명 버튼 (배경 없음)
  link 링크 스타일 버튼

각 버튼은 Tailwind CSS를 활용해 쉽게 커스텀 가능하며, className을 통해 추가적인 스타일을 적용할 수도 있습니다.

'use client';

import { Button } from '@/components/ui/button';

interface ButtonItemProps {
  label: string;
  variant?:
    | 'default'
    | 'destructive'
    | 'outline'
    | 'secondary'
    | 'ghost'
    | 'link';
  className?: string;
}

const ButtonItem = ({
  label,
  variant = 'default',
  className,
}: ButtonItemProps) => {
  const handleClick = () => alert(`${label} 버튼`);

  return (
    <div className="flex flex-col items-center gap-2">
      <span className="text-sm font-semibold">{variant}</span>
      <Button variant={variant} className={className} onClick={handleClick}>
        {label}
      </Button>
    </div>
  );
};

const ButtonPage = () => {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-gray-100 p-8">
      <h1 className="mb-6 text-2xl font-bold">Button Variants</h1>

      <div className="grid w-full max-w-md gap-4">
        <ButtonItem label="디폴트" />
        <ButtonItem label="삭제" variant="destructive" />
        <ButtonItem label="테두리 버튼" variant="outline" />
        <ButtonItem label="보조 버튼" variant="secondary" />
        <ButtonItem label="투명 버튼" variant="ghost" />
        <ButtonItem label="링크 버튼" variant="link" />
        <ButtonItem
          label="커스터마이즈 버튼"
          className="border-2 border-blue-500 bg-blue-400 text-white hover:bg-blue-300"
        />
      </div>
    </div>
  );
};

export default ButtonPage;