관리자 페이지 관리 추가

2026-05-02 16:24:57 +09:00
parent 792460b27a
commit d5666fdcc3
18 changed files with 939 additions and 9 deletions
--- 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>