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

pages/admin/media/index.vue

@@ -2080,17 +2080,6 @@ watch(() => mediaPagination.value.page, (page) => {
       </section>
     </div>
 
-    <div
-      v-if="toast"
-      class="admin-media__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-line bg-white text-ink': toast.type === 'info'
-      }"
-      role="status"
-    >
-      {{ toast.message }}
-    </div>
+    <AdminToast :toast="toast" />
   </section>
 </template>

pages/admin/navigation/index.vue

@@ -2502,17 +2502,6 @@ const saveNavigation = async () => {
       </section>
     </div>
 
-    <div
-      v-if="toast"
-      class="admin-navigation__toast fixed right-5 top-5 z-[100] max-w-sm 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-line bg-white text-ink': toast.type === 'info'
-      }"
-      role="status"
-    >
-      {{ toast.message }}
-    </div>
+    <AdminToast :toast="toast" />
   </section>
 </template>

pages/admin/pages/[id].vue

@@ -114,17 +114,6 @@ onMounted(showStoredToast)
       @submit="savePage"
       @delete="deletePage"
     />
-    <div
-      v-if="toast"
-      class="admin-page-edit__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-line bg-white text-ink': toast.type === 'info'
-      }"
-      role="status"
-    >
-      {{ toast.message }}
-    </div>
+    <AdminToast :toast="toast" />
   </section>
 </template>

pages/admin/pages/new.vue

@@ -47,17 +47,6 @@ const savePage = async (payload) => {
       {{ errorMessage }}
     </p>
     <AdminPageForm ref="pageForm" :saving="saving" @submit="savePage" />
-    <div
-      v-if="toast"
-      class="admin-page-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-line bg-white text-ink': toast.type === 'info'
-      }"
-      role="status"
-    >
-      {{ toast.message }}
-    </div>
+    <AdminToast :toast="toast" />
   </section>
 </template>

pages/admin/posts/[id].vue

@@ -200,17 +200,6 @@ onMounted(showStoredToast)
       @preview="previewPost"
       @delete="deletePost"
     />
-    <div
-      v-if="toast"
-      class="admin-post-edit__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-line bg-white text-ink': toast.type === 'info'
-      }"
-      role="status"
-    >
-      {{ toast.message }}
-    </div>
+    <AdminToast :toast="toast" />
   </section>
 </template>

pages/admin/posts/new.vue

@@ -203,17 +203,6 @@ onBeforeRouteLeave(async () => {
         </p>
       </div>
     </div>
-    <div
-      v-if="toast"
-      class="admin-post-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-line bg-white text-ink': toast.type === 'info'
-      }"
-      role="status"
-    >
-      {{ toast.message }}
-    </div>
+    <AdminToast :toast="toast" />
   </section>
 </template>

pages/admin/settings/index.vue

@@ -4088,17 +4088,6 @@ onBeforeUnmount(() => {
     </div>
     </div>
 
-    <div
-      v-if="toast"
-      class="admin-settings-screen__toast fixed right-5 top-24 z-[100] max-w-[min(24rem,calc(100vw-2.5rem))] rounded-md border px-4 py-3 text-sm font-semibold shadow-lg md:top-28"
-      :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-[#e6e8eb] bg-white text-[#15171a]': toast.type === 'info'
-      }"
-      role="status"
-    >
-      {{ toast.message }}
-    </div>
+    <AdminToast :toast="toast" top-class="top-24 md:top-28" />
   </div>
 </template>

pages/admin/tags/[id].vue

@@ -102,17 +102,6 @@ const deleteTag = async () => {
     </p>
     <AdminTagForm :initial-tag="tag" submit-label="변경 저장" :saving="saving" require-changes @submit="saveTag" />
 
-    <div
-      v-if="toast"
-      class="admin-tag-edit__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-line bg-white text-ink': toast.type === 'info'
-      }"
-      role="status"
-    >
-      {{ toast.message }}
-    </div>
+    <AdminToast :toast="toast" />
   </section>
 </template>

pages/admin/tags/index.vue

@@ -552,17 +552,6 @@ const deleteGeneralTag = async (tag) => {
       아직 등록된 태그가 없습니다.
     </p>
 
-    <div
-      v-if="toast"
-      class="admin-tags__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-line bg-white text-ink': toast.type === 'info'
-      }"
-      role="status"
-    >
-      {{ toast.message }}
-    </div>
+    <AdminToast :toast="toast" />
   </section>
 </template>

pages/admin/tags/new.vue

@@ -53,17 +53,6 @@ const saveTag = async (payload) => {
     </p>
     <AdminTagForm submit-label="태그 저장" :saving="saving" @submit="saveTag" />
 
-    <div
-      v-if="toast"
-      class="admin-tag-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-line bg-white text-ink': toast.type === 'info'
-      }"
-      role="status"
-    >
-      {{ toast.message }}
-    </div>
+    <AdminToast :toast="toast" />
   </section>
 </template>