audi/app/components/admin/AdminAlertModal.vue

<template>
  <Transition name="modal-fade">
    <div class="admin--modal-overlay" @click.self="handleClose">
      <div class="admin--modal admin--modal-sm admin--alert-modal">
        <div class="admin--modal-header">
          <h4>{{ title }}</h4>
          <button
            v-if="!hideClose"
            @click="handleClose"
            class="admin--modal-close"
          >&times;</button>
        </div>

        <div class="admin--modal-body">
          <div class="admin--alert-content">
            <p>{{ message }}</p>
          </div>
        </div>

        <div class="admin--modal-footer">
          <button
            v-if="type === 'confirm'"
            @click="handleCancel"
            class="admin--btn-secondary"
          >
            취소
          </button>
          <button
            @click="handleConfirm"
            class="admin--btn-primary"
          >
            확인
          </button>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: '알림'
  },
  message: {
    type: String,
    required: true
  },
  type: {
    type: String,
    default: 'alert', // 'alert' or 'confirm'
    validator: (value) => ['alert', 'confirm'].includes(value)
  },
  hideClose: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['confirm', 'cancel', 'close'])

const handleConfirm = () => {
  emit('confirm')
  emit('close')
}

const handleCancel = () => {
  emit('cancel')
  emit('close')
}

const handleClose = () => {
  if (!props.hideClose) {
    emit('close')
  }
}
</script>