🎨 Tailwind로 만드는 이미지 버튼 컴포넌트 (선택 테두리 + 커스텀 X버튼 위치)

🎨 Tailwind로 만드는 이미지 버튼 컴포넌트 (선택 테두리 + 커스텀 X버튼 위치)

이번 글에서는 다음 기능을 가진 UI 컴포넌트를 구현하는 기초 지식을 소개합니다.

• 이미지를 표시하는 사각형 버튼
• 클릭 시 선택됨 상태로 전환되며 border 표시
• X 버튼은 오른쪽 상단에 위치하며, 위치는 자유롭게 조정 가능
• 이미지 교체가 가능하도록 props 기반 설계

---

✅ 컴포넌트 구조

React 기준으로 아래와 같은 구조로 구성할 수 있습니다:

💡 핵심 기능

기능	구현 요소
선택 여부	selected prop으로 제어
이미지 경로	imageSrc prop
X 버튼 위치	closeButtonPosition prop (absolute + Tailwind 조합)
클릭 핸들러	onClick, onClose 분리

---

✅ 예제 코드

import React from 'react'
import { X } from 'lucide-react' // X 아이콘 (lucide-react 또는 HeroIcons 사용 가능)

function ImageSelectButton({
  imageSrc,
  selected = false,
  onClick,
  onClose,
  closeButtonPosition = 'top-1 right-1',
}) {
  return (
    <div
      onClick={onClick}
      className={`relative w-20 h-20 rounded-lg flex items-center justify-center
        ${selected ? 'border-4 border-blue-500' : 'border border-transparent'}
        bg-yellow-200 hover:cursor-pointer transition`}
    >
      <img src={imageSrc} alt="선택 아이콘" className="w-10 h-10" />

      {onClose && (
        <button
          onClick={(e) => {
            e.stopPropagation()
            onClose()
          }}
          className={`absolute ${closeButtonPosition} bg-white rounded-full p-1 shadow-md`}
        >
          <X size={12} />
        </button>
      )}
    </div>
  )
}

export default ImageSelectButton

---

🧪 사용 예시

<ImageSelectButton
  imageSrc="/icons/rice.png"
  selected={true}
  onClick={() => console.log('카테고리 선택')}
  onClose={() => console.log('X 클릭됨')}
  closeButtonPosition="top-2 right-2"
/>

---

🎯 마무리

이런 방식으로 컴포넌트를 구성하면 다음과 같은 이점이 있습니다:

• 다양한 이미지를 props로 교체 가능
• 상태에 따라 border 스타일링 변경
• 닫기 버튼의 위치를 Tailwind 클래스 조합으로 자유롭게 설정

앞으로 이 컴포넌트를 기반으로 카테고리 선택 그리드, 삭제 가능한 태그 목록, 커스텀 갤러리 등 다양한 형태로 확장할 수 있습니다.

---

📌 참고

• X 아이콘은 lucide-react 또는 @heroicons/react 패키지를 추천합니다.
• Tailwind의 absolute, top-1, right-1 조합을 활용하면 버튼 위치를 자유롭게 제어할 수 있습니다.