sori.studio/pages/admin/pages/index.vue

<script setup>
definePageMeta({
  layout: 'admin'
})

const deletingId = ref('')
const errorMessage = ref('')

const { openMenuId, closeMenu } = useAdminRowMenu()

const { data: pages, refresh } = await useFetch('/admin/api/pages', {
  default: () => []
})

/**
 * 페이지 상태 표시 문자열 생성
 * @param {Object} page - 페이지
 * @returns {string} 상태 표시 문자열
 */
const getPageStatusLabel = (page) => {
  if (page.status === 'draft') {
    return '초안'
  }

  if (page.status === 'private') {
    return '비공개'
  }

  return '공개'
}

/**
 * 페이지 상태 텍스트 클래스 생성
 * @param {Object} page - 페이지
 * @returns {string} 상태 텍스트 클래스
 */
const getPageStatusClass = (page) => {
  if (page.status === 'draft') {
    return 'font-bold text-[#fb2d8d]'
  }

  if (page.status === 'private') {
    return 'font-bold text-[#15171a]'
  }

  return 'text-[#99A3AD]'
}

/**
 * 날짜 표시 형식 변환
 * @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) => {
  closeMenu()

  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">
    <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-x-auto 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>
            <th class="admin-pages__cell admin-pages__cell-actions w-12 px-2 py-3 text-right">
              <span class="sr-only">관리</span>
            </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">
              <span class="admin-pages__status-text text-xs" :class="getPageStatusClass(page)">
                {{ getPageStatusLabel(page) }}
              </span>
            </td>
            <td class="admin-pages__cell px-4 py-4">
              {{ formatDate(page.updatedAt) }}
            </td>
            <td class="admin-pages__cell admin-pages__cell-actions relative w-12 px-2 py-4 text-right">
              <AdminRowMoreMenu
                v-model:open-menu-id="openMenuId"
                :item-id="page.id"
                menu-label="페이지 메뉴"
                :busy="deletingId === page.id"
              >
                <NuxtLink
                  class="admin-row-more-menu__item"
                  :to="`/admin/pages/${page.id}`"
                  role="menuitem"
                  @click="closeMenu"
                >
                  페이지 수정
                </NuxtLink>
                <button
                  class="admin-row-more-menu__item admin-row-more-menu__item--danger"
                  type="button"
                  role="menuitem"
                  :disabled="deletingId === page.id"
                  @click="deletePage(page)"
                >
                  페이지 삭제
                </button>
              </AdminRowMoreMenu>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <p v-if="pages.length === 0" class="admin-pages__empty mt-6 text-sm text-muted">
      아직 작성된 페이지가 없습니다.
    </p>
  </section>
</template>