미저장 변경 이탈 확인 추가

components/admin/AdminUnsavedChangesModal.vue

@@ -0,0 +1,61 @@
+<script setup>
+defineProps({
+  open: {
+    type: Boolean,
+    default: false
+  }
+})
+
+defineEmits(['stay', 'leave'])
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="admin-unsaved-modal fixed inset-0 z-[100] flex items-center justify-center bg-black/40 px-5 py-8"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="admin-unsaved-modal-title"
+    >
+      <div class="admin-unsaved-modal__content relative w-full max-w-[520px] rounded-xl bg-white text-[#15171a] shadow-2xl">
+        <header class="admin-unsaved-modal__header border-b border-[#e3e6e8] px-8 py-6">
+          <h1 id="admin-unsaved-modal-title" class="admin-unsaved-modal__title text-xl font-semibold tracking-[-0.01em]">
+            이 페이지를 떠날까요?
+          </h1>
+        </header>
+        <button
+          class="admin-unsaved-modal__close absolute right-5 top-5 grid size-8 place-items-center rounded-md text-[#4d5663] transition hover:bg-[#eff1f2] hover:text-black"
+          type="button"
+          title="닫기"
+          aria-label="닫기"
+          @click="$emit('stay')"
+        >
+          <svg class="h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M12.707 12L23.854.854a.5.5 0 00-.707-.707L12 11.293.854.146a.5.5 0 00-.707.707L11.293 12 .146 23.146a.5.5 0 00.708.708L12 12.707l11.146 11.146a.5.5 0 10.708-.706L12.707 12z" fill="currentColor" />
+          </svg>
+        </button>
+        <div class="admin-unsaved-modal__body space-y-3 px-8 py-7 text-sm leading-6 text-[#4d5663]">
+          <p>저장하지 않은 변경사항이 있습니다.</p>
+          <p>떠나기 전에 저장해 주세요.</p>
+        </div>
+        <footer class="admin-unsaved-modal__footer flex justify-end gap-3 border-t border-[#e3e6e8] px-8 py-5">
+          <button
+            class="admin-unsaved-modal__stay h-10 rounded-md border border-[#d7dce0] bg-white px-4 text-sm font-semibold text-[#394047] transition hover:bg-[#eff1f2]"
+            type="button"
+            @click="$emit('stay')"
+          >
+            머무르기
+          </button>
+          <button
+            class="admin-unsaved-modal__leave h-10 rounded-md bg-[#e5484d] px-4 text-sm font-semibold text-white transition hover:bg-[#d21a26]"
+            type="button"
+            @click="$emit('leave')"
+          >
+            나가기
+          </button>
+        </footer>
+      </div>
+    </div>
+  </Teleport>
+</template>