글쓰기 로컬 자동 저장 추가

2026-05-02 10:35:28 +09:00
parent 6bc697bd95
commit 722e027f18
10 changed files with 223 additions and 21 deletions
--- a/components/admin/AdminPostForm.vue
+++ b/components/admin/AdminPostForm.vue
@@ -16,12 +16,17 @@ const props = defineProps({

 const emit = defineEmits(['submit'])

+const autosaveStoragePrefix = 'SORI_ADMIN_POST_AUTOSAVE'
 const slugTouched = ref(Boolean(props.initialPost.slug))
 const blockEditor = ref(null)
 const mediaItems = ref([])
 const isMediaPickerOpen = ref(false)
 const isLoadingMedia = ref(false)
 const isUploadingFeaturedImage = ref(false)
+const autosaveTimer = ref(null)
+const autosaveNotice = ref(null)
+const autosaveStatus = ref('')
+const isRestoringAutosave = ref(false)

 const form = reactive({
  title: props.initialPost.title || '',
@@ -33,6 +38,8 @@ const form = reactive({
  tagsText: props.initialPost.tags?.join(', ') || ''
 })

+const autosaveKey = computed(() => `${autosaveStoragePrefix}:${props.initialPost.id || 'new'}`)
+
 /**
 * 문자열을 URL 슬러그로 변환
 * @param {string} value - 원본 문자열
@@ -71,6 +78,139 @@ const parseTags = (value) => [...new Set(value
  .map((tag) => toSlug(tag))
  .filter(Boolean))]

+/**
+ * 게시물 입력값 생성
+ * @returns {Object} 게시물 입력값
+ */
+const createPostPayload = () => {
+  const publishedAt = form.status === 'published'
+    ? props.initialPost.publishedAt || new Date().toISOString()
+    : null
+
+  return {
+    title: form.title.trim(),
+    slug: toSlug(form.slug || form.title),
+    excerpt: form.excerpt.trim(),
+    content: form.content,
+    featuredImage: form.featuredImage.trim() || null,
+    status: form.status,
+    publishedAt,
+    tags: parseTags(form.tagsText)
+  }
+}
+
+/**
+ * 자동 저장 데이터 생성
+ * @returns {Object} 자동 저장 데이터
+ */
+const createAutosavePayload = () => ({
+  title: form.title,
+  slug: form.slug,
+  excerpt: form.excerpt,
+  content: form.content,
+  featuredImage: form.featuredImage,
+  status: form.status,
+  tagsText: form.tagsText
+})
+
+/**
+ * 자동 저장 데이터가 비어 있는지 확인
+ * @param {Object} payload - 자동 저장 데이터
+ * @returns {boolean} 비어 있는지 여부
+ */
+const isEmptyAutosavePayload = (payload) => ![
+  payload.title,
+  payload.slug,
+  payload.excerpt,
+  payload.content,
+  payload.featuredImage,
+  payload.tagsText
+].some((value) => String(value || '').trim())
+
+/**
+ * 자동 저장 시각 표시 문자열 반환
+ * @param {number} savedAt - 저장 시각
+ * @returns {string} 표시 문자열
+ */
+const formatAutosaveTime = (savedAt) => new Intl.DateTimeFormat('ko-KR', {
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit'
+}).format(new Date(savedAt))
+
+/**
+ * 자동 저장본을 로컬 저장소에 기록
+ * @returns {void}
+ */
+const saveAutosave = () => {
+  if (!import.meta.client || isRestoringAutosave.value) {
+    return
+  }
+
+  const payload = createAutosavePayload()
+
+  if (isEmptyAutosavePayload(payload)) {
+    localStorage.removeItem(autosaveKey.value)
+    autosaveStatus.value = ''
+    return
+  }
+
+  const savedAt = Date.now()
+  localStorage.setItem(autosaveKey.value, JSON.stringify({
+    savedAt,
+    payload
+  }))
+  autosaveStatus.value = `${formatAutosaveTime(savedAt)} 자동 저장됨`
+}
+
+/**
+ * 자동 저장 예약
+ * @returns {void}
+ */
+const scheduleAutosave = () => {
+  if (!import.meta.client || isRestoringAutosave.value) {
+    return
+  }
+
+  window.clearTimeout(autosaveTimer.value)
+  autosaveTimer.value = window.setTimeout(saveAutosave, 900)
+}
+
+/**
+ * 자동 저장본을 입력 폼에 복원
+ * @returns {void}
+ */
+const restoreAutosave = () => {
+  if (!autosaveNotice.value?.payload) {
+    return
+  }
+
+  isRestoringAutosave.value = true
+  Object.assign(form, autosaveNotice.value.payload)
+  slugTouched.value = Boolean(form.slug)
+  autosaveStatus.value = `${formatAutosaveTime(autosaveNotice.value.savedAt)} 자동 저장본 복원됨`
+  autosaveNotice.value = null
+
+  nextTick(() => {
+    isRestoringAutosave.value = false
+    scheduleAutosave()
+  })
+}
+
+/**
+ * 자동 저장본을 삭제
+ * @returns {void}
+ */
+const discardAutosave = () => {
+  if (!import.meta.client) {
+    return
+  }
+
+  localStorage.removeItem(autosaveKey.value)
+  autosaveNotice.value = null
+  autosaveStatus.value = ''
+}
+
 /**
 * 미디어 라이브러리 목록 조회
 * @returns {Promise<void>}
@@ -161,21 +301,39 @@ const focusContentEditor = () => {
 * @returns {void}
 */
 const submitPost = () => {
-  const publishedAt = form.status === 'published'
-    ? props.initialPost.publishedAt || new Date().toISOString()
-    : null
-
-  emit('submit', {
-    title: form.title.trim(),
-    slug: toSlug(form.slug || form.title),
-    excerpt: form.excerpt.trim(),
-    content: form.content,
-    featuredImage: form.featuredImage.trim() || null,
-    status: form.status,
-    publishedAt,
-    tags: parseTags(form.tagsText)
-  })
+  emit('submit', createPostPayload())
 }
+
+watch(form, scheduleAutosave, { deep: true })
+
+onMounted(() => {
+  const savedRaw = localStorage.getItem(autosaveKey.value)
+
+  if (!savedRaw) {
+    return
+  }
+
+  try {
+    const saved = JSON.parse(savedRaw)
+
+    if (saved?.payload && !isEmptyAutosavePayload(saved.payload)) {
+      autosaveNotice.value = saved
+      autosaveStatus.value = `${formatAutosaveTime(saved.savedAt)} 자동 저장본 있음`
+    }
+  } catch {
+    localStorage.removeItem(autosaveKey.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (import.meta.client) {
+    window.clearTimeout(autosaveTimer.value)
+  }
+})
+
+defineExpose({
+  clearAutosave: discardAutosave
+})
 </script>

 <template>
@@ -191,6 +349,23 @@ const submitPost = () => {
          @keydown.enter.prevent="focusContentEditor"
        >

+        <div
+          v-if="autosaveNotice"
+          class="admin-post-form__autosave-notice flex flex-wrap items-center justify-between gap-3 rounded border border-line bg-surface px-4 py-3 text-sm"
+        >
+          <p class="admin-post-form__autosave-message text-muted">
+            {{ formatAutosaveTime(autosaveNotice.savedAt) }}에 저장된 작성 중 내용이 있습니다.
+          </p>
+          <div class="admin-post-form__autosave-actions flex gap-2">
+            <button class="admin-post-form__autosave-restore rounded bg-[#15171a] px-3 py-1.5 text-xs font-semibold text-white" type="button" @click="restoreAutosave">
+              복원
+            </button>
+            <button class="admin-post-form__autosave-discard rounded border border-line bg-white px-3 py-1.5 text-xs font-semibold" type="button" @click="discardAutosave">
+              삭제
+            </button>
+          </div>
+        </div>
+
        <div class="admin-post-form__field grid gap-2 text-sm">
          <AdminBlockEditor ref="blockEditor" v-model="form.content" />
        </div>
@@ -271,6 +446,9 @@ const submitPost = () => {
    </div>

    <div class="admin-post-form__actions flex justify-end gap-3 border-t border-line pt-5">
+      <p v-if="autosaveStatus" class="admin-post-form__autosave-status mr-auto self-center text-xs text-muted">
+        {{ autosaveStatus }}
+      </p>
      <NuxtLink class="admin-post-form__cancel rounded border border-line bg-white px-4 py-2 text-sm font-semibold" to="/admin/posts">
        취소
      </NuxtLink>
--- a/docs/history.md
+++ b/docs/history.md
@@ -1,5 +1,13 @@
 # 의사결정 이력

+## 2026-05-02 v0.0.21
+
+### 글 작성 중 자동 저장 범위 결정
+
+글 작성 중 자동 저장은 1차로 브라우저 `localStorage`에 보존한다. 저장 버튼을 누르기 전까지 서버에 게시물을 생성하지 않으면, 의도하지 않은 초안이 DB에 쌓이거나 슬러그 충돌이 발생하는 일을 피할 수 있기 때문이다.
+
+자동 저장본은 새 글과 기존 글을 서로 다른 키로 분리한다. 작성 화면에 다시 들어왔을 때는 자동으로 덮어쓰지 않고 복원/삭제 선택지를 보여준다. 명시적인 저장이 성공하면 해당 자동 저장본을 삭제해 저장 완료 후 오래된 내용이 다시 나타나지 않도록 한다.
+
 ## 2026-05-02 v0.0.20

 ### 콜아웃, 토글, 임베드 블록 저장 방식 결정
--- a/docs/map.md
+++ b/docs/map.md
@@ -26,7 +26,7 @@

 | 파일 | 화면 위치 |
 |------|-----------|
-| components/admin/AdminPostForm.vue | 관리자 글 작성/수정 폼, 대표 이미지 선택 |
+| components/admin/AdminPostForm.vue | 관리자 글 작성/수정 폼, 대표 이미지 선택, 로컬 자동 저장 |
 | components/admin/AdminBlockEditor.vue | 관리자 글 블록형 에디터, 이미지/갤러리/콜아웃/토글/임베드 블록, 한글 조합 입력 처리 |
 | components/admin/AdminTagForm.vue | 관리자 태그 생성/수정 폼 |

--- a/docs/spec.md
+++ b/docs/spec.md
@@ -227,6 +227,10 @@ components/content/
 - 제목은 별도 라벨 영역이 아니라 에디터 상단의 큰 제목 입력으로 표시한다.
 - 제목 입력에서 Enter를 누르면 본문 첫 블록으로 포커스를 이동한다.
 - 새 글 작성처럼 본문이 비어 있는 경우에도 빈 문단 블록을 먼저 생성한다.
+- 글 작성/수정 중인 입력값은 브라우저 `localStorage`에 자동 저장한다.
+- 자동 저장 키는 `SORI_ADMIN_POST_AUTOSAVE:new` 또는 `SORI_ADMIN_POST_AUTOSAVE:{postId}` 형식을 사용한다.
+- 자동 저장본이 있으면 작성 화면에서 복원 또는 삭제를 선택할 수 있다.
+- 글 저장 성공 시 해당 자동 저장본은 삭제한다.
 - 관리자 글 에디터의 실제 입력 텍스트 색상은 placeholder보다 진하게 표시한다.
 - 관리자 작성 화면과 공개 본문은 같은 마크다운 렌더링 기준을 사용한다.
 - 대표 이미지는 URL 직접 입력이 아니라 미디어 선택 또는 새 이미지 업로드로 설정한다.
--- a/docs/todo.md
+++ b/docs/todo.md
@@ -10,7 +10,7 @@
 - [ ] 대표 이미지 브라우저 수동 QA: 기존 미디어 선택, 새 업로드, 썸네일 표시, 삭제/변경 확인
 - [ ] 미디어 라이브러리 상세 모달 수동 QA: 검색, 사용 현황, 파일명 변경, 삭제 잠금 확인
 - [ ] 콜아웃, 토글, 임베드 블록 브라우저 수동 QA: `/` 메뉴 선택, 저장/수정 왕복, 공개 렌더링 확인
- [ ] 글 작성 중 자동 저장
+- [ ] 글 작성 중 자동 저장 브라우저 수동 QA: 새 글/수정 글 복원, 저장 성공 후 삭제, 빈 글 자동 저장 삭제 확인

 ## 2차 관리자 개발

--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,13 @@
 # 업데이트 이력

+## v0.0.21
+
+- 관리자 글 작성/수정 폼에 로컬 자동 저장 기능 추가.
+- 자동 저장본이 있으면 복원 또는 삭제 안내를 표시하도록 추가.
+- 글 저장 성공 시 해당 자동 저장본을 삭제하도록 연결.
+- 자동 저장 상태 시간을 글 작성 화면 하단에 표시하도록 추가.
+- 패키지 버전을 0.0.21로 갱신.
+
 ## v0.0.20

 - 관리자 블록 에디터에 콜아웃 블록 추가.
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "sori.studio",
-  "version": "0.0.20",
+  "version": "0.0.21",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sori.studio",
-      "version": "0.0.20",
+      "version": "0.0.21",
      "hasInstallScript": true,
      "dependencies": {
        "@nuxtjs/tailwindcss": "^6.14.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "sori.studio",
-  "version": "0.0.20",
+  "version": "0.0.21",
  "private": true,
  "type": "module",
  "scripts": {
--- a/pages/admin/posts/[id].vue
+++ b/pages/admin/posts/[id].vue
@@ -8,6 +8,7 @@ const id = computed(() => String(route.params.id || ''))
 const saving = ref(false)
 const deleting = ref(false)
 const errorMessage = ref('')
+const postForm = ref(null)

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

@@ -34,6 +35,7 @@ const savePost = async (payload) => {
    })

    post.value = updatedPost
+    postForm.value?.clearAutosave()
  } catch (error) {
    errorMessage.value = error?.data?.message || '글을 저장하지 못했습니다.'
  } finally {
@@ -99,6 +101,6 @@ const deletePost = async () => {
    <p v-if="errorMessage" class="admin-post-edit__error mb-5 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
      {{ errorMessage }}
    </p>
-    <AdminPostForm :initial-post="post" submit-label="변경 저장" :saving="saving" @submit="savePost" />
+    <AdminPostForm ref="postForm" :initial-post="post" submit-label="변경 저장" :saving="saving" @submit="savePost" />
  </section>
 </template>
--- a/pages/admin/posts/new.vue
+++ b/pages/admin/posts/new.vue
@@ -5,6 +5,7 @@ definePageMeta({

 const saving = ref(false)
 const errorMessage = ref('')
+const postForm = ref(null)

 /**
 * 새 게시물 저장
@@ -21,6 +22,7 @@ const savePost = async (payload) => {
      body: payload
    })

+    postForm.value?.clearAutosave()
    await navigateTo(`/admin/posts/${post.id}`)
  } catch (error) {
    errorMessage.value = error?.data?.message || '글을 저장하지 못했습니다.'
@@ -43,6 +45,6 @@ const savePost = async (payload) => {
    <p v-if="errorMessage" class="admin-post-editor__error mb-5 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
      {{ errorMessage }}
    </p>
-    <AdminPostForm submit-label="글 저장" :saving="saving" @submit="savePost" />
+    <AdminPostForm ref="postForm" submit-label="글 저장" :saving="saving" @submit="savePost" />
  </section>
 </template>