Button

Button

버튼 공통 컴포넌트입니다.

---

✅ Props

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  icon?: React.ReactNode;
  variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'filter-white' | 'filter-black';
  padding?: string;
  isActive?: boolean;
  className?: string;
  marginRight?: string;
}

---

🔄 동작 방식

• 버튼은 기본적으로 variant에 따라 스타일이 결정됩니다.
• isActive가 false일 경우 버튼은 disabled 처리되어 클릭이 불가능하며, 스타일도 비활성화 상태로 변경됩니다.
• isActive가 true일 경우 버튼은 활성 상태로 표시되고, variant에 맞는 스타일이 적용됩니다.
• icon prop이 존재하면 버튼 내 아이콘이 텍스트 왼쪽에 함께 렌더링됩니다.
• className으로 추가 스타일링 및 레이아웃 조절이 가능합니다. text color나 gap 등은 유동적인 색 지정이나 추후 반응형을 고려하여 className으로 확장하게끔 설계 하였습니다.

---

🧾 사용 예시

    <Button
      variant="secondary"
      isActive={true}
        icon={
        <img
          src="https://cdn-icons-png.flaticon.com/512/25/25231.png"
          alt="github"
          width={16}
          height={16}
         />
       }
       padding="0.5rem 1.5rem"
       marginRight="0.6rem"
     >
       이미지 아이콘
     </Button>
/>

etc.

2025 06 05 - 반응형 작업을 하다보니 padding을 props로 전달해주는 방식을 사용하면 !important를 사용해서 강제로 css 적용 순위를 올려야 한다고 합니다. 그래서 css를 className으로 관리 하는 방식이 권장 사항이라고 하네요..! 그래서 padding props를 제거 했습니다!