sb-front/src/components/ui/IconBtn.vue

<script setup>
// 공통 아이콘 버튼. 텍스트 대신 아이콘으로 액션 표기 (모바일 대응).
// 사용: <IconBtn icon="edit" title="수정" variant="default" @click="..." />
import { computed } from 'vue'

const props = defineProps({
  icon: { type: String, required: true },
  title: { type: String, default: '' },
  variant: { type: String, default: 'default' }, // default | primary | danger | ghost | buy | sell
  size: { type: String, default: 'md' }, // sm | md
  disabled: { type: Boolean, default: false },
  type: { type: String, default: 'button' }, // button | submit
})

// feather 스타일 24x24 stroke 아이콘 path 모음
const ICONS = {
  plus: ['M12 5v14', 'M5 12h14'],
  minus: ['M5 12h14'],
  edit: ['M12 20h9', 'M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'],
  trash: ['M3 6h18', 'M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2', 'M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'],
  check: ['M20 6L9 17l-5-5'],
  close: ['M18 6L6 18', 'M6 6l12 12'],
  search: ['M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z', 'M21 21l-4.35-4.35'],
  chevronLeft: ['M15 18l-6-6 6-6'],
  chevronRight: ['M9 18l6-6-6-6'],
  chevronDown: ['M6 9l6 6 6-6'],
  refresh: ['M23 4v6h-6', 'M1 20v-6h6', 'M3.51 9a9 9 0 0 1 14.85-3.36L23 10', 'M1 14l4.64 4.36A9 9 0 0 0 20.49 15'],
  filter: ['M22 3H2l8 9.46V19l4 2v-8.54L22 3z'],
  menu: ['M3 12h18', 'M3 6h18', 'M3 18h18'],
  list: ['M8 6h13', 'M8 12h13', 'M8 18h13', 'M3 6h.01', 'M3 12h.01', 'M3 18h.01'],
  back: ['M19 12H5', 'M12 19l-7-7 7-7'],
  logout: ['M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4', 'M16 17l5-5-5-5', 'M21 12H9'],
  login: ['M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4', 'M10 17l5-5-5-5', 'M15 12H3'],
  cart: ['M9 22a1 1 0 1 0 0-2 1 1 0 0 0 0 2z', 'M20 22a1 1 0 1 0 0-2 1 1 0 0 0 0 2z', 'M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'],
  send: ['M22 2L11 13', 'M22 2l-7 20-4-9-9-4 20-7z'],
  save: ['M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z', 'M17 21v-8H7v8', 'M7 3v5h8'],
  lock: ['M5 11h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2z', 'M8 11V7a4 4 0 0 1 8 0v4'],
}

const paths = computed(() => ICONS[props.icon] || ICONS.plus)
</script>

<template>
  <button
    :type="type"
    class="icon-btn"
    :class="[`v-${variant}`, `s-${size}`]"
    :title="title"
    :aria-label="title"
    :disabled="disabled"
  >
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path v-for="(d, i) in paths" :key="i" :d="d" />
    </svg>
    <span v-if="$slots.default" class="icon-label"><slot /></span>
  </button>
</template>

<style scoped>
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-background-soft);
  color: var(--color-text);
  cursor: pointer;
  line-height: 0;
}
.icon-btn.s-md svg {
  width: 18px;
  height: 18px;
}
.icon-btn.s-sm {
  padding: 0.3rem;
}
.icon-btn.s-sm svg {
  width: 15px;
  height: 15px;
}
.icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.icon-btn:hover:not(:disabled) {
  border-color: var(--color-border-hover);
}
.icon-label {
  font-size: 0.85rem;
  line-height: 1;
}
.icon-btn.v-primary {
  border-color: hsla(160, 100%, 37%, 1);
  color: hsla(160, 100%, 37%, 1);
}
.icon-btn.v-danger {
  border-color: #c0392b;
  color: #c0392b;
}
.icon-btn.v-buy {
  border-color: #2e7d32;
  color: #2e7d32;
}
.icon-btn.v-sell {
  border-color: #c0392b;
  color: #c0392b;
}
.icon-btn.v-ghost {
  border-color: transparent;
  background: transparent;
}
.icon-btn.v-ghost:hover:not(:disabled) {
  background: var(--color-background-mute);
}
</style>