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

2026-05-26 11:18:44 +09:00
parent a25306389b
commit 62ceaa3591
11 changed files with 357 additions and 170 deletions
--- a/components/admin/AdminPageForm.vue
+++ b/components/admin/AdminPageForm.vue
@@ -4,25 +4,40 @@ const props = defineProps({
    type: Object,
    default: () => ({})
  },
-  submitLabel: {
-    type: String,
-    default: '저장'
-  },
  saving: {
    type: Boolean,
    default: false
+  },
+  deleting: {
+    type: Boolean,
+    default: false
+  },
+  canViewPage: {
+    type: Boolean,
+    default: false
+  },
+  publicUrl: {
+    type: String,
+    default: ''
+  },
+  showDelete: {
+    type: Boolean,
+    default: false
  }
 })

-const emit = defineEmits(['submit'])
+const emit = defineEmits(['submit', 'delete'])

 const slugTouched = ref(Boolean(props.initialPage.slug))
 const blockEditor = ref(null)
 const htmlEditor = ref(null)
+const editorMode = ref('write')
 const mediaItems = ref([])
 const isMediaPickerOpen = ref(false)
 const isLoadingMedia = ref(false)
 const isUploadingFeaturedImage = ref(false)
+const isSettingsOpen = ref(true)
+const savedPageSnapshot = ref('')

 const form = reactive({
  title: props.initialPage.title || '',
@@ -45,6 +60,37 @@ const toSlug = (value) => value
  .replace(/-+/g, '-')
  .replace(/^-|-$/g, '')

+const pageSlug = computed(() => toSlug(form.slug || form.title))
+const viewPageUrl = computed(() => props.publicUrl || (pageSlug.value ? `/pages/${pageSlug.value}` : ''))
+const pageUrlHint = computed(() => `/pages/${pageSlug.value || 'page-slug'}/`)
+
+/**
+ * 페이지 폼의 저장 비교용 문자열을 생성한다.
+ * @returns {string} 직렬화된 폼 상태
+ */
+const serializePageForm = () => JSON.stringify({
+  title: form.title.trim(),
+  slug: pageSlug.value,
+  renderMode: form.renderMode,
+  content: form.content,
+  featuredImage: form.featuredImage.trim() || null
+})
+
+const hasUnsavedPageChanges = computed(() => serializePageForm() !== savedPageSnapshot.value)
+
+const headerStatusText = computed(() => {
+  if (props.saving) {
+    return 'Saving...'
+  }
+  if (hasUnsavedPageChanges.value) {
+    return 'Unsaved changes'
+  }
+  if (props.initialPage.id) {
+    return 'Saved'
+  }
+  return 'New page'
+})
+
 watch(() => form.title, (title) => {
  if (!slugTouched.value) {
    form.slug = toSlug(title)
@@ -60,6 +106,14 @@ const touchSlug = () => {
  form.slug = toSlug(form.slug)
 }

+/**
+ * 페이지 설정 패널을 토글한다.
+ * @returns {void}
+ */
+const toggleSettingsPanel = () => {
+  isSettingsOpen.value = !isSettingsOpen.value
+}
+
 /**
 * 미디어 라이브러리 목록 조회
 * @returns {Promise<void>}
@@ -139,9 +193,12 @@ const uploadFeaturedImage = async (event) => {

 /**
 * 제목 입력 후 본문 에디터로 이동
+ * @param {KeyboardEvent} event - 키보드 이벤트
 * @returns {void}
 */
-const focusContentEditor = () => {
+const focusContentEditor = (event) => {
+  event?.preventDefault()
+
  if (form.renderMode === 'html_document') {
    htmlEditor.value?.focus()
    return
@@ -159,45 +216,140 @@ const setRenderMode = (mode) => {
  form.renderMode = mode
 }

+/**
+ * 페이지 입력값을 생성한다.
+ * @returns {Object} 페이지 입력값
+ */
+const createPayload = () => ({
+  title: form.title.trim(),
+  slug: pageSlug.value,
+  renderMode: form.renderMode,
+  content: form.content,
+  featuredImage: form.featuredImage.trim() || null
+})
+
 /**
 * 페이지 입력값 제출
 * @returns {void}
 */
 const submitPage = () => {
-  emit('submit', {
-    title: form.title.trim(),
-    slug: toSlug(form.slug || form.title),
-    renderMode: form.renderMode,
-    content: form.content,
-    featuredImage: form.featuredImage.trim() || null
-  })
+  emit('submit', createPayload())
 }
+
+/**
+ * 현재 폼 상태를 저장 완료 기준점으로 표시한다.
+ * @returns {void}
+ */
+const markSaved = () => {
+  savedPageSnapshot.value = serializePageForm()
+}
+
+onMounted(markSaved)
+
+defineExpose({
+  markSaved
+})
 </script>

 <template>
-  <form class="admin-page-form grid gap-6" @submit.prevent="submitPage">
-    <div class="admin-page-form__main grid gap-5 lg:grid-cols-[minmax(0,1fr)_18rem]">
-      <section class="admin-page-form__content grid gap-4">
-        <input
-          v-model="form.title"
-          class="admin-page-form__title-input border-0 bg-transparent px-0 py-2 text-5xl font-semibold leading-tight text-ink outline-none placeholder:text-soft"
-          type="text"
-          placeholder="페이지 제목"
-          required
-          @keydown.enter.prevent="focusContentEditor"
-        >
+  <form class="admin-page-form flex h-screen min-h-screen overflow-hidden bg-white" @submit.prevent="submitPage">
+    <div class="admin-page-form__workspace flex min-w-0 flex-1 flex-col bg-white">
+      <header class="admin-page-form__toolbar flex h-[56px] shrink-0 items-center bg-white px-8">
+        <div class="admin-page-form__toolbar-inner flex h-[34px] min-w-0 flex-1 items-center justify-between">
+          <div class="admin-page-form__toolbar-left flex h-full min-w-0 flex-1 items-center gap-3">
+            <NuxtLink class="admin-page-form__toolbar-link inline-flex shrink-0 items-center gap-2 rounded px-2 py-1.5 text-sm font-medium text-[#394047] transition-colors hover:bg-[#f1f3f4] hover:text-black" to="/admin/pages">
+              <span class="admin-page-form__toolbar-back text-lg leading-none" aria-hidden="true">&lt;</span>
+              <span>Pages</span>
+            </NuxtLink>
+            <NuxtLink
+              v-if="canViewPage && viewPageUrl"
+              class="admin-page-form__toolbar-status-link inline-flex items-center gap-1 truncate rounded px-2 py-1.5 text-sm font-medium text-[#8E9CAC] transition-colors hover:bg-[#f1f3f4] hover:text-[#394047]"
+              :to="viewPageUrl"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span>View page</span>
+              <span aria-hidden="true">↗</span>
+            </NuxtLink>
+            <span v-else class="admin-page-form__toolbar-status truncate rounded px-2 py-1.5 text-sm text-[#8E9CAC]">
+              {{ headerStatusText }}
+            </span>
+          </div>

-        <div v-if="form.renderMode === 'markdown'" class="admin-page-form__field grid gap-2 text-sm">
-          <AdminBlockEditor ref="blockEditor" v-model="form.content" />
+          <div class="admin-page-form__toolbar-actions flex h-full shrink-0 items-center gap-2">
+            <div
+              v-show="form.renderMode === 'markdown'"
+              id="admin-page-form-mode-toggle-host"
+              class="admin-page-form__mode-toggle-host flex shrink-0 items-center"
+            />
+            <button
+              class="admin-page-form__toolbar-save rounded px-3 py-1.5 text-sm font-bold transition-colors disabled:cursor-default disabled:text-[#8E9CAC] disabled:hover:bg-transparent enabled:text-[#394047] enabled:hover:bg-[#f1f3f4]"
+              type="submit"
+              :disabled="saving || !form.title.trim() || !hasUnsavedPageChanges"
+            >
+              {{ saving ? 'Saving...' : 'Save' }}
+            </button>
+            <button
+              class="admin-page-form__settings-toggle grid size-[34px] place-items-center rounded text-[#394047] transition-colors hover:bg-[#f1f3f4] hover:text-black"
+              type="button"
+              :aria-pressed="isSettingsOpen"
+              aria-label="페이지 설정 패널 전환"
+              @click="toggleSettingsPanel"
+            >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+                <path d="M14 2.16699C14.3242 2.16699 14.4998 2.39365 14.5 2.57129V13.4287C14.5 13.606 14.3242 13.834 14 13.834H11.5V2.16699H14ZM2 2.16699H10.5V13.834H2C1.6756 13.834 1.5 13.6064 1.5 13.4287V2.57129C1.50024 2.39409 1.67607 2.16699 2 2.16699Z" stroke="currentColor" />
+              </svg>
+            </button>
+          </div>
        </div>
-        <label v-else class="admin-page-form__field admin-page-form__html-field grid gap-2 text-sm">
-          <span class="admin-page-form__label font-medium">HTML 문서</span>
-          <textarea
-            ref="htmlEditor"
-            v-model="form.content"
-            class="admin-page-form__html-editor min-h-[68vh] resize-y rounded border border-line bg-[#15171a] px-4 py-4 font-mono text-sm leading-6 text-white outline-none placeholder:text-white/35 focus:border-[#8e9cac]"
-            spellcheck="false"
-            placeholder="<!doctype html>
+      </header>
+
+      <main class="admin-page-form__editor-scroll min-h-0 flex-1 overflow-y-auto">
+        <section class="admin-page-form__content mx-auto w-full max-w-[804px] px-8 pb-16 pt-16">
+          <div class="admin-page-form__feature-block mb-9">
+            <figure v-if="form.featuredImage" class="admin-page-form__featured-editor group relative overflow-hidden bg-white">
+              <img class="admin-page-form__featured-editor-image aspect-[16/9] w-full bg-surface object-cover" :src="form.featuredImage" alt="">
+              <figcaption class="admin-page-form__featured-editor-actions pointer-events-none absolute inset-0 flex items-end justify-end gap-2 bg-gradient-to-t from-black/40 via-black/5 to-transparent p-4 opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100">
+                <button class="admin-page-form__featured-change rounded bg-white/95 px-3 py-1.5 text-xs font-semibold text-[#15171a] shadow-sm transition-colors hover:bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" type="button" @click="openMediaPicker">
+                  변경
+                </button>
+                <button class="admin-page-form__featured-remove rounded bg-[#fff1f2]/95 px-3 py-1.5 text-xs font-semibold text-red-700 shadow-sm transition-colors hover:bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" type="button" @click="removeFeaturedImage">
+                  삭제
+                </button>
+              </figcaption>
+            </figure>
+            <div v-else class="admin-page-form__feature-empty flex h-6 items-start">
+              <button class="admin-page-form__feature-add inline-flex items-center gap-1.5 rounded px-2 py-1 text-sm text-[#8e9cac] transition-colors hover:bg-[#eff1f2] hover:text-[#394047]" type="button" @click="openMediaPicker">
+                <span aria-hidden="true">+</span>
+                <span>대표 이미지 추가</span>
+              </button>
+            </div>
+          </div>
+
+          <input
+            v-model="form.title"
+            class="admin-page-form__title-input mb-2 w-full border-0 bg-transparent px-0 py-0 text-3xl font-bold leading-tight text-ink outline-none placeholder:text-[#8e9cac]"
+            type="text"
+            placeholder="제목"
+            @keydown.enter="focusContentEditor"
+          >
+
+          <div v-if="form.renderMode === 'markdown'" class="admin-page-form__field admin-page-form__content-editor text-sm">
+            <AdminMarkdownEditor
+              ref="blockEditor"
+              v-model="form.content"
+              v-model:editor-mode="editorMode"
+              mode-toggle-teleport-to="#admin-page-form-mode-toggle-host"
+            />
+          </div>
+          <label v-else class="admin-page-form__field admin-page-form__html-field grid gap-2 text-sm">
+            <span class="admin-page-form__label sr-only">HTML 문서</span>
+            <textarea
+              ref="htmlEditor"
+              v-model="form.content"
+              class="admin-page-form__html-editor min-h-[68vh] w-full resize-y rounded border border-[#e3e6e8] bg-white px-4 py-4 font-mono text-sm leading-6 text-[#15171a] outline-none placeholder:text-[#8e9cac] focus:border-[#8e9cac]"
+              spellcheck="false"
+              placeholder="<!doctype html>
 <html lang=&quot;ko&quot;>
 <head>
  <meta charset=&quot;utf-8&quot;>
@@ -209,95 +361,130 @@ const submitPage = () => {
 <body>
 </body>
 </html>"
-          />
-          <span class="admin-page-form__hint text-xs text-muted">
-            이 모드는 공개 URL에서 저장한 HTML을 그대로 응답합니다.
-          </span>
-        </label>
-      </section>
+            />
+          </label>
+        </section>
+      </main>
+    </div>

-      <aside class="admin-page-form__settings grid content-start gap-4">
-        <div class="admin-page-form__field grid gap-2 text-sm">
-          <span class="admin-page-form__label font-medium">페이지 형식</span>
-          <div class="admin-page-form__mode-control grid grid-cols-2 rounded border border-line bg-white p-1">
-            <button
-              class="admin-page-form__mode-button rounded px-3 py-2 text-sm font-semibold transition"
-              :class="form.renderMode === 'markdown' ? 'bg-[#15171a] text-white' : 'text-muted hover:bg-surface hover:text-ink'"
-              type="button"
-              @click="setRenderMode('markdown')"
-            >
-              기본
-            </button>
-            <button
-              class="admin-page-form__mode-button rounded px-3 py-2 text-sm font-semibold transition"
-              :class="form.renderMode === 'html_document' ? 'bg-[#15171a] text-white' : 'text-muted hover:bg-surface hover:text-ink'"
-              type="button"
-              @click="setRenderMode('html_document')"
-            >
-              HTML
-            </button>
-          </div>
+    <aside
+      class="admin-page-form__settings flex h-screen shrink-0 flex-col overflow-hidden border-[#e3e6e8] bg-white transition-[width,border-color] duration-300 ease-out"
+      :class="isSettingsOpen ? 'w-[420px] border-l' : 'w-0 border-l-0'"
+      :aria-hidden="!isSettingsOpen"
+    >
+      <div class="admin-page-form__settings-inner relative flex h-full w-[420px] flex-col">
+        <div class="admin-page-form__settings-header flex h-[56px] shrink-0 items-center justify-between px-6">
+          <h2 class="admin-page-form__settings-title text-xl font-bold text-black">
+            페이지 설정
+          </h2>
+          <button class="admin-page-form__settings-close grid size-8 place-items-center rounded text-neutral-900 transition-colors hover:bg-[#eff1f2] hover:text-neutral-500" type="button" aria-label="페이지 설정 닫기" @click="toggleSettingsPanel">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16" width="16" class="h-[1.1rem] w-[1.1rem]" aria-hidden="true">
+              <path stroke-linecap="round" stroke-width="0.4" fill="currentColor" stroke="#000000" stroke-linejoin="round" d="M.44,21.44a1.49,1.49,0,0,0,0,2.12,1.5,1.5,0,0,0,2.12,0l9.26-9.26a.25.25,0,0,1,.36,0l9.26,9.26a1.5,1.5,0,0,0,2.12,0,1.49,1.49,0,0,0,0-2.12L14.3,12.18a.25.25,0,0,1,0-.36l9.26-9.26A1.5,1.5,0,0,0,21.44.44L12.18,9.7a.25.25,0,0,1-.36,0L2.56.44A1.5,1.5,0,0,0,.44,2.56L9.7,11.82a.25.25,0,0,1,0,.36Z" />
+            </svg>
+          </button>
        </div>

-        <label class="admin-page-form__field grid gap-2 text-sm">
-          <span class="admin-page-form__label font-medium">슬러그</span>
-          <input
-            v-model="form.slug"
-            class="admin-page-form__input rounded border border-line bg-white px-3 py-2"
-            type="text"
-            pattern="[a-z0-9가-힣]+(-[a-z0-9가-힣]+)*"
-            required
-            @input="touchSlug"
-          >
-        </label>
-
-        <div class="admin-page-form__field grid gap-2 text-sm">
-          <span class="admin-page-form__label font-medium">대표 이미지</span>
-          <figure v-if="form.featuredImage" class="admin-page-form__featured overflow-hidden rounded border border-line bg-white">
-            <img class="admin-page-form__featured-image aspect-[4/3] w-full bg-surface object-cover" :src="form.featuredImage" alt="">
-            <figcaption class="admin-page-form__featured-actions grid gap-2 p-3">
-              <p class="admin-page-form__featured-url break-all text-xs text-muted">
-                {{ form.featuredImage }}
-              </p>
-              <div class="admin-page-form__featured-buttons flex flex-wrap gap-2">
-                <button class="admin-page-form__featured-change rounded border border-line px-3 py-1.5 text-xs font-semibold" type="button" @click="openMediaPicker">
-                  변경
-                </button>
-                <label class="admin-page-form__featured-reupload cursor-pointer rounded border border-line px-3 py-1.5 text-xs font-semibold">
-                  새 업로드
-                  <input class="sr-only" type="file" accept="image/*" @change="uploadFeaturedImage">
-                </label>
-                <button class="admin-page-form__featured-remove rounded border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700" type="button" @click="removeFeaturedImage">
-                  삭제
-                </button>
-              </div>
-            </figcaption>
-          </figure>
-          <div v-else class="admin-page-form__featured-empty grid gap-2 rounded border border-dashed border-line bg-white p-4">
-            <button class="admin-page-form__featured-select rounded border border-line px-3 py-2 text-sm font-semibold" type="button" @click="openMediaPicker">
-              미디어에서 선택
-            </button>
-            <label class="admin-page-form__featured-upload cursor-pointer rounded bg-[#15171a] px-3 py-2 text-center text-sm font-semibold text-white">
-              {{ isUploadingFeaturedImage ? '업로드 중' : '새 이미지 업로드' }}
-              <input class="sr-only" type="file" accept="image/*" @change="uploadFeaturedImage">
+        <div class="admin-page-form__settings-body grid flex-1 content-start gap-4 overflow-y-auto px-6 pb-8 pt-8">
+          <div class="admin-page-form__field grid gap-1 text-sm">
+            <div class="admin-page-form__page-url-header flex h-[22px] items-center justify-between">
+              <span class="admin-page-form__label font-bold text-[#15171a]">Page URL</span>
+              <NuxtLink
+                v-if="canViewPage && viewPageUrl"
+                class="admin-page-form__view-page inline-flex items-center gap-1 rounded px-3 py-1.5 text-xs text-[#8e9cac] transition-colors hover:bg-[#eff1f2] hover:text-[#394047]"
+                :to="viewPageUrl"
+                target="_blank"
+              >
+                <span>View Page</span>
+                <span aria-hidden="true">↗</span>
+              </NuxtLink>
+            </div>
+            <label class="admin-page-form__page-url-input flex h-[38px] items-center gap-2 rounded border border-[#e3e6e8] bg-[#eff1f2] px-3 py-1 transition-colors hover:border-[#c8ced3] focus-within:border-[#8e9cac]">
+              <span class="admin-page-form__page-url-icon text-sm text-[#394047]" aria-hidden="true">⌘</span>
+              <input
+                v-model="form.slug"
+                class="admin-page-form__input min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-black outline-none"
+                type="text"
+                pattern="[a-z0-9가-힣]+(-[a-z0-9가-힣]+)*"
+                required
+                @input="touchSlug"
+              >
            </label>
+            <p class="admin-page-form__page-url-hint text-xs text-[#7c8b9a]">
+              {{ pageUrlHint }}
+            </p>
+          </div>
+
+          <div class="admin-page-form__field grid gap-2 text-sm">
+            <span class="admin-page-form__label font-medium">페이지 형식</span>
+            <div class="admin-page-form__mode-control grid grid-cols-2 rounded border border-[#e3e6e8] bg-[#eff1f2] p-1">
+              <button
+                class="admin-page-form__mode-button rounded px-3 py-2 text-sm font-semibold transition"
+                :class="form.renderMode === 'markdown' ? 'bg-[#15171a] text-white' : 'text-[#7c8b9a] hover:bg-white hover:text-[#15171a]'"
+                type="button"
+                @click="setRenderMode('markdown')"
+              >
+                기본
+              </button>
+              <button
+                class="admin-page-form__mode-button rounded px-3 py-2 text-sm font-semibold transition"
+                :class="form.renderMode === 'html_document' ? 'bg-[#15171a] text-white' : 'text-[#7c8b9a] hover:bg-white hover:text-[#15171a]'"
+                type="button"
+                @click="setRenderMode('html_document')"
+              >
+                HTML
+              </button>
+            </div>
+          </div>
+
+          <div class="admin-page-form__field grid gap-2 text-sm">
+            <span class="admin-page-form__label font-medium">대표 이미지</span>
+            <figure v-if="form.featuredImage" class="admin-page-form__featured overflow-hidden rounded border border-[#e3e6e8] bg-white">
+              <img class="admin-page-form__featured-image aspect-[4/3] w-full bg-surface object-cover" :src="form.featuredImage" alt="">
+              <figcaption class="admin-page-form__featured-actions grid gap-2 p-3">
+                <p class="admin-page-form__featured-url break-all text-xs text-muted">
+                  {{ form.featuredImage }}
+                </p>
+                <div class="admin-page-form__featured-buttons flex flex-wrap gap-2">
+                  <button class="admin-page-form__featured-change rounded border border-[#e3e6e8] px-3 py-1.5 text-xs font-semibold" type="button" @click="openMediaPicker">
+                    변경
+                  </button>
+                  <label class="admin-page-form__featured-reupload cursor-pointer rounded border border-[#e3e6e8] px-3 py-1.5 text-xs font-semibold">
+                    새 업로드
+                    <input class="sr-only" type="file" accept="image/*" @change="uploadFeaturedImage">
+                  </label>
+                  <button class="admin-page-form__featured-remove rounded border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700" type="button" @click="removeFeaturedImage">
+                    삭제
+                  </button>
+                </div>
+              </figcaption>
+            </figure>
+            <div v-else class="admin-page-form__featured-empty grid gap-2 rounded border border-dashed border-[#e3e6e8] bg-white p-4">
+              <button class="admin-page-form__featured-select rounded border border-[#e3e6e8] px-3 py-2 text-sm font-semibold" type="button" @click="openMediaPicker">
+                미디어에서 선택
+              </button>
+              <label class="admin-page-form__featured-upload cursor-pointer rounded bg-[#15171a] px-3 py-2 text-center text-sm font-semibold text-white">
+                {{ isUploadingFeaturedImage ? '업로드 중' : '새 이미지 업로드' }}
+                <input class="sr-only" type="file" accept="image/*" @change="uploadFeaturedImage">
+              </label>
+            </div>
          </div>
        </div>
-      </aside>
-    </div>

-    <div class="admin-page-form__actions flex justify-end gap-3 border-t border-line pt-5">
-      <NuxtLink class="admin-page-form__cancel rounded border border-line bg-white px-4 py-2 text-sm font-semibold" to="/admin/pages">
-        취소
-      </NuxtLink>
-      <button
-        class="admin-page-form__submit rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
-        type="submit"
-        :disabled="saving"
-      >
-        {{ saving ? '저장 중' : submitLabel }}
-      </button>
-    </div>
+        <div v-if="showDelete" class="admin-page-form__settings-footer border-t border-[#e3e6e8] p-6">
+          <button
+            class="admin-page-form__delete-button flex h-[44px] w-full items-center justify-center gap-2 rounded border border-[#d7dce0] bg-white text-sm font-bold text-[#394047] transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-700 disabled:opacity-50"
+            type="button"
+            :disabled="deleting"
+            @click="emit('delete')"
+          >
+            <svg class="size-4" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <path d="M4 7h16M10 11v6M14 11v6M6 7l1 14h10l1-14M9 7V4h6v3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" />
+            </svg>
+            <span>{{ deleting ? 'Deleting page' : 'Delete page' }}</span>
+          </button>
+        </div>
+      </div>
+    </aside>

    <div
      v-if="isMediaPickerOpen"
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1,5 +1,9 @@
 # 업데이트 요약

+## v1.5.2
+
+- 페이지 작성/수정 화면을 게시글 작성 화면처럼 전체 화면 에디터, 상단 저장 툴바, 오른쪽 설정 패널 구조로 변경했다.
+
 ## v1.5.1

 - 고정 페이지에서 전체 HTML 문서를 붙여넣어 `/pages/:slug`에서 단일 랜딩 페이지처럼 보여줄 수 있는 HTML 문서 모드를 추가했다.
--- a/docs/history.md
+++ b/docs/history.md
@@ -1,5 +1,9 @@
 # 의사결정 이력

+## 2026-05-26 v1.5.2 — 페이지 작성 화면을 게시글 작성 화면과 통일
+
+고정 페이지는 랜딩 페이지 작성 용도로 확장되므로 일반 관리자 폼보다 게시글 작성과 같은 집중형 전체 화면 에디터가 더 적합하다. 게시글과 페이지의 작성 화면이 다르면 저장 위치, 설정 위치, 본문 입력 방식이 매번 달라져 운영 피로가 커진다. 따라서 페이지 작성/수정도 상단 툴바와 오른쪽 접이식 설정 패널을 쓰고, 페이지 형식 선택과 URL·대표 이미지·삭제 액션은 설정 패널로 모은다. 기본 콘텐츠 입력도 게시글과 같은 Markdown-first 에디터를 사용해 작성 경험을 통일한다.
+
 ## 2026-05-26 v1.5.1 — 고정 페이지에 원문 HTML 문서 모드 추가

 고정 페이지는 아직 운영에서 본격 사용 전이므로 구조를 크게 바꿀 수 있다. 랜딩 페이지처럼 한 주소에서 단일 `index.html` 문서를 보여주는 목적에는 Nuxt 컴포넌트 안의 `v-html`보다 서버에서 `text/html`로 원문을 응답하는 방식이 맞다. 따라서 페이지에는 `render_mode`를 두고, 기본 Markdown 모드는 기존 경로를 유지하되 `html_document` 모드만 서버 미들웨어가 `/pages/:slug` 요청을 가로채 저장된 HTML을 그대로 반환한다. 이 모드는 관리자만 저장하는 신뢰 콘텐츠를 전제로 한다.
--- a/docs/map.md
+++ b/docs/map.md
@@ -80,7 +80,7 @@
 | components/admin/AdminSettingsNavIcon.vue | 사이트 설정 좌측 내비 항목 아이콘(`iconId`별 SVG·미구현 placeholder) |
 | components/admin/AdminMediaVideoThumbnail.vue | 관리자 미디어 목록 비디오 항목의 초반 프레임 캔버스 썸네일 |
 | components/admin/AdminPostForm.vue | 관리자 글 작성/수정 폼, Ghost형 툴바(영문 상태·Publish/Update/Unpublish/Unschedule, 서버 반영 상태 기준 분기), 초안만 서버 디바운스 자동 저장·신규 임시 슬러그·발행·예약 글은 Update로만 반영, 발행 모달(중앙 배치), 좌우 설정 패널, 미리보기 emit·미저장 이탈 가드, 추천 글 토글, 태그 색상 배지 다중 입력·메인 태그 드롭다운·부분 검색 추천 |
-| components/admin/AdminPageForm.vue | 관리자 페이지 작성/수정 폼, Markdown/HTML 문서 모드 선택, HTML 붙여넣기 textarea, 대표 이미지 선택 |
+| components/admin/AdminPageForm.vue | 관리자 페이지 작성/수정 폼, 게시글 작성과 같은 전체 화면 에디터·상단 저장 툴바·접이식 오른쪽 설정 패널, Markdown/HTML 문서 모드 선택, HTML 붙여넣기 textarea, 대표 이미지 선택 |
 | components/admin/AdminMarkdownEditor.vue | 관리자 글 Markdown-first 에디터, 라이브·소스 모드 `/` 슬래시 명령·미디어 모달(이미지·갤러리·비디오·오디오·파일), 커서 블록 컨텍스트·`block-panel` emit, 라이브 이미지 설정 패널·이미지↔갤러리 드래그 변환(`merge-images-to-gallery`·`insert-image-to-gallery`·`extract-gallery-image`), 블록 패널 바깥 클릭 닫기·미디어 모달 중 유지, 소스 모드 wrap 라인 번호 보정·라이브↔소스 위치 복원 |
 | components/admin/AdminEditorBlockPanel.vue | 게시물 설정 사이드바 오버레이 블록 설정(이미지·갤러리·임베드), 갤러리 선택 이미지 강조 |
 | components/admin/AdminBlockEditor.vue | 관리자 글 블록형 에디터, 이미지/갤러리/콜아웃/토글/임베드 블록, 콜아웃 Emoji on/off·이모지 프리셋·배경 프리셋 선택(우측 고정 설정 패널), 갤러리 복수 미디어 선택·이미지 수별 열 배치·삽입 위치 표시 드래그 순서 변경, 한글 조합 입력 처리, Shift+Enter 줄바꿈, 코드 블록 단축 변환, AFFiNE 참고 세로 막대형 블록 핸들 선택/삭제/드래그 이동과 삽입선 표시, 하단 빈 입력 블록 유지, 본문 placeholder 표시 |
@@ -130,8 +130,8 @@
 | pages/admin/posts/[id].vue | 글 수정, `AdminPostForm`, 저장·초안 디바운스 자동 저장(`autoSaving`)·이탈 직전 플러시·삭제·토스트 |
 | pages/admin/posts/preview.vue | 글 미리보기(공개 상세와 동일한 중앙 컬럼·수평 패딩) |
 | pages/admin/pages/index.vue | 페이지 목록, 화면 기준 행 more vert 메뉴(수정·삭제) |
-| pages/admin/pages/new.vue | 페이지 작성, Markdown/HTML 문서 모드 저장, 저장 토스트 |
-| pages/admin/pages/[id].vue | 페이지 수정, Markdown/HTML 문서 모드 저장, 저장/삭제 토스트 |
+| pages/admin/pages/new.vue | 전체 화면 페이지 작성, Markdown/HTML 문서 모드 저장, 저장 토스트 |
+| pages/admin/pages/[id].vue | 전체 화면 페이지 수정, Markdown/HTML 문서 모드 저장, 설정 패널 삭제, 저장/삭제 토스트 |
 | pages/admin/media/index.vue | 미디어 관리, **미디어 라이브러리/썸네일** 탭, 이미지·비디오·오디오·파일 종류 필터, 미사용 필터, 비디오 프레임 썸네일, 폴더 트리 more vert(폴더 삭제), 검색·드래그·상세 모달 등 |
 | pages/admin/navigation/index.vue | 메뉴 관리: 상단/하단/추천 탭, 행 more vert(메뉴 항목 삭제), 드래그 정렬, `useAdminToast` |
 | components/admin/AdminRowMoreMenu.vue | 관리자 행 more vert 메뉴(트리거·화면 기준 팝오버) |
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -636,8 +636,10 @@ components/content/

 ### 관리자 페이지 편집

- 고정 페이지 작성/수정 화면은 기본 모드에서 게시물과 같은 블록형 에디터를 사용한다.
+- 고정 페이지 작성/수정 화면은 게시글 작성 화면과 같은 전체 화면 에디터 구조를 사용한다. 상단 툴바에 목록 이동, 저장 상태, 저장 버튼, 설정 패널 토글을 두고 오른쪽 설정 패널은 접고 펼칠 수 있다.
+- 고정 페이지 작성/수정 화면의 기본 모드는 게시글 작성과 같은 Markdown-first 에디터를 사용한다.
 - 고정 페이지 HTML 문서 모드는 전체 HTML 붙여넣기용 textarea를 사용하고, 공개 URL에서 Nuxt 레이아웃 없이 원문 HTML로 응답한다.
+- 페이지 형식, Page URL, 대표 이미지, 삭제 액션은 오른쪽 설정 패널에서 관리한다.
 - 고정 페이지는 제목, 슬러그, 렌더링 방식, 본문, 대표 이미지를 저장한다.
 - 고정 페이지는 게시물 목록과 태그 목록에 노출하지 않는다.
 - 고정 페이지 공개 보기 경로는 `/pages/:slug`를 사용한다.
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,12 @@
 # 업데이트 이력

+## v1.5.2
+
+- 관리자 페이지 작성/수정: 게시글 작성 화면과 같은 전체 화면 에디터, 상단 저장 툴바, 접이식 오른쪽 설정 패널 구조로 변경.
+- 관리자 페이지 작성/수정: 페이지 형식 선택, Page URL, 대표 이미지, 삭제 액션을 오른쪽 설정 패널로 이동.
+- 관리자 페이지 작성/수정: 기본 모드 본문 에디터를 게시글과 같은 Markdown-first 에디터로 통일.
+- 관리자 레이아웃: 페이지 작성/수정 경로도 전체 화면 에디터 모드로 처리하도록 수정.
+
 ## v1.5.1

 - 고정 페이지: 기본 Markdown 모드와 원문 HTML 문서 모드 선택 추가.
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -13,6 +13,8 @@ const publicBlogBaseUrl = computed(() => {

 const isPostEditorRoute = computed(() => route.path === '/admin/posts/new'
  || (route.path.startsWith('/admin/posts/') && route.path !== '/admin/posts/preview'))
+const isPageEditorRoute = computed(() => route.path === '/admin/pages/new'
+  || (route.path.startsWith('/admin/pages/') && route.path !== '/admin/pages'))

 const editorDocumentClass = 'admin-post-editor-document'
 const settingsDocumentClass = 'admin-settings-document'
@@ -90,7 +92,7 @@ const syncAdminShellDocumentClass = () => {
    return
  }

-  const editorOn = isPostEditorRoute.value
+  const editorOn = isPostEditorRoute.value || isPageEditorRoute.value
  const settingsOn = isAdminSettingsRoute.value && !editorOn
  document.documentElement.classList.toggle(editorDocumentClass, editorOn)
  document.body.classList.toggle(editorDocumentClass, editorOn)
@@ -133,12 +135,12 @@ const logoutAdmin = async () => {
  <div
    class="admin-layout bg-[#f7f8fa] text-ink"
    :class="[
-      (isPostEditorRoute || isAdminSettingsRoute) ? 'h-screen overflow-hidden bg-white' : 'min-h-screen',
-      { 'admin-layout--light-controls': !isPostEditorRoute }
+      (isPostEditorRoute || isPageEditorRoute || isAdminSettingsRoute) ? 'h-screen overflow-hidden bg-white' : 'min-h-screen',
+      { 'admin-layout--light-controls': !isPostEditorRoute && !isPageEditorRoute }
    ]"
  >
    <aside
-      v-if="!isPostEditorRoute && !isAdminSettingsRoute"
+      v-if="!isPostEditorRoute && !isPageEditorRoute && !isAdminSettingsRoute"
      class="admin-layout__sidebar fixed inset-y-0 left-0 hidden w-80 flex-col border-r border-[#e6e8eb] bg-[#f7f8fa] px-5 py-6 text-[#15171a] lg:flex"
    >
      <NuxtLink class="admin-layout__brand flex items-center gap-3 px-2 text-[0.95rem] font-semibold tracking-[-0.01em]" to="/admin">
@@ -309,10 +311,10 @@ const logoutAdmin = async () => {
    <main
      class="admin-layout__main"
      :class="[
-        isPostEditorRoute || isAdminSettingsRoute
+        isPostEditorRoute || isPageEditorRoute || isAdminSettingsRoute
          ? 'h-screen overflow-hidden bg-white'
          : 'min-h-screen bg-paper px-8 py-8 xl:px-12 xl:py-10',
-        { 'lg:ml-80': !isPostEditorRoute && !isAdminSettingsRoute }
+        { 'lg:ml-80': !isPostEditorRoute && !isPageEditorRoute && !isAdminSettingsRoute }
      ]"
    >
      <slot />
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "sori.studio",
-  "version": "1.5.1",
+  "version": "1.5.2",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sori.studio",
-      "version": "1.5.1",
+      "version": "1.5.2",
      "hasInstallScript": true,
      "dependencies": {
        "@nuxtjs/tailwindcss": "^6.14.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "sori.studio",
-  "version": "1.5.1",
+  "version": "1.5.2",
  "private": true,
  "type": "module",
  "imports": {
--- a/pages/admin/pages/[id].vue
+++ b/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"
--- a/pages/admin/pages/new.vue
+++ b/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"