sori.studio/pages/admin/posts/new.vue

<script setup>
definePageMeta({
  layout: 'admin'
})

const saving = ref(false)
const autoSaving = ref(false)
const errorMessage = ref('')
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 - 토스트 타입
 * @param {string} message - 표시 메시지
 * @returns {void}
 */
const showToast = (type, message) => {
  window.clearTimeout(toastTimer)
  toast.value = { type, message }
  toastTimer = window.setTimeout(() => {
    toast.value = null
  }, 3200)
}

/**
 * 저장 오류가 슬러그 중복인지 확인한다.
 * @param {unknown} error - 저장 오류
 * @returns {boolean} 슬러그 중복 오류 여부
 */
const isDuplicateSlugError = (error) => Number(error?.statusCode || error?.status || error?.response?.status) === 409
  && String(error?.data?.message || error?.message || '').includes('슬러그')

/**
 * 새 게시물 미리보기
 * @param {Object} payload - 게시물 입력값
 * @returns {void}
 */
const previewPost = (payload) => {
  localStorage.setItem('SORI_ADMIN_POST_PREVIEW', JSON.stringify({
    ...payload,
    previewedAt: new Date().toISOString()
  }))
  window.open('/admin/posts/preview', '_blank', 'noopener,noreferrer')
}

/**
 * 새 게시물 저장
 * @param {Object} payload - 게시물 입력값
 * @returns {Promise<void>} 저장 결과
 */
const savePost = async (payload) => {
  saving.value = true
  errorMessage.value = ''
  showToast('info', '글을 저장하는 중입니다.')

  try {
    const post = await $fetch('/admin/api/posts', {
      method: 'POST',
      body: 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({
      type: 'success',
      message: '글이 저장되었습니다.'
    }))
    await navigateTo(`/admin/posts/${post.id}`)
  } catch (error) {
    if (isDuplicateSlugError(error)) {
      window.clearTimeout(toastTimer)
      toast.value = null
      errorMessage.value = ''
      postForm.value?.markSlugError('이미 사용 중인 슬러그입니다.')
      return
    }
    errorMessage.value = error?.data?.message || '글을 저장하지 못했습니다.'
    showToast('error', errorMessage.value)
  } finally {
    saving.value = false
  }
}

/**
 * 신규 초안 서버 자동 저장(POST). 성공 시 기본은 편집 URL로 교체 이동, 이탈 플러시 시에는 이동하지 않는다.
 * @param {Object} payload - 게시물 입력값
 * @param {{ skipNavigate?: boolean }} options - `skipNavigate`가 true면 생성만 하고 URL은 바꾸지 않는다.
 * @returns {Promise<boolean>} 저장 성공 여부
 */
const createDraftAutosave = async (payload, options = {}) => {
  const skipNavigate = Boolean(options.skipNavigate)
  if (autoSaving.value) {
    return false
  }

  autoSaving.value = true
  errorMessage.value = ''

  try {
    const post = await $fetch('/admin/api/posts', {
      method: 'POST',
      body: payload
    })

    const savedPayload = await syncLatestDraftAfterCreate(post.id, payload)
    postForm.value?.markSaved(savedPayload)
    postForm.value?.clearAutosave()
    postForm.value?.allowNextRouteLeave()
    if (!skipNavigate) {
      await navigateTo(`/admin/posts/${post.id}`, { replace: true })
    }
    return true
  } catch (error) {
    const msg = error?.data?.message || error?.message || '자동 저장에 실패했습니다.'
    postForm.value?.markAutosaveFailed(payload)
    if (isDuplicateSlugError(error)) {
      window.clearTimeout(toastTimer)
      toast.value = null
      errorMessage.value = ''
      postForm.value?.markSlugError('이미 사용 중인 슬러그입니다.')
      return false
    }
    errorMessage.value = msg
    showToast('error', msg)
    return false
  } finally {
    autoSaving.value = false
  }
}

onBeforeRouteLeave(async () => {
  await nextTick()
  const payload = postForm.value?.takePendingAutosavePayload?.()
  if (!payload) {
    return true
  }
  return createDraftAutosave(payload, { skipNavigate: true })
})

onBeforeUnmount(() => {
  window.clearTimeout(toastTimer)
})
</script>

<template>
  <section class="admin-post-editor bg-white">
    <p v-if="errorMessage" class="admin-post-editor__error mx-6 mt-6 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
      {{ errorMessage }}
    </p>
    <AdminPostForm
      ref="postForm"
      :saving="saving"
      :auto-saving="autoSaving"
      @submit="savePost"
      @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"
      :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>