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

components/admin/AdminMarkdownEditor.vue

@@ -4111,18 +4111,7 @@ const handleKeydown = (event) => {
     </div>
   </div>
 
-  <div
-    v-if="toast"
-    class="admin-markdown-editor__toast fixed right-5 top-5 z-[100] max-w-[min(24rem,calc(100vw-2.5rem))] rounded border px-4 py-3 text-sm font-semibold shadow-lg"
-    :class="{
-      'border-green-200 bg-green-50 text-green-800': toast.type === 'success',
-      'border-red-200 bg-red-50 text-red-800': toast.type === 'error',
-      'border-[#e3e6e8] bg-white text-[#15171a]': toast.type === 'info'
-    }"
-    role="status"
-  >
-    {{ toast.message }}
-  </div>
+  <AdminToast :toast="toast" />
 </template>
 
 <style scoped>

components/admin/AdminMemberForm.vue

@@ -863,20 +863,7 @@ watch(() => props.member, () => {
       @leave="leaveUnsavedPage"
     />
 
-    <Teleport to="body">
-      <div
-        v-if="toast"
-        class="admin-member-form__toast fixed right-5 top-5 z-[100] max-w-[min(24rem,calc(100vw-2.5rem))] rounded border px-4 py-3 text-sm font-semibold shadow-lg"
-        :class="{
-          'border-green-200 bg-green-50 text-green-800': toast.type === 'success',
-          'border-red-200 bg-red-50 text-red-800': toast.type === 'error',
-          'border-[#e3e6e8] bg-white text-[#15171a]': toast.type === 'info'
-        }"
-        role="status"
-      >
-        {{ toast.message }}
-      </div>
-    </Teleport>
+    <AdminToast :toast="toast" />
 
     <Teleport to="body">
       <div v-if="passwordModalOpen" class="admin-member-form__modal fixed inset-0 z-50 flex items-start justify-center bg-black/35 px-4 pt-10">

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>