관리자 페이지 관리 추가

2026-05-02 16:24:57 +09:00
parent 792460b27a
commit d5666fdcc3
18 changed files with 939 additions and 9 deletions
--- a/components/admin/AdminPageForm.vue
+++ b/components/admin/AdminPageForm.vue
@@ -0,0 +1,278 @@
+<script setup>
+const props = defineProps({
+  initialPage: {
+    type: Object,
+    default: () => ({})
+  },
+  submitLabel: {
+    type: String,
+    default: '저장'
+  },
+  saving: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['submit'])
+
+const slugTouched = ref(Boolean(props.initialPage.slug))
+const blockEditor = ref(null)
+const mediaItems = ref([])
+const isMediaPickerOpen = ref(false)
+const isLoadingMedia = ref(false)
+const isUploadingFeaturedImage = ref(false)
+
+const form = reactive({
+  title: props.initialPage.title || '',
+  slug: props.initialPage.slug || '',
+  content: props.initialPage.content || '',
+  featuredImage: props.initialPage.featuredImage || ''
+})
+
+/**
+ * 문자열을 URL 슬러그로 변환
+ * @param {string} value - 원본 문자열
+ * @returns {string} 슬러그
+ */
+const toSlug = (value) => value
+  .trim()
+  .toLowerCase()
+  .replace(/[^a-z0-9가-힣\s-]/g, '')
+  .replace(/\s+/g, '-')
+  .replace(/-+/g, '-')
+  .replace(/^-|-$/g, '')
+
+watch(() => form.title, (title) => {
+  if (!slugTouched.value) {
+    form.slug = toSlug(title)
+  }
+})
+
+/**
+ * 슬러그 직접 입력 상태 표시
+ * @returns {void}
+ */
+const touchSlug = () => {
+  slugTouched.value = true
+  form.slug = toSlug(form.slug)
+}
+
+/**
+ * 미디어 라이브러리 목록 조회
+ * @returns {Promise<void>}
+ */
+const fetchMediaItems = async () => {
+  isLoadingMedia.value = true
+
+  try {
+    mediaItems.value = await $fetch('/admin/api/media')
+  } finally {
+    isLoadingMedia.value = false
+  }
+}
+
+/**
+ * 대표 이미지 선택 창 열기
+ * @returns {Promise<void>}
+ */
+const openMediaPicker = async () => {
+  isMediaPickerOpen.value = true
+  await fetchMediaItems()
+}
+
+/**
+ * 대표 이미지 선택 창 닫기
+ * @returns {void}
+ */
+const closeMediaPicker = () => {
+  isMediaPickerOpen.value = false
+}
+
+/**
+ * 대표 이미지 선택
+ * @param {Object} item - 미디어 항목
+ * @returns {void}
+ */
+const selectFeaturedImage = (item) => {
+  form.featuredImage = item.url
+  closeMediaPicker()
+}
+
+/**
+ * 대표 이미지 삭제
+ * @returns {void}
+ */
+const removeFeaturedImage = () => {
+  form.featuredImage = ''
+}
+
+/**
+ * 대표 이미지 파일 업로드
+ * @param {Event} event - 파일 입력 이벤트
+ * @returns {Promise<void>}
+ */
+const uploadFeaturedImage = async (event) => {
+  const files = event.target.files
+
+  if (!files?.length) {
+    return
+  }
+
+  const formData = new FormData()
+  formData.append('files', files[0])
+  isUploadingFeaturedImage.value = true
+
+  try {
+    const result = await $fetch('/admin/api/uploads', {
+      method: 'POST',
+      body: formData
+    })
+    form.featuredImage = result.files?.[0]?.url || ''
+  } finally {
+    event.target.value = ''
+    isUploadingFeaturedImage.value = false
+  }
+}
+
+/**
+ * 제목 입력 후 본문 에디터로 이동
+ * @returns {void}
+ */
+const focusContentEditor = () => {
+  blockEditor.value?.focusFirstBlock()
+}
+
+/**
+ * 페이지 입력값 제출
+ * @returns {void}
+ */
+const submitPage = () => {
+  emit('submit', {
+    title: form.title.trim(),
+    slug: toSlug(form.slug || form.title),
+    content: form.content,
+    featuredImage: form.featuredImage.trim() || null
+  })
+}
+</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"
+        >
+
+        <div class="admin-page-form__field grid gap-2 text-sm">
+          <AdminBlockEditor ref="blockEditor" v-model="form.content" />
+        </div>
+      </section>
+
+      <aside class="admin-page-form__settings grid content-start gap-4">
+        <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">
+            </label>
+          </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="isMediaPickerOpen"
+      class="admin-page-form__media-picker fixed inset-0 z-50 grid place-items-center bg-black/40 px-5 py-8"
+      role="dialog"
+      aria-modal="true"
+      @click.self="closeMediaPicker"
+    >
+      <section class="admin-page-form__media-picker-panel max-h-[80vh] w-full max-w-4xl overflow-hidden bg-white text-ink shadow-xl">
+        <div class="admin-page-form__media-picker-header flex items-center justify-between border-b border-line px-5 py-4">
+          <h2 class="admin-page-form__media-picker-title text-lg font-semibold">
+            대표 이미지 선택
+          </h2>
+          <button class="admin-page-form__media-picker-close rounded border border-line px-3 py-1.5 text-sm font-semibold" type="button" @click="closeMediaPicker">
+            닫기
+          </button>
+        </div>
+        <div class="admin-page-form__media-picker-body max-h-[62vh] overflow-y-auto p-5">
+          <p v-if="isLoadingMedia" class="admin-page-form__media-picker-loading text-sm text-muted">
+            미디어를 불러오는 중입니다.
+          </p>
+          <div v-else-if="mediaItems.length" class="admin-page-form__media-picker-grid grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-6">
+            <button
+              v-for="item in mediaItems"
+              :key="item.url"
+              class="admin-page-form__media-picker-item overflow-hidden border border-line bg-white text-left"
+              type="button"
+              @click="selectFeaturedImage(item)"
+            >
+              <img class="admin-page-form__media-picker-image aspect-square w-full bg-surface object-cover" :src="item.url" :alt="item.title">
+              <span class="admin-page-form__media-picker-name block truncate px-2 py-1.5 text-xs font-semibold text-ink">{{ item.name }}</span>
+            </button>
+          </div>
+          <p v-else class="admin-page-form__media-picker-empty border border-dashed border-line p-8 text-center text-sm text-muted">
+            선택할 미디어가 없습니다.
+          </p>
+        </div>
+      </section>
+    </div>
+  </form>
+</template>
--- a/docs/history.md
+++ b/docs/history.md
@@ -1,5 +1,13 @@
 # 의사결정 이력

+## 2026-05-02 v0.0.23
+
+### 고정 페이지 관리 구조 결정
+
+고정 페이지 작성과 수정은 게시물과 같은 블록형 에디터를 공유하되, 별도 `AdminPageForm`으로 분리한다. 페이지는 상태, 요약, 태그, 발행일이 없는 정적 콘텐츠이므로 게시물 폼을 그대로 재사용하면 불필요한 필드와 저장 조건이 섞이기 때문이다.
+
+관리자 경로는 내부 리소스 컬렉션 기준으로 `/admin/pages/:id`를 사용하고, 공개 보기 경로는 기존 고정 페이지 공개 구조인 `/pages/:slug`를 유지한다. 페이지는 목록과 태그 흐름에 노출되지 않는 독립 콘텐츠로 다루기 위해서다.
+
 ## 2026-05-02 v0.0.22

 ### 글쓰기 하단 빈 블록과 저장 피드백 보정
--- a/docs/map.md
+++ b/docs/map.md
@@ -27,6 +27,7 @@
 | 파일 | 화면 위치 |
 |------|-----------|
 | components/admin/AdminPostForm.vue | 관리자 글 작성/수정 폼, 대표 이미지 선택, 로컬 자동 저장 |
+| components/admin/AdminPageForm.vue | 관리자 페이지 작성/수정 폼, 대표 이미지 선택 |
 | components/admin/AdminBlockEditor.vue | 관리자 글 블록형 에디터, 이미지/갤러리/콜아웃/토글/임베드 블록, 한글 조합 입력 처리, 하단 빈 입력 블록 유지 |
 | components/admin/AdminTagForm.vue | 관리자 태그 생성/수정 폼 |

@@ -60,6 +61,8 @@
 | pages/admin/posts/new.vue | 글 작성, 저장 토스트 |
 | pages/admin/posts/[id].vue | 글 수정, 저장/삭제 토스트 |
 | pages/admin/pages/index.vue | 페이지 목록 |
+| pages/admin/pages/new.vue | 페이지 작성, 저장 토스트 |
+| pages/admin/pages/[id].vue | 페이지 수정, 저장/삭제 토스트 |
 | pages/admin/media/index.vue | 미디어 관리 |
 | pages/admin/tags/index.vue | 태그 관리 |
 | pages/admin/tags/new.vue | 태그 생성 |
@@ -96,6 +99,11 @@
 | server/routes/admin/api/posts/[id].get.js | 관리자 게시물 상세 API |
 | server/routes/admin/api/posts/[id].put.js | 관리자 게시물 수정 API |
 | server/routes/admin/api/posts/[id].delete.js | 관리자 게시물 삭제 API |
+| server/routes/admin/api/pages.get.js | 관리자 고정 페이지 목록 API |
+| server/routes/admin/api/pages.post.js | 관리자 고정 페이지 생성 API |
+| server/routes/admin/api/pages/[id].get.js | 관리자 고정 페이지 상세 API |
+| server/routes/admin/api/pages/[id].put.js | 관리자 고정 페이지 수정 API |
+| server/routes/admin/api/pages/[id].delete.js | 관리자 고정 페이지 삭제 API |
 | server/routes/admin/api/media.get.js | 관리자 미디어 목록 API |
 | server/routes/admin/api/media.put.js | 관리자 미디어 파일명 변경 API |
 | server/routes/admin/api/media.delete.js | 관리자 미디어 삭제 API |
@@ -109,6 +117,7 @@
 | server/utils/sample-content.js | 샘플 콘텐츠 저장소 |
 | server/utils/admin-auth.js | 관리자 세션 쿠키 인증 유틸리티 |
 | server/utils/admin-post-input.js | 관리자 게시물 입력값 검증 스키마 |
+| server/utils/admin-page-input.js | 관리자 고정 페이지 입력값 검증 스키마 |
 | server/utils/admin-tag-input.js | 관리자 태그 입력값 검증 스키마 |
 | server/utils/media-library.js | 업로드 미디어 파일 관리 유틸리티 |
 | server/repositories/postgres-client.js | PostgreSQL 클라이언트 |
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -196,6 +196,11 @@ components/content/
 - `GET /admin/api/posts/:id` - 글 상세
 - `PUT /admin/api/posts/:id` - 글 수정
 - `DELETE /admin/api/posts/:id` - 글 삭제
+- `GET /admin/api/pages` - 고정 페이지 목록
+- `POST /admin/api/pages` - 고정 페이지 작성
+- `GET /admin/api/pages/:id` - 고정 페이지 상세
+- `PUT /admin/api/pages/:id` - 고정 페이지 수정
+- `DELETE /admin/api/pages/:id` - 고정 페이지 삭제
 - `GET /admin/api/media` - 업로드 미디어 목록
 - `PUT /admin/api/media` - 업로드 미디어 파일명 변경
 - `DELETE /admin/api/media` - 업로드 미디어 삭제
@@ -250,6 +255,13 @@ components/content/
 - 임베드 블록은 `:::embed` fenced block 안에 URL을 저장한다.
 - YouTube 임베드 URL은 공개 화면에서 iframe으로 렌더링하고, 그 외 URL은 외부 링크로 표시한다.

+### 관리자 페이지 편집
+
+- 고정 페이지 작성/수정 화면은 게시물과 같은 블록형 에디터를 사용한다.
+- 고정 페이지는 제목, 슬러그, 본문, 대표 이미지만 저장한다.
+- 고정 페이지는 게시물 목록과 태그 목록에 노출하지 않는다.
+- 고정 페이지 공개 보기 경로는 `/pages/:slug`를 사용한다.
+
 ### 관리자 인증

 - 초기 관리자 인증은 `ADMIN_EMAIL`, `ADMIN_PASSWORD` 환경 변수를 사용
--- a/docs/todo.md
+++ b/docs/todo.md
@@ -15,7 +15,7 @@

 ## 2차 관리자 개발

- [ ] 페이지 관리 (CRUD)
+- [ ] 페이지 관리 브라우저 수동 QA: 생성, 수정, 삭제, 공개 보기 확인
 - [ ] 사이트 설정
 - [ ] 메뉴/네비게이션 관리
 - [ ] 미디어 라이브러리 카테고리 분류
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,14 @@
 # 업데이트 이력

+## v0.0.23
+
+- 관리자 고정 페이지 목록 화면을 실제 API와 연결.
+- 관리자 고정 페이지 생성 화면 추가.
+- 관리자 고정 페이지 수정 화면 추가.
+- 관리자 고정 페이지 생성/수정/삭제 API 추가.
+- 고정 페이지 작성 폼에 블록 에디터와 대표 이미지 선택 기능 연결.
+- 패키지 버전을 0.0.23으로 갱신.
+
 ## v0.0.22

 - 관리자 블록 에디터 마지막에 클릭 가능한 빈 문단 블록을 항상 유지하도록 수정.
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "sori.studio",
-  "version": "0.0.22",
+  "version": "0.0.23",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sori.studio",
-      "version": "0.0.22",
+      "version": "0.0.23",
      "hasInstallScript": true,
      "dependencies": {
        "@nuxtjs/tailwindcss": "^6.14.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "sori.studio",
-  "version": "0.0.22",
+  "version": "0.0.23",
  "private": true,
  "type": "module",
  "scripts": {
--- a/pages/admin/pages/[id].vue
+++ b/pages/admin/pages/[id].vue
@@ -0,0 +1,161 @@
+<script setup>
+definePageMeta({
+  layout: 'admin'
+})
+
+const route = useRoute()
+const id = computed(() => String(route.params.id || ''))
+const saving = ref(false)
+const deleting = ref(false)
+const errorMessage = ref('')
+const toast = ref(null)
+let toastTimer = null
+
+const { data: page } = await useFetch(() => `/admin/api/pages/${id.value}`)
+
+if (!page.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: '페이지를 찾을 수 없습니다.'
+  })
+}
+
+/**
+ * 저장 상태 토스트 표시
+ * @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)
+}
+
+/**
+ * 이전 화면에서 전달한 토스트 표시
+ * @returns {void}
+ */
+const showStoredToast = () => {
+  const storedToast = sessionStorage.getItem('SORI_ADMIN_PAGE_TOAST')
+
+  if (!storedToast) {
+    return
+  }
+
+  try {
+    const parsedToast = JSON.parse(storedToast)
+    showToast(parsedToast.type || 'success', parsedToast.message || '저장되었습니다.')
+  } finally {
+    sessionStorage.removeItem('SORI_ADMIN_PAGE_TOAST')
+  }
+}
+
+/**
+ * 고정 페이지 수정 저장
+ * @param {Object} payload - 페이지 입력값
+ * @returns {Promise<void>} 저장 결과
+ */
+const savePage = async (payload) => {
+  saving.value = true
+  errorMessage.value = ''
+  showToast('info', '변경 내용을 저장하는 중입니다.')
+
+  try {
+    const updatedPage = await $fetch(`/admin/api/pages/${id.value}`, {
+      method: 'PUT',
+      body: payload
+    })
+
+    page.value = updatedPage
+    showToast('success', '변경 내용이 저장되었습니다.')
+  } catch (error) {
+    errorMessage.value = error?.data?.message || '페이지를 저장하지 못했습니다.'
+    showToast('error', errorMessage.value)
+  } finally {
+    saving.value = false
+  }
+}
+
+/**
+ * 고정 페이지 삭제
+ * @returns {Promise<void>} 삭제 처리 결과
+ */
+const deletePage = async () => {
+  if (!confirm(`"${page.value.title}" 페이지를 삭제할까요?`)) {
+    return
+  }
+
+  deleting.value = true
+  errorMessage.value = ''
+  showToast('info', '페이지를 삭제하는 중입니다.')
+
+  try {
+    await $fetch(`/admin/api/pages/${id.value}`, {
+      method: 'DELETE'
+    })
+    await navigateTo('/admin/pages')
+  } 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-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">
+      {{ errorMessage }}
+    </p>
+    <AdminPageForm :initial-page="page" submit-label="변경 저장" :saving="saving" @submit="savePage" />
+    <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"
+      :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>
--- a/pages/admin/pages/index.vue
+++ b/pages/admin/pages/index.vue
@@ -2,15 +2,116 @@
 definePageMeta({
  layout: 'admin'
 })
+
+const deletingId = ref('')
+const errorMessage = ref('')
+
+const { data: pages, refresh } = await useFetch('/admin/api/pages', {
+  default: () => []
+})
+
+/**
+ * 날짜 표시 형식 변환
+ * @param {string | null} value - ISO 날짜 문자열
+ * @returns {string} 화면 표시 날짜
+ */
+const formatDate = (value) => {
+  if (!value) {
+    return '-'
+  }
+
+  const date = new Date(value)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+
+  return `${year}.${month}.${day}`
+}
+
+/**
+ * 고정 페이지 삭제
+ * @param {Object} page - 삭제할 고정 페이지
+ * @returns {Promise<void>} 삭제 처리 결과
+ */
+const deletePage = async (page) => {
+  if (!confirm(`"${page.title}" 페이지를 삭제할까요?`)) {
+    return
+  }
+
+  deletingId.value = page.id
+  errorMessage.value = ''
+
+  try {
+    await $fetch(`/admin/api/pages/${page.id}`, {
+      method: 'DELETE'
+    })
+    await refresh()
+  } catch (error) {
+    errorMessage.value = error?.data?.message || '페이지를 삭제하지 못했습니다.'
+  } finally {
+    deletingId.value = ''
+  }
+}
 </script>

 <template>
  <section class="admin-pages bg-paper p-6">
-    <h1 class="admin-pages__title text-3xl font-semibold">
-      페이지 관리
-    </h1>
-    <p class="admin-pages__description mt-4 text-sm text-muted">
-      고정 페이지 CRUD는 2차 관리자 개발 범위입니다.
+    <div class="admin-pages__header flex items-center justify-between gap-4">
+      <div>
+        <p class="admin-pages__eyebrow text-xs font-semibold uppercase text-muted">
+          Pages
+        </p>
+        <h1 class="admin-pages__title mt-2 text-3xl font-semibold">
+          페이지 목록
+        </h1>
+      </div>
+      <NuxtLink class="admin-pages__new rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white" to="/admin/pages/new">
+        새 페이지
+      </NuxtLink>
+    </div>
+
+    <p v-if="errorMessage" class="admin-pages__error mt-6 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+      {{ errorMessage }}
+    </p>
+
+    <div class="admin-pages__table mt-8 overflow-hidden border border-line">
+      <table class="admin-pages__table-inner w-full border-collapse text-left text-sm">
+        <thead class="admin-pages__table-head bg-[#f5f5f2] text-xs uppercase text-muted">
+          <tr>
+            <th class="admin-pages__cell px-4 py-3">제목</th>
+            <th class="admin-pages__cell px-4 py-3">수정일</th>
+            <th class="admin-pages__cell px-4 py-3">관리</th>
+          </tr>
+        </thead>
+        <tbody class="admin-pages__table-body divide-y divide-line bg-white">
+          <tr v-for="page in pages" :key="page.id" class="admin-pages__row">
+            <td class="admin-pages__cell px-4 py-4">
+              <NuxtLink class="admin-pages__title-link font-semibold hover:opacity-70" :to="`/admin/pages/${page.id}`">
+                {{ page.title }}
+              </NuxtLink>
+              <p class="admin-pages__slug mt-1 text-xs text-muted">
+                /pages/{{ page.slug }}
+              </p>
+            </td>
+            <td class="admin-pages__cell px-4 py-4">
+              {{ formatDate(page.updatedAt) }}
+            </td>
+            <td class="admin-pages__cell px-4 py-4">
+              <button
+                class="admin-pages__delete rounded border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700 disabled:opacity-50"
+                type="button"
+                :disabled="deletingId === page.id"
+                @click="deletePage(page)"
+              >
+                {{ deletingId === page.id ? '삭제 중' : '삭제' }}
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <p v-if="pages.length === 0" class="admin-pages__empty mt-6 text-sm text-muted">
+      아직 작성된 페이지가 없습니다.
    </p>
  </section>
 </template>
--- a/pages/admin/pages/new.vue
+++ b/pages/admin/pages/new.vue
@@ -0,0 +1,86 @@
+<script setup>
+definePageMeta({
+  layout: 'admin'
+})
+
+const saving = ref(false)
+const errorMessage = ref('')
+const toast = ref(null)
+let toastTimer = null
+
+/**
+ * 저장 상태 토스트 표시
+ * @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 {Object} payload - 페이지 입력값
+ * @returns {Promise<void>} 저장 결과
+ */
+const savePage = async (payload) => {
+  saving.value = true
+  errorMessage.value = ''
+  showToast('info', '페이지를 저장하는 중입니다.')
+
+  try {
+    const page = await $fetch('/admin/api/pages', {
+      method: 'POST',
+      body: payload
+    })
+
+    sessionStorage.setItem('SORI_ADMIN_PAGE_TOAST', JSON.stringify({
+      type: 'success',
+      message: '페이지가 저장되었습니다.'
+    }))
+    await navigateTo(`/admin/pages/${page.id}`)
+  } catch (error) {
+    errorMessage.value = error?.data?.message || '페이지를 저장하지 못했습니다.'
+    showToast('error', errorMessage.value)
+  } finally {
+    saving.value = false
+  }
+}
+
+onBeforeUnmount(() => {
+  window.clearTimeout(toastTimer)
+})
+</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">
+      {{ errorMessage }}
+    </p>
+    <AdminPageForm submit-label="페이지 저장" :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"
+      :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>
--- a/server/repositories/content-repository.js
+++ b/server/repositories/content-repository.js
@@ -338,6 +338,114 @@ export const listPages = async () => {
  return rows.map(mapPageRow)
 }

+/**
+ * 관리자 고정 페이지 목록 조회
+ * @returns {Promise<Array>} 관리자 고정 페이지 목록
+ */
+export const listAdminPages = async () => listPages()
+
+/**
+ * 관리자 고정 페이지 상세 조회
+ * @param {string} id - 페이지 ID
+ * @returns {Promise<Object | null>} 관리자 고정 페이지 상세
+ */
+export const getAdminPageById = async (id) => {
+  const sql = getPostgresClient()
+
+  if (!sql) {
+    return getSamplePages().find((page) => page.id === id) || null
+  }
+
+  const rows = await sql`
+    SELECT *
+    FROM pages
+    WHERE id = ${id}
+    LIMIT 1
+  `
+
+  return rows[0] ? mapPageRow(rows[0]) : null
+}
+
+/**
+ * 관리자 고정 페이지 생성
+ * @param {Object} input - 페이지 입력값
+ * @returns {Promise<Object>} 생성된 페이지
+ */
+export const createAdminPage = async (input) => {
+  const sql = getPostgresClient()
+
+  if (!sql) {
+    throw new Error('DATABASE_REQUIRED')
+  }
+
+  const rows = await sql`
+    INSERT INTO pages (
+      title,
+      slug,
+      content,
+      featured_image
+    )
+    VALUES (
+      ${input.title},
+      ${input.slug},
+      ${input.content},
+      ${input.featuredImage}
+    )
+    RETURNING *
+  `
+
+  return mapPageRow(rows[0])
+}
+
+/**
+ * 관리자 고정 페이지 수정
+ * @param {string} id - 페이지 ID
+ * @param {Object} input - 페이지 입력값
+ * @returns {Promise<Object | null>} 수정된 페이지
+ */
+export const updateAdminPage = async (id, input) => {
+  const sql = getPostgresClient()
+
+  if (!sql) {
+    throw new Error('DATABASE_REQUIRED')
+  }
+
+  const rows = await sql`
+    UPDATE pages
+    SET
+      title = ${input.title},
+      slug = ${input.slug},
+      content = ${input.content},
+      featured_image = ${input.featuredImage},
+      updated_at = now()
+    WHERE id = ${id}
+    RETURNING *
+  `
+
+  return rows[0] ? mapPageRow(rows[0]) : null
+}
+
+/**
+ * 관리자 고정 페이지 삭제
+ * @param {string} id - 페이지 ID
+ * @returns {Promise<boolean>} 삭제 여부
+ */
+export const deleteAdminPage = async (id) => {
+  const sql = getPostgresClient()
+
+  if (!sql) {
+    throw new Error('DATABASE_REQUIRED')
+  }
+
+  const rows = await sql`
+    DELETE FROM pages
+    WHERE id = ${id}
+    RETURNING id
+  `
+
+  return Boolean(rows[0])
+}
+
 /**
 * 공개 고정 페이지 상세 조회
 * @param {string} slug - 페이지 슬러그
--- a/server/routes/admin/api/pages.get.js
+++ b/server/routes/admin/api/pages.get.js
@@ -0,0 +1,13 @@
+import { requireAdminSession } from '../../../utils/admin-auth'
+import { listAdminPages } from '../../../repositories/content-repository'
+
+/**
+ * 관리자 고정 페이지 목록 API
+ * @param {import('h3').H3Event} event - 요청 이벤트
+ * @returns {Promise<Array>} 고정 페이지 목록
+ */
+export default defineEventHandler((event) => {
+  requireAdminSession(event)
+
+  return listAdminPages()
+})
--- a/server/routes/admin/api/pages.post.js
+++ b/server/routes/admin/api/pages.post.js
@@ -0,0 +1,35 @@
+import { createError, readBody } from 'h3'
+import { requireAdminSession } from '../../../utils/admin-auth'
+import { parseAdminPageInput } from '../../../utils/admin-page-input'
+import { createAdminPage } from '../../../repositories/content-repository'
+
+/**
+ * 관리자 고정 페이지 생성 API
+ * @param {import('h3').H3Event} event - 요청 이벤트
+ * @returns {Promise<Object>} 생성된 페이지
+ */
+export default defineEventHandler(async (event) => {
+  requireAdminSession(event)
+
+  const parsedBody = parseAdminPageInput(await readBody(event))
+
+  if (!parsedBody.success) {
+    throw createError({
+      statusCode: 400,
+      message: '페이지 입력 형식이 올바르지 않습니다.'
+    })
+  }
+
+  try {
+    return await createAdminPage(parsedBody.data)
+  } catch (error) {
+    if (error?.code === '23505') {
+      throw createError({
+        statusCode: 409,
+        message: '이미 사용 중인 페이지 슬러그입니다.'
+      })
+    }
+
+    throw error
+  }
+})
--- a/server/routes/admin/api/pages/[id].delete.js
+++ b/server/routes/admin/api/pages/[id].delete.js
@@ -0,0 +1,26 @@
+import { createError, getRouterParam } from 'h3'
+import { requireAdminSession } from '../../../../utils/admin-auth'
+import { deleteAdminPage } from '../../../../repositories/content-repository'
+
+/**
+ * 관리자 고정 페이지 삭제 API
+ * @param {import('h3').H3Event} event - 요청 이벤트
+ * @returns {Promise<{ id: string }>} 삭제된 페이지 ID
+ */
+export default defineEventHandler(async (event) => {
+  requireAdminSession(event)
+
+  const id = getRouterParam(event, 'id')
+  const deleted = await deleteAdminPage(id)
+
+  if (!deleted) {
+    throw createError({
+      statusCode: 404,
+      message: '페이지를 찾을 수 없습니다.'
+    })
+  }
+
+  return {
+    id
+  }
+})
--- a/server/routes/admin/api/pages/[id].get.js
+++ b/server/routes/admin/api/pages/[id].get.js
@@ -0,0 +1,24 @@
+import { createError, getRouterParam } from 'h3'
+import { requireAdminSession } from '../../../../utils/admin-auth'
+import { getAdminPageById } from '../../../../repositories/content-repository'
+
+/**
+ * 관리자 고정 페이지 상세 API
+ * @param {import('h3').H3Event} event - 요청 이벤트
+ * @returns {Promise<Object>} 고정 페이지 상세
+ */
+export default defineEventHandler(async (event) => {
+  requireAdminSession(event)
+
+  const id = getRouterParam(event, 'id')
+  const page = await getAdminPageById(id)
+
+  if (!page) {
+    throw createError({
+      statusCode: 404,
+      message: '페이지를 찾을 수 없습니다.'
+    })
+  }
+
+  return page
+})
--- a/server/routes/admin/api/pages/[id].put.js
+++ b/server/routes/admin/api/pages/[id].put.js
@@ -0,0 +1,45 @@
+import { createError, getRouterParam, readBody } from 'h3'
+import { requireAdminSession } from '../../../../utils/admin-auth'
+import { parseAdminPageInput } from '../../../../utils/admin-page-input'
+import { updateAdminPage } from '../../../../repositories/content-repository'
+
+/**
+ * 관리자 고정 페이지 수정 API
+ * @param {import('h3').H3Event} event - 요청 이벤트
+ * @returns {Promise<Object>} 수정된 페이지
+ */
+export default defineEventHandler(async (event) => {
+  requireAdminSession(event)
+
+  const id = getRouterParam(event, 'id')
+  const parsedBody = parseAdminPageInput(await readBody(event))
+
+  if (!parsedBody.success) {
+    throw createError({
+      statusCode: 400,
+      message: '페이지 입력 형식이 올바르지 않습니다.'
+    })
+  }
+
+  try {
+    const page = await updateAdminPage(id, parsedBody.data)
+
+    if (!page) {
+      throw createError({
+        statusCode: 404,
+        message: '페이지를 찾을 수 없습니다.'
+      })
+    }
+
+    return page
+  } catch (error) {
+    if (error?.code === '23505') {
+      throw createError({
+        statusCode: 409,
+        message: '이미 사용 중인 페이지 슬러그입니다.'
+      })
+    }
+
+    throw error
+  }
+})
--- a/server/utils/admin-page-input.js
+++ b/server/utils/admin-page-input.js
@@ -0,0 +1,15 @@
+import { z } from 'zod'
+
+export const adminPageInputSchema = z.object({
+  title: z.string().trim().min(1),
+  slug: z.string().trim().min(1).regex(/^[a-z0-9가-힣]+(?:-[a-z0-9가-힣]+)*$/),
+  content: z.string().default(''),
+  featuredImage: z.string().trim().nullable().default(null)
+})
+
+/**
+ * 관리자 페이지 입력값 정리
+ * @param {unknown} body - 요청 본문
+ * @returns {import('zod').SafeParseReturnType<unknown, Object>} 검증 결과
+ */
+export const parseAdminPageInput = (body) => adminPageInputSchema.safeParse(body)