관리자 토스트 표시 컴포넌트 공통화

components/admin/AdminToast.vue

@@ -0,0 +1,42 @@
+<script setup>
+const props = defineProps({
+  /** 표시할 토스트 데이터 */
+  toast: {
+    type: Object,
+    default: null
+  },
+  /** 화면별 상단 위치 클래스 */
+  topClass: {
+    type: String,
+    default: 'top-5'
+  }
+})
+
+/**
+ * 토스트 타입별 스타일 클래스를 반환한다.
+ * @param {string} type - 토스트 타입
+ * @returns {string} 스타일 클래스
+ */
+const getToastToneClass = (type) => {
+  if (type === 'success') {
+    return 'border-green-200 bg-green-50 text-green-800'
+  }
+
+  if (type === 'error') {
+    return 'border-red-200 bg-red-50 text-red-800'
+  }
+
+  return 'border-line bg-white text-ink'
+}
+</script>
+
+<template>
+  <div
+    v-if="props.toast"
+    class="admin-toast fixed right-5 z-[100] max-w-[min(24rem,calc(100vw-2.5rem))] rounded border px-4 py-3 text-sm font-semibold shadow-lg"
+    :class="[topClass, getToastToneClass(props.toast.type)]"
+    role="status"
+  >
+    {{ props.toast.message }}
+  </div>
+</template>