From f1bc980b615f13b888854446ea2ca230ad656ff0 Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Thu, 23 Jul 2026 16:29:19 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B4=80=EB=A6=AC=EC=9E=90=20=ED=86=A0?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=ED=91=9C=EC=8B=9C=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B3=B5=ED=86=B5=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/admin/AdminMarkdownEditor.vue | 13 +-------
 components/admin/AdminMemberForm.vue     | 15 +--------
 components/admin/AdminToast.vue          | 42 ++++++++++++++++++++++++
 docs/map.md                              |  1 +
 docs/update.md                           |  5 +++
 package-lock.json                        |  4 +--
 package.json                             |  2 +-
 pages/admin/media/index.vue              | 13 +-------
 pages/admin/navigation/index.vue         | 13 +-------
 pages/admin/pages/[id].vue               | 13 +-------
 pages/admin/pages/new.vue                | 13 +-------
 pages/admin/posts/[id].vue               | 13 +-------
 pages/admin/posts/new.vue                | 13 +-------
 pages/admin/settings/index.vue           | 13 +-------
 pages/admin/tags/[id].vue                | 13 +-------
 pages/admin/tags/index.vue               | 13 +-------
 pages/admin/tags/new.vue                 | 13 +-------
 17 files changed, 63 insertions(+), 149 deletions(-)
 create mode 100644 components/admin/AdminToast.vue

diff --git a/components/admin/AdminMarkdownEditor.vue b/components/admin/AdminMarkdownEditor.vue
index 99d9f81..aba8b1a 100644
--- a/components/admin/AdminMarkdownEditor.vue
+++ b/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>
diff --git a/components/admin/AdminMemberForm.vue b/components/admin/AdminMemberForm.vue
index 0c713ce..9aee417 100644
--- a/components/admin/AdminMemberForm.vue
+++ b/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">
diff --git a/components/admin/AdminToast.vue b/components/admin/AdminToast.vue
new file mode 100644
index 0000000..f119b3b
--- /dev/null
+++ b/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>
diff --git a/docs/map.md b/docs/map.md
index cf2665c..378e56c 100644
--- a/docs/map.md
+++ b/docs/map.md
@@ -187,6 +187,7 @@
 | components/admin/AdminMemberForm.vue | 관리자 멤버 추가/수정 폼(Ghost형 3분할, 기존 회원 보기/수정 모드 분리, 요약 1fr·입력 2fr, 원형 썸네일 hover 등록·변경·삭제, 기본 정보·레이블·관리자 노트·활동 요약, 설정 메뉴의 비밀번호 변경·멤버 삭제 모달, 저장 토스트, 미저장 변경사항 이탈 확인) |
 | components/admin/AdminUnsavedChangesModal.vue | 관리자 편집 화면 공통 미저장 변경사항 이탈 확인 모달(상단 40px 위치) |
 | components/admin/AdminConfirmModal.vue | 관리자 공통 확인 모달(제목·본문 슬롯·확인/취소 버튼, primary/danger 톤) |
+| components/admin/AdminToast.vue | 관리자 공통 우측 상단 토스트 표시(성공·오류·안내 톤, 화면별 상단 위치 조정) |
 | components/admin/AdminAnalyticsTrendChart.vue | 관리자 통계 추이 막대 차트(축 라벨·증감 툴팁·기간 페이지 이동) |
 | lib/analytics-chart-ui.js | 통계 차트 라벨·페이지네이션·증감 계산 유틸 |
 
diff --git a/docs/update.md b/docs/update.md
index 8a755f4..44098e8 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,10 @@
 # 업데이트 이력
 
+## v1.11.5
+
+- 관리자 토스트 표시 마크업을 공용 `AdminToast` 컴포넌트로 분리.
+- 관리자 화면별 반복 토스트 클래스와 상태 표시 DOM을 `AdminToast` 사용으로 통일.
+
 ## v1.11.4
 
 - 관리자 게시글 목록 행 메뉴를 공용 `AdminRowMoreMenu`와 `useAdminRowMenu` 기준으로 통일.
diff --git a/package-lock.json b/package-lock.json
index d750050..6e5ac43 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "sori.studio",
-  "version": "1.11.4",
+  "version": "1.11.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sori.studio",
-      "version": "1.11.4",
+      "version": "1.11.5",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",
diff --git a/package.json b/package.json
index 34a53c1..8283534 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "1.11.4",
+  "version": "1.11.5",
   "private": true,
   "type": "module",
   "imports": {
diff --git a/pages/admin/media/index.vue b/pages/admin/media/index.vue
index 8227ea0..0f5739c 100644
--- a/pages/admin/media/index.vue
+++ b/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>
diff --git a/pages/admin/navigation/index.vue b/pages/admin/navigation/index.vue
index dc82c6f..8e39ca6 100644
--- a/pages/admin/navigation/index.vue
+++ b/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>
diff --git a/pages/admin/pages/[id].vue b/pages/admin/pages/[id].vue
index 70d6a0f..f7e0d87 100644
--- a/pages/admin/pages/[id].vue
+++ b/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>
diff --git a/pages/admin/pages/new.vue b/pages/admin/pages/new.vue
index 3007989..488ed6c 100644
--- a/pages/admin/pages/new.vue
+++ b/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>
diff --git a/pages/admin/posts/[id].vue b/pages/admin/posts/[id].vue
index baa9b7d..0b5f379 100644
--- a/pages/admin/posts/[id].vue
+++ b/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>
diff --git a/pages/admin/posts/new.vue b/pages/admin/posts/new.vue
index 826541b..e4906c3 100644
--- a/pages/admin/posts/new.vue
+++ b/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>
diff --git a/pages/admin/settings/index.vue b/pages/admin/settings/index.vue
index 27db477..83c622a 100644
--- a/pages/admin/settings/index.vue
+++ b/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>
diff --git a/pages/admin/tags/[id].vue b/pages/admin/tags/[id].vue
index 82393f3..d35b300 100644
--- a/pages/admin/tags/[id].vue
+++ b/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>
diff --git a/pages/admin/tags/index.vue b/pages/admin/tags/index.vue
index e4b8a38..aba9b7e 100644
--- a/pages/admin/tags/index.vue
+++ b/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>
diff --git a/pages/admin/tags/new.vue b/pages/admin/tags/new.vue
index b9c8724..78b017a 100644
--- a/pages/admin/tags/new.vue
+++ b/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>