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

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

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

const { data: posts, refresh } = await useFetch('/admin/api/posts', {
  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} post - 게시물
 * @returns {boolean} 공개 여부
 */
const isPublicPost = (post) => post.status === 'published'
  && (!post.publishedAt || new Date(post.publishedAt) <= new Date())

/**
 * 게시물 상태 표시 문자열 생성
 * @param {Object} post - 게시물
 * @returns {string} 상태 표시 문자열
 */
const getPostStatusLabel = (post) => {
  if (post.status === 'published' && !isPublicPost(post)) {
    return '예약'
  }

  if (post.status === 'published') {
    return '발행'
  }

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

  return '초안'
}

/**
 * 게시물 삭제
 * @param {Object} post - 삭제할 게시물
 * @returns {Promise<void>} 삭제 처리 결과
 */
const deletePost = async (post) => {
  if (!confirm(`"${post.title}" 글을 삭제할까요?`)) {
    return
  }

  deletingId.value = post.id
  errorMessage.value = ''

  try {
    await $fetch(`/admin/api/posts/${post.id}`, {
      method: 'DELETE'
    })
    await refresh()
  } catch (error) {
    errorMessage.value = error?.data?.message || '글을 삭제하지 못했습니다.'
  } finally {
    deletingId.value = ''
  }
}
</script>

<template>
  <section class="admin-posts bg-paper p-6">
    <div class="admin-posts__header flex items-center justify-between gap-4">
      <div>
        <p class="admin-posts__eyebrow text-xs font-semibold uppercase text-muted">
          Posts
        </p>
        <h1 class="admin-posts__title mt-2 text-3xl font-semibold">
          글 목록
        </h1>
      </div>
      <NuxtLink class="admin-posts__new rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white" to="/admin/posts/new">
        새 글
      </NuxtLink>
    </div>

    <p v-if="errorMessage" class="admin-posts__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-posts__table mt-8 overflow-hidden border border-line">
      <table class="admin-posts__table-inner w-full border-collapse text-left text-sm">
        <thead class="admin-posts__table-head bg-[#f5f5f2] text-xs uppercase text-muted">
          <tr>
            <th class="admin-posts__cell px-4 py-3">제목</th>
            <th class="admin-posts__cell px-4 py-3">상태</th>
            <th class="admin-posts__cell px-4 py-3">태그</th>
            <th class="admin-posts__cell px-4 py-3">수정일</th>
            <th class="admin-posts__cell px-4 py-3">관리</th>
          </tr>
        </thead>
        <tbody class="admin-posts__table-body divide-y divide-line bg-white">
          <tr v-for="post in posts" :key="post.id" class="admin-posts__row">
            <td class="admin-posts__cell px-4 py-4">
              <NuxtLink class="admin-posts__title-link font-semibold hover:opacity-70" :to="`/admin/posts/${post.id}`">
                {{ post.title }}
              </NuxtLink>
              <p class="admin-posts__slug mt-1 text-xs text-muted">
                /post/{{ post.slug }}
              </p>
            </td>
            <td class="admin-posts__cell px-4 py-4">
              <span
                class="admin-posts__status rounded px-2 py-1 text-xs font-semibold"
                :class="{
                  'bg-green-50 text-green-700': getPostStatusLabel(post) === '발행',
                  'bg-blue-50 text-blue-700': getPostStatusLabel(post) === '예약',
                  'bg-[#f5f5f2] text-muted': getPostStatusLabel(post) === '초안',
                  'bg-red-50 text-red-700': getPostStatusLabel(post) === '비공개'
                }"
              >
                {{ getPostStatusLabel(post) }}
              </span>
              <p v-if="post.publishedAt" class="admin-posts__published-at mt-1 text-xs text-muted">
                {{ formatDate(post.publishedAt) }}
              </p>
            </td>
            <td class="admin-posts__cell px-4 py-4">
              {{ post.tags.join(', ') || '-' }}
            </td>
            <td class="admin-posts__cell px-4 py-4">
              {{ formatDate(post.updatedAt) }}
            </td>
            <td class="admin-posts__cell px-4 py-4">
              <button
                class="admin-posts__delete-icon inline-flex size-9 items-center justify-center rounded text-muted opacity-35 transition-all hover:opacity-100 hover:text-red-600 focus-visible:outline focus-visible:ring-2 focus-visible:ring-[#8e9cac] focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-20"
                type="button"
                :disabled="deletingId === post.id"
                :aria-label="deletingId === post.id ? '삭제 중' : '삭제'"
                @click="deletePost(post)"
              >
                <span v-if="deletingId === post.id" class="admin-posts__delete-progress text-[10px] font-semibold text-muted" aria-hidden="true">…</span>
                <svg
                  v-else
                  class="size-5 shrink-0"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
                </svg>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <p v-if="posts.length === 0" class="admin-posts__empty mt-6 text-sm text-muted">
      아직 작성된 글이 없습니다.
    </p>
  </section>
</template>