글쓰기 초안 저장 상태 보정

pages/admin/posts/new.vue

@@ -10,6 +10,54 @@ const postForm = ref(null)
 const toast = ref(null)
 let toastTimer = null
 
+/**
+ * 비교용 게시물 입력값을 직렬화한다.
+ * @param {Object|null|undefined} payload - 게시물 입력값
+ * @returns {string} 비교 문자열
+ */
+const serializeComparablePayload = (payload) => {
+  if (!payload) {
+    return ''
+  }
+
+  const { tagNames: _tagNames, ...comparablePayload } = payload
+  return JSON.stringify(comparablePayload)
+}
+
+/**
+ * 두 게시물 입력값이 같은지 확인한다.
+ * @param {Object|null|undefined} left - 첫 번째 입력값
+ * @param {Object|null|undefined} right - 두 번째 입력값
+ * @returns {boolean} 동일 여부
+ */
+const isSameComparablePayload = (left, right) => serializeComparablePayload(left) === serializeComparablePayload(right)
+
+/**
+ * 첫 초안 생성 중 추가 입력된 최신 값을 생성된 게시물에 반영한다.
+ * @param {string} postId - 생성된 게시물 ID
+ * @param {Object} firstPayload - 첫 생성 요청 입력값
+ * @returns {Promise<Object>} 최종 저장 기준 입력값
+ */
+const syncLatestDraftAfterCreate = async (postId, firstPayload) => {
+  let savedPayload = firstPayload
+
+  for (let index = 0; index < 3; index += 1) {
+    const latestPayload = postForm.value?.createPostPayload?.() || savedPayload
+
+    if (isSameComparablePayload(latestPayload, savedPayload)) {
+      return savedPayload
+    }
+
+    await $fetch(`/admin/api/posts/${postId}`, {
+      method: 'PUT',
+      body: latestPayload
+    })
+    savedPayload = latestPayload
+  }
+
+  return savedPayload
+}
+
 /**
  * 저장 상태 토스트 표시
  * @param {'success'|'error'|'info'} type - 토스트 타입
@@ -53,7 +101,8 @@ const savePost = async (payload) => {
       body: payload
     })
 
-    postForm.value?.markSaved(payload)
+    const savedPayload = await syncLatestDraftAfterCreate(post.id, payload)
+    postForm.value?.markSaved(savedPayload)
     postForm.value?.clearAutosave()
     postForm.value?.allowNextRouteLeave()
     sessionStorage.setItem('SORI_ADMIN_POST_TOAST', JSON.stringify({
@@ -90,7 +139,8 @@ const createDraftAutosave = async (payload, options = {}) => {
       body: payload
     })
 
-    postForm.value?.markSaved(payload)
+    const savedPayload = await syncLatestDraftAfterCreate(post.id, payload)
+    postForm.value?.markSaved(savedPayload)
     postForm.value?.clearAutosave()
     postForm.value?.allowNextRouteLeave()
     if (!skipNavigate) {
@@ -133,6 +183,22 @@ onBeforeUnmount(() => {
       @autosave="createDraftAutosave"
       @preview="previewPost"
     />
+    <div
+      v-if="autoSaving"
+      class="admin-post-editor__autosave-overlay fixed inset-0 z-40 flex items-center justify-center bg-white/72 backdrop-blur-[2px]"
+      role="status"
+      aria-live="polite"
+    >
+      <div class="admin-post-editor__autosave-panel w-[min(28rem,calc(100vw-2rem))] rounded-lg border border-line bg-white px-5 py-4 text-center shadow-[0_18px_50px_rgba(15,23,42,0.14)]">
+        <div class="admin-post-editor__autosave-spinner mx-auto size-6 animate-spin rounded-full border-2 border-[#d7dde2] border-t-[#15171a]" aria-hidden="true" />
+        <p class="mt-3 text-sm font-semibold text-ink">
+          초안 저장 공간을 준비하는 중입니다.
+        </p>
+        <p class="mt-1 text-xs leading-5 text-muted">
+          방금 입력한 제목, 본문, 태그, 옵션을 저장한 뒤 편집 화면으로 이어갑니다.
+        </p>
+      </div>
+    </div>
     <div
       v-if="toast"
       class="admin-post-editor__toast fixed right-5 top-5 z-50 rounded border px-4 py-3 text-sm font-semibold shadow-lg"