미저장 변경 이탈 확인 추가

components/admin/AdminPostForm.vue

@@ -49,6 +49,7 @@ const tagInput = ref('')
 const isTagInputComposing = ref(false)
 const activeMediaPickerTab = ref('upload')
 const selectedMediaPickerUrl = ref('')
+const savedPostSnapshot = ref('')
 
 /**
  * ISO 날짜를 datetime-local 입력값으로 변환
@@ -260,6 +261,14 @@ const createPostPayload = () => {
   }
 }
 
+/**
+ * 현재 게시물 입력값을 문자열로 직렬화한다.
+ * @returns {string} 직렬화된 게시물 입력값
+ */
+const serializePostPayload = () => JSON.stringify(createPostPayload())
+
+const hasUnsavedPostChanges = computed(() => serializePostPayload() !== savedPostSnapshot.value)
+
 /**
  * 자동 저장 데이터 생성
  * @returns {Object} 자동 저장 데이터
@@ -374,6 +383,15 @@ const discardAutosave = () => {
   autosaveStatus.value = ''
 }
 
+const {
+  isUnsavedModalOpen,
+  stayOnUnsavedPage,
+  leaveUnsavedPage,
+  allowNextRouteLeave
+} = useAdminUnsavedChangesGuard(hasUnsavedPostChanges, {
+  onLeaveConfirmed: discardAutosave
+})
+
 /**
  * 미디어 라이브러리 목록 조회
  * @returns {Promise<void>}
@@ -582,9 +600,19 @@ const toggleSettingsPanel = () => {
   isSettingsOpen.value = !isSettingsOpen.value
 }
 
+/**
+ * 현재 입력값을 저장 완료 기준점으로 표시한다.
+ * @returns {void}
+ */
+const markSaved = () => {
+  savedPostSnapshot.value = serializePostPayload()
+}
+
 watch(form, scheduleAutosave, { deep: true })
 
 onMounted(() => {
+  markSaved()
+
   const savedRaw = localStorage.getItem(autosaveKey.value)
 
   if (!savedRaw) {
@@ -610,7 +638,9 @@ onBeforeUnmount(() => {
 })
 
 defineExpose({
-  clearAutosave: discardAutosave
+  clearAutosave: discardAutosave,
+  markSaved,
+  allowNextRouteLeave
 })
 </script>
 
@@ -952,5 +982,10 @@ defineExpose({
         </div>
       </section>
     </div>
+    <AdminUnsavedChangesModal
+      :open="isUnsavedModalOpen"
+      @stay="stayOnUnsavedPage"
+      @leave="leaveUnsavedPage"
+    />
   </form>
 </template>