게시물 미리보기 기능 추가

pages/admin/posts/[id].vue

@@ -62,6 +62,20 @@ const showStoredToast = () => {
   }
 }
 
+/**
+ * 게시물 미리보기
+ * @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 - 게시물 입력값
@@ -155,7 +169,7 @@ onBeforeUnmount(() => {
     <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 ref="postForm" :initial-post="post" submit-label="변경 저장" :saving="saving" @submit="savePost" />
+    <AdminPostForm ref="postForm" :initial-post="post" submit-label="변경 저장" :saving="saving" @submit="savePost" @preview="previewPost" />
     <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"

pages/admin/posts/new.vue

@@ -23,6 +23,19 @@ const showToast = (type, message) => {
   }, 3200)
 }
 
+/**
+ * 새 게시물 미리보기
+ * @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 - 게시물 입력값
@@ -71,7 +84,7 @@ onBeforeUnmount(() => {
     <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 ref="postForm" submit-label="글 저장" :saving="saving" @submit="savePost" />
+    <AdminPostForm ref="postForm" submit-label="글 저장" :saving="saving" @submit="savePost" @preview="previewPost" />
     <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"

pages/admin/posts/preview.vue

@@ -0,0 +1,54 @@
+<script setup>
+definePageMeta({
+  layout: 'post'
+})
+
+const previewPost = ref(null)
+const previewError = ref('')
+
+/**
+ * 미리보기 저장 값을 읽어 온다
+ * @returns {void}
+ */
+const loadPreviewPost = () => {
+  const rawPreview = localStorage.getItem('SORI_ADMIN_POST_PREVIEW')
+
+  if (!rawPreview) {
+    previewError.value = '미리보기 데이터가 없습니다.'
+    return
+  }
+
+  try {
+    previewPost.value = JSON.parse(rawPreview)
+  } catch {
+    previewError.value = '미리보기 데이터를 읽지 못했습니다.'
+  }
+}
+
+onMounted(loadPreviewPost)
+</script>
+
+<template>
+  <div class="admin-post-preview">
+    <div class="admin-post-preview__banner mb-5 rounded border border-line bg-white px-4 py-3 text-sm font-semibold text-ink">
+      관리자 미리보기
+    </div>
+
+    <p v-if="previewError" class="admin-post-preview__error rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+      {{ previewError }}
+    </p>
+
+    <ContentRenderer v-else-if="previewPost">
+      <ProseHeaderCard>
+        <p class="post-detail__eyebrow text-sm uppercase text-white/70">
+          PREVIEW
+        </p>
+        <h1 class="post-detail__title mt-3 text-4xl font-semibold leading-tight">
+          {{ previewPost.title || '제목 없음' }}
+        </h1>
+      </ProseHeaderCard>
+
+      <ContentMarkdownRenderer class="post-detail__content" :content="previewPost.content || ''" />
+    </ContentRenderer>
+  </div>
+</template>