Button 컴포넌트 구현

[joyswim]

📝작업 내용

Button 컴포넌트를 구현합니다.

⚠️ gitmessage 수정 "테스트"를 다른 명령어와 통일하여 영어로 표기했습니다. ⚠️ tailwind.config.ts 수정 Button과 관련된 부분만 일부 수정했습니다. 추후 의견 취합 후 나머지 수정 예정입니다. ⚠️ .eslintrc.json rules 추가 /components/index.ts에서 사용되지 않는 import문에 대한 에러가 발생하여 커밋이 안되는 문제가 있습니다. 'no-unused-vars'를 추가해 warn 처리 해두었습니다.

/**
 * @param [variant] - 버튼의 스타일을 결정합니다.
 * @param [size='md'] - 버튼의 사이즈입니다. sm ~ xl값을 가집니다.
 * @param [shape='round'] - 버튼의 형태입니다. 사각형은 'square'를 지정해주세요.
 * @param [className] - TailwindCSS 커스텀 속성을 전달합니다.
 * @param [isDisabled=false] - 버튼의 비활성화 여부입니다.
 * @param [asChild=false] - Link 컴포넌트를 중첩시킬 수 있습니다.
 */

🧪 테스트 코드

``` // page.tsx 'use client' import { Button } from '@/components/Button' export default function Home() { const handleClick = () => { alert('clicked!') } return (

default secondary outline destructive ghost link

sm 버튼 md 버튼 lg 버튼 xl 버튼

disabled square

) } ```

📷스크린샷

✨PR Point

• shadcn/ui를 설치하면 lucide-react가 의존성으로 설치됩니다. Icon 필요할 때 불러서 사용하세요.