Simple Button Design System

shadcn/ui 버튼 컴포넌트만을 사용한 간단한 디자인 시스템입니다.

설치 및 실행

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

컴포넌트

Button

shadcn/ui의 Button 컴포넌트를 사용합니다.

Variants

• default: 기본 버튼
• secondary: 보조 버튼
• destructive: 삭제/위험 액션 버튼
• outline: 테두리만 있는 버튼
• ghost: 투명 배경 버튼
• link: 링크 스타일 버튼

Sizes

• sm: 작은 크기
• default: 기본 크기
• lg: 큰 크기
• icon: 아이콘 전용 크기

사용법

import { Button } from "@/components/ui/button"

// 기본 사용
<Button>Click me</Button>

// 변형과 함께
<Button variant="outline">Outline Button</Button>
<Button variant="destructive">Delete</Button>

// 크기와 함께
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>

기술 스택

• Next.js 14
• React 18
• TypeScript
• Tailwind CSS
• shadcn/ui
• Radix UI