🧩 아이콘과 텍스트가 함께 들어간 커스터마이징 가능한 버튼 만들기 (Tailwind + React)

🧩 아이콘과 텍스트가 함께 들어간 커스터마이징 가능한 버튼 만들기 (Tailwind + React)

이번 글에서는 Tailwind CSS를 기반으로,
아이콘과 텍스트가 함께 표시되고, 색상/폰트/모서리 등을 자유롭게 조절할 수 있는 버튼 컴포넌트를 만들어보겠습니다.

---

📌 목표 디자인

• 아이콘 + 텍스트 수평 정렬
• 배경색, 텍스트색, border-radius 등 커스터마이징 가능
• 클릭 이벤트 핸들링 가능
• 반복 사용이 쉬운 재사용형 구조

---

🧱 ButtonPresets.js (스타일 프리셋)

// src/styles/buttonPresets.js

export const buttonPresets = {
  default: {
    background: 'bg-gray-100',
    textColor: 'text-black',
    font: 'text-sm font-semibold',
    padding: 'px-4 py-2',
    radius: 'rounded-xl',
    iconSize: 'w-5 h-5',
    gap: 'gap-2',
  },
  outline: {
    background: 'bg-white border border-gray-300',
    textColor: 'text-gray-700',
    font: 'text-sm font-medium',
    padding: 'px-3 py-2',
    radius: 'rounded-md',
    iconSize: 'w-4 h-4',
    gap: 'gap-1.5',
  },
}

---

🧩 IconButton.jsx (컴포넌트 구현)

import React from 'react'
import { buttonPresets } from '../styles/buttonPresets'

function IconButton({
  icon,
  label,
  onClick,
  variant = 'default',
  customClass = '',
}) {
  const style = buttonPresets[variant] ?? buttonPresets.default

  return (
    <button
      onClick={onClick}
      className={`
        inline-flex items-center ${style.gap}
        ${style.padding} ${style.background} ${style.textColor} ${style.font} ${style.radius}
        hover:opacity-90 active:scale-95 transition ${customClass}
      `}
    >
      <span className={style.iconSize}>{icon}</span>
      <span>{label}</span>
    </button>
  )
}

export default IconButton

---

🧪 사용 예시 (App.jsx)

import { Pencil, Share2 } from 'lucide-react'
import IconButton from './components/IconButton'

function App() {
  return (
    <div className="flex gap-4 p-6 bg-gray-50">
      <IconButton
        icon={<Pencil />}
        label="수정하기"
        onClick={() => alert('수정 클릭')}
        variant="default"
      />
      <IconButton
        icon={<Share2 />}
        label="공유하기"
        onClick={() => alert('공유 클릭')}
        variant="default"
      />
    </div>
  )
}

아이콘은 lucide-react 또는 @heroicons/react 등 사용 가능
설치: npm install lucide-react

---

💡 확장 아이디어

• 버튼에 disabled 속성 추가
• iconPosition="left" | "right" 으로 아이콘 위치 바꾸기
• 색상 preset을 primary, danger, success 등으로 분리
• 버튼 크기 preset (sm, md, lg) 도입

---

✅ 마무리

이처럼 버튼을 아이콘 + 텍스트 조합으로 만들고,
Tailwind 스타일을 preset으로 관리하면 재사용성과 유지보수가 훨씬 쉬운 구조가 됩니다.

---

📌 다음 글 예고

다음 글에서는 버튼 그룹 구성, 또는 로딩 상태가 있는 버튼 (로딩 스피너 포함) 컴포넌트를 소개할 예정입니다.
필요한 요소가 있다면 댓글로 남겨주세요. 감사합니다 😊