Button

📁 경로

src/components/Button.tsx

✅ 기본 사용법

import Button from "@/components/Button";

<Button variant="primary" textSize="md" className="px-4 py-2">
  로그인
</Button>

<Button variant="white" disabled className="px-4 py-2">
  비활성
</Button>

⚙️ Props

이름	타입	설명	기본값
variant	"primary" | "white"	버튼 색상 스타일	"primary"
textSize	"lg" | "md" | "sm"	텍스트 크기 및 줄 간격	"md"
fullWidth	boolean	버튼을 부모 너비만큼 꽉 채움	false
disabled	boolean	비활성 스타일 적용	false
className	string	Tailwind 유틸리티 클래스로 추가 스타일 적용	-
기타	HTMLButtonElement의 모든 기본 속성 사용 가능 (onClick, type 등)

🎨 스타일 정의

variant

값	설명
primary	배경: 빨강 (#EA3C12), 텍스트: 흰색
white	배경: 흰색, 테두리: 빨강, 텍스트: 빨강

disabled 상태

조건	적용 클래스
disabled={true}	bg-gray-40 text-white cursor-not-allowed (variant 값에 관계없이 우선 적용)

textSize

값	Tailwind 클래스
lg	text-base font-bold leading-5
md	text-sm font-bold leading-none
sm	text-xs font-normal leading-4

🧪 사용 예시

<div className="p-6 space-y-8 max-w-md mx-auto">
  <h1 className="text-xl font-bold">Button 테스트</h1>

  {/* Variant 테스트 */}
  <div className="space-y-2">
    <p className="text-sm text-gray-500">✅ variant 테스트</p>
    <Button variant="primary" className="px-[136px] py-[14px]">
      Primary 버튼
    </Button>
    <Button variant="white" className="px-[136px] py-[14px]">
      White 버튼
    </Button>
    <Button variant="white" disabled className="px-[136px] py-[14px]">
      Disabled 버튼
    </Button>
  </div>

  {/* Size 테스트 */}
  <div className="space-y-2 space-x-2">
    <p className="text-sm text-gray-500">✅ size 테스트</p>
    <Button textSize="lg" variant="primary" className="px-[136px] py-[14px]">
      Large 버튼
    </Button>
    <Button textSize="md" variant="primary" className="px-[20px] py-[10px]">
      Medium 버튼
    </Button>
    <Button textSize="sm" variant="primary" className="px-[12px] py-[8px]">
      Small 버튼
    </Button>
  </div>

  {/* fullWidth 테스트 */}
  <div className="space-y-2">
    <p className="text-sm text-gray-500">✅ fullWidth 테스트</p>
    <Button fullWidth variant="primary" className="py-4">
      전체 너비 버튼
    </Button>
  </div>

  {/* Custom style 테스트 */}
  <div className="space-y-2">
    <p className="text-sm text-gray-500">✅ 사용자 정의 스타일(className) 테스트</p>
    <Button variant="white" className="w-[200px] h-12 border-4 border-dashed">
      커스텀 버튼
    </Button>
  </div>
</div>

📌 예외 / 주의사항

• variant="disabled"이거나 disabled={true}인 경우, 버튼은 클릭되지 않으며 cursor-not-allowed 스타일이 자동 적용됩니다.

• 반드시 className에 px- / py- 값을 직접 지정해줘야 적절한 패딩이 들어갑니다.

---