sori.studio/pages/admin/posts/[id].vue

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

const route = useRoute()
const id = computed(() => String(route.params.id || ''))
const saving = ref(false)
const autoSaving = ref(false)
const deleting = ref(false)
const errorMessage = ref('')
const postForm = ref(null)
const toast = ref(null)
let toastTimer = null

const { data: post } = await useFetch(() => `/admin/api/posts/${id.value}`)

if (!post.value) {
  throw createError({
    statusCode: 404,
    statusMessage: '게시물을 찾을 수 없습니다.'
  })
}

/**
 * 공개 화면에서 접근 가능한 게시물 여부 확인
 * @param {Object} value - 게시물
 * @returns {boolean} 공개 접근 가능 여부
 */
const isPublicPost = (value) => value?.status === 'published'
  && (!value.publishedAt || new Date(value.publishedAt) <= new Date())

const publicPostUrl = computed(() => post.value?.slug ? `/post/${post.value.slug}` : '')

/**
 * 저장 상태 토스트 표시
 * @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('슬러그')

/**
 * 이전 화면에서 전달한 토스트 표시
 * @returns {void}
 */
const showStoredToast = () => {
  const storedToast = sessionStorage.getItem('SORI_ADMIN_POST_TOAST')

  if (!storedToast) {
    return
  }

  try {
    const parsedToast = JSON.parse(storedToast)
    showToast(parsedToast.type || 'success', parsedToast.message || '저장되었습니다.')
  } finally {
    sessionStorage.removeItem('SORI_ADMIN_POST_TOAST')
  }
}

/**
 * 게시물 미리보기
 * @param {Object} payload - 게시물 입력값
 * @returns {void}
 */
const previewPost = (payload) => {
  localStorage.setItem('SORI_ADMIN_POST_PREVIEW', JSON.stringify({
    ...payload,
    id: id.value,
    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 updatedPost = await $fetch(`/admin/api/posts/${id.value}`, {
      method: 'PUT',
      body: payload
    })

    post.value = updatedPost
    postForm.value?.markSaved(payload)
    postForm.value?.clearAutosave()
    showToast('success', '변경 내용이 저장되었습니다.')
  } 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
  }
}

/**
 * 초안 자동 저장(디바운스 PUT) — 발행·예약 글에는 사용하지 않는다.
 * @param {Object} payload - `createPostPayload`와 동일 구조
 * @returns {Promise<boolean>} 저장 성공 여부
 */
const autosaveDraftPost = async (payload) => {
  if (!id.value || autoSaving.value) {
    return false
  }

  autoSaving.value = true
  try {
    const updatedPost = await $fetch(`/admin/api/posts/${id.value}`, {
      method: 'PUT',
      body: payload
    })

    post.value = updatedPost
    postForm.value?.markSaved(payload)
    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
    }
    showToast('error', msg)
    return false
  } finally {
    autoSaving.value = false
  }
}

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

/**
 * 게시물 삭제
 * @returns {Promise<void>} 삭제 처리 결과
 */
const deletePost = async () => {
  if (!confirm(`"${post.value.title}" 글을 삭제할까요?`)) {
    return
  }

  deleting.value = true
  errorMessage.value = ''
  showToast('info', '글을 삭제하는 중입니다.')

  try {
    await $fetch(`/admin/api/posts/${id.value}`, {
      method: 'DELETE'
    })
    postForm.value?.allowNextRouteLeave()
    await navigateTo('/admin/posts')
  } catch (error) {
    errorMessage.value = error?.data?.message || '글을 삭제하지 못했습니다.'
    showToast('error', errorMessage.value)
  } finally {
    deleting.value = false
  }
}

onMounted(showStoredToast)

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

<template>
  <section class="admin-post-edit relative bg-white">
    <p v-if="errorMessage" class="admin-post-edit__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"
      :initial-post="post"
      :saving="saving"
      :auto-saving="autoSaving"
      :can-view-post="isPublicPost(post)"
      :public-url="publicPostUrl"
      :deleting="deleting"
      show-delete
      @submit="savePost"
      @autosave="autosaveDraftPost"
      @preview="previewPost"
      @delete="deletePost"
    />
    <div
      v-if="toast"
      class="admin-post-edit__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>