페이지 작성 화면을 게시글 작성 화면과 통일 v1.5.2

pages/admin/pages/[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 pageForm = ref(null)
 const toast = ref(null)
 let toastTimer = null
 
@@ -20,6 +21,8 @@ if (!page.value) {
   })
 }
 
+const publicPageUrl = computed(() => page.value?.slug ? `/pages/${page.value.slug}` : '')
+
 /**
  * 저장 상태 토스트 표시
  * @param {'success'|'error'|'info'} type - 토스트 타입
@@ -70,6 +73,7 @@ const savePage = async (payload) => {
     })
 
     page.value = updatedPage
+    pageForm.value?.markSaved()
     showToast('success', '변경 내용이 저장되었습니다.')
   } catch (error) {
     errorMessage.value = error?.data?.message || '페이지를 저장하지 못했습니다.'
@@ -113,38 +117,21 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <section class="admin-page-edit bg-paper p-6">
-    <div class="admin-page-edit__header mb-8 flex items-start justify-between gap-4">
-      <div>
-        <p class="admin-page-edit__eyebrow text-xs font-semibold uppercase text-muted">
-          Pages
-        </p>
-        <h1 class="admin-page-edit__title mt-2 text-3xl font-semibold">
-          페이지 수정
-        </h1>
-      </div>
-      <div class="admin-page-edit__actions flex gap-2">
-        <NuxtLink
-          class="admin-page-edit__view rounded border border-line bg-white px-4 py-2 text-sm font-semibold"
-          :to="`/pages/${page.slug}`"
-          target="_blank"
-        >
-          보기
-        </NuxtLink>
-        <button
-          class="admin-page-edit__delete rounded border border-red-200 bg-white px-4 py-2 text-sm font-semibold text-red-700 disabled:opacity-50"
-          type="button"
-          :disabled="deleting"
-          @click="deletePage"
-        >
-          {{ deleting ? '삭제 중' : '삭제' }}
-        </button>
-      </div>
-    </div>
-    <p v-if="errorMessage" class="admin-page-edit__error mb-5 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+  <section class="admin-page-edit relative bg-white">
+    <p v-if="errorMessage" class="admin-page-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>
-    <AdminPageForm :initial-page="page" submit-label="변경 저장" :saving="saving" @submit="savePage" />
+    <AdminPageForm
+      ref="pageForm"
+      :initial-page="page"
+      :saving="saving"
+      :can-view-page="Boolean(page?.slug)"
+      :public-url="publicPageUrl"
+      :deleting="deleting"
+      show-delete
+      @submit="savePage"
+      @delete="deletePage"
+    />
     <div
       v-if="toast"
       class="admin-page-edit__toast fixed right-5 top-5 z-50 rounded border px-4 py-3 text-sm font-semibold shadow-lg"

pages/admin/pages/new.vue

@@ -5,6 +5,7 @@ definePageMeta({
 
 const saving = ref(false)
 const errorMessage = ref('')
+const pageForm = ref(null)
 const toast = ref(null)
 let toastTimer = null
 
@@ -38,6 +39,7 @@ const savePage = async (payload) => {
       body: payload
     })
 
+    pageForm.value?.markSaved()
     sessionStorage.setItem('SORI_ADMIN_PAGE_TOAST', JSON.stringify({
       type: 'success',
       message: '페이지가 저장되었습니다.'
@@ -57,19 +59,11 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <section class="admin-page-editor bg-paper p-6">
-    <div class="admin-page-editor__header mb-8">
-      <p class="admin-page-editor__eyebrow text-xs font-semibold uppercase text-muted">
-        Pages
-      </p>
-      <h1 class="admin-page-editor__title mt-2 text-3xl font-semibold">
-        새 페이지 작성
-      </h1>
-    </div>
-    <p v-if="errorMessage" class="admin-page-editor__error mb-5 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+  <section class="admin-page-editor bg-white">
+    <p v-if="errorMessage" class="admin-page-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>
-    <AdminPageForm submit-label="페이지 저장" :saving="saving" @submit="savePage" />
+    <AdminPageForm ref="pageForm" :saving="saving" @submit="savePage" />
     <div
       v-if="toast"
       class="admin-page-editor__toast fixed right-5 top-5 z-50 rounded border px-4 py-3 text-sm font-semibold shadow-lg"