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

components/admin/AdminMarkdownEditor.vue

@@ -4111,18 +4111,7 @@ const handleKeydown = (event) => {
     </div>
   </div>
 
-  <div
+  <AdminToast :toast="toast" />
-    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>
 </template>
 
 <style scoped>

components/admin/AdminMemberForm.vue

@@ -863,20 +863,7 @@ watch(() => props.member, () => {
       @leave="leaveUnsavedPage"
     />
 
-    <Teleport to="body">
+    <AdminToast :toast="toast" />
-      <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>
 
     <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>

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 | 통계 차트 라벨·페이지네이션·증감 계산 유틸 |
 

docs/update.md

@@ -1,5 +1,10 @@
 # 업데이트 이력
 
+## v1.11.5
+
+- 관리자 토스트 표시 마크업을 공용 `AdminToast` 컴포넌트로 분리.
+- 관리자 화면별 반복 토스트 클래스와 상태 표시 DOM을 `AdminToast` 사용으로 통일.
+
 ## v1.11.4
 
 - 관리자 게시글 목록 행 메뉴를 공용 `AdminRowMoreMenu`와 `useAdminRowMenu` 기준으로 통일.

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",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "1.11.4",
+  "version": "1.11.5",
   "private": true,
   "type": "module",
   "imports": {

pages/admin/media/index.vue

@@ -2080,17 +2080,6 @@ watch(() => mediaPagination.value.page, (page) => {
       </section>
     </div>
 
-    <div
+    <AdminToast :toast="toast" />
-      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>
   </section>
 </template>

pages/admin/navigation/index.vue

@@ -2502,17 +2502,6 @@ const saveNavigation = async () => {
       </section>
     </div>
 
-    <div
+    <AdminToast :toast="toast" />
-      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>
   </section>
 </template>

pages/admin/pages/[id].vue

@@ -114,17 +114,6 @@ onMounted(showStoredToast)
       @submit="savePage"
       @delete="deletePage"
     />
-    <div
+    <AdminToast :toast="toast" />
-      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>
   </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
+    <AdminToast :toast="toast" />
-      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>
   </section>
 </template>

pages/admin/posts/[id].vue

@@ -200,17 +200,6 @@ onMounted(showStoredToast)
       @preview="previewPost"
       @delete="deletePost"
     />
-    <div
+    <AdminToast :toast="toast" />
-      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>
   </section>
 </template>

pages/admin/posts/new.vue

@@ -203,17 +203,6 @@ onBeforeRouteLeave(async () => {
         </p>
       </div>
     </div>
-    <div
+    <AdminToast :toast="toast" />
-      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>
   </section>
 </template>

pages/admin/settings/index.vue

@@ -4088,17 +4088,6 @@ onBeforeUnmount(() => {
     </div>
     </div>
 
-    <div
+    <AdminToast :toast="toast" top-class="top-24 md:top-28" />
-      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>
   </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
+    <AdminToast :toast="toast" />
-      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>
   </section>
 </template>

pages/admin/tags/index.vue

@@ -552,17 +552,6 @@ const deleteGeneralTag = async (tag) => {
       아직 등록된 태그가 없습니다.
     </p>
 
-    <div
+    <AdminToast :toast="toast" />
-      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>
   </section>
 </template>

pages/admin/tags/new.vue

@@ -53,17 +53,6 @@ const saveTag = async (payload) => {
     </p>
     <AdminTagForm submit-label="태그 저장" :saving="saving" @submit="saveTag" />
 
-    <div
+    <AdminToast :toast="toast" />
-      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>
   </section>
 </template>