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

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

const deletingId = ref('')
const errorMessage = ref('')
const analyticsModalPage = ref(null)
const analyticsModalData = ref(createDefaultPageAnalytics())
const analyticsModalPeriod = ref('daily')
const analyticsModalMetric = ref('views')
const analyticsModalChartPageOffset = ref(0)
const analyticsModalLoading = ref(false)
const analyticsModalError = ref('')

const { openMenuId, closeMenu } = useAdminRowMenu()

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

const analyticsPeriodOptions = [
  { label: '일간', value: 'daily', days: 14 },
  { label: '주간', value: 'weekly', days: 84 },
  { label: '월간', value: 'monthly', days: 365 }
]

const analyticsMetricOptions = [
  { label: '조회수', value: 'views' },
  { label: '방문자', value: 'visitors' }
]

/**
 * 페이지별 통계 기본값을 생성한다.
 * @returns {Object} 페이지별 통계 기본값
 */
function createDefaultPageAnalytics() {
  return {
    updatedAt: '',
    total: {
      views: 0,
      visitors: 0,
      avgEngagedSeconds: 0,
      scroll50: 0,
      scroll75: 0,
      scroll100: 0
    },
    period: {
      views: 0,
      visitors: 0,
      avgEngagedSeconds: 0,
      scroll50: 0,
      scroll75: 0,
      scroll100: 0
    },
    trends: []
  }
}

/** 페이지 통계 모달이 열려 있는지 */
const isAnalyticsModalOpen = computed(() => Boolean(analyticsModalPage.value))

/**
 * 숫자를 관리자 목록 표시 형식으로 변환한다.
 * @param {number} value - 숫자 값
 * @returns {string} 표시 문자열
 */
const formatAdminNumber = (value) => {
  return new Intl.NumberFormat('ko-KR').format(Number(value || 0))
}

/**
 * 날짜 값을 YYYY.MM.DD HH:mm 형식으로 표시한다.
 * @param {string | null} value - 날짜 값
 * @returns {string} 표시 문자열
 */
const formatAdminDateTimeLabel = (value) => {
  if (!value) {
    return '-'
  }

  const date = new Date(value)
  if (Number.isNaN(date.getTime())) {
    return '-'
  }

  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')

  return `${year}.${month}.${day} ${hours}:${minutes}`
}

/**
 * 초 단위 체류시간을 표시 문자열로 변환한다.
 * @param {number} seconds - 초
 * @returns {string} 표시 문자열
 */
const formatEngagedDuration = (seconds) => {
  const value = Number(seconds) || 0
  if (value < 60) {
    return `${value}초`
  }

  const minutes = Math.floor(value / 60)
  const remainSeconds = value % 60
  return remainSeconds > 0 ? `${minutes}분 ${remainSeconds}초` : `${minutes}분`
}

/**
 * 페이지 통계 기간 표시명을 반환한다.
 * @returns {string} 기간 표시명
 */
const getAnalyticsPeriodLabel = () => {
  return analyticsPeriodOptions.find((option) => option.value === analyticsModalPeriod.value)?.label || '일간'
}

/**
 * 페이지 통계 기간 조회 일수를 반환한다.
 * @returns {number} 조회 일수
 */
const getAnalyticsPeriodDays = () => {
  return analyticsPeriodOptions.find((option) => option.value === analyticsModalPeriod.value)?.days || 14
}

/**
 * 페이지 상태 표시 문자열 생성
 * @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}`
}

/**
 * 페이지 통계 모달 데이터를 조회한다.
 * @returns {Promise<void>}
 */
const fetchAnalyticsModalData = async () => {
  if (!analyticsModalPage.value?.id) {
    return
  }

  analyticsModalLoading.value = true
  analyticsModalError.value = ''

  try {
    analyticsModalData.value = await $fetch(`/admin/api/analytics/pages/${analyticsModalPage.value.id}`, {
      query: {
        period: analyticsModalPeriod.value,
        days: getAnalyticsPeriodDays()
      }
    })
  } catch (error) {
    analyticsModalData.value = createDefaultPageAnalytics()
    analyticsModalError.value = error?.data?.message || '페이지 통계를 불러오지 못했습니다.'
  } finally {
    analyticsModalLoading.value = false
  }
}

/**
 * 페이지 통계 모달을 연다.
 * @param {Object} page - 페이지
 * @returns {Promise<void>}
 */
const openAnalyticsModal = async (page) => {
  closeMenu()
  analyticsModalPage.value = page
  analyticsModalPeriod.value = 'daily'
  analyticsModalMetric.value = 'views'
  analyticsModalChartPageOffset.value = 0
  analyticsModalData.value = createDefaultPageAnalytics()
  await fetchAnalyticsModalData()
}

/**
 * 페이지 통계 모달을 닫는다.
 * @returns {void}
 */
const closeAnalyticsModal = () => {
  analyticsModalPage.value = null
  analyticsModalError.value = ''
  analyticsModalData.value = createDefaultPageAnalytics()
}

/**
 * 통계 모달 집계 단위를 변경한다.
 * @param {string} period - 집계 단위
 * @returns {Promise<void>}
 */
const selectAnalyticsModalPeriod = async (period) => {
  analyticsModalPeriod.value = period
  analyticsModalChartPageOffset.value = 0
  await fetchAnalyticsModalData()
}

/**
 * 고정 페이지 삭제
 * @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 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 admin-pages__cell-views px-4 py-4">
              <p class="admin-pages__view-count text-[#394047]">
                {{ formatAdminNumber(page.totalViews) }}
              </p>
              <button
                class="admin-pages__analytics-link mt-1 inline-flex text-xs text-muted transition-colors hover:text-[#2f6feb]"
                type="button"
                @click.stop="openAnalyticsModal(page)"
              >
                통계
              </button>
            </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>

    <Teleport to="body">
      <div
        v-if="isAnalyticsModalOpen"
        class="admin-pages__analytics-modal fixed inset-0 z-[90] flex items-center justify-center bg-black/40 px-4 py-6"
        role="dialog"
        aria-modal="true"
        aria-labelledby="admin-pages-analytics-modal-title"
        @click.self="closeAnalyticsModal"
      >
        <article class="admin-pages__analytics-modal-panel max-h-[90vh] w-full max-w-4xl overflow-y-auto rounded-lg border border-line bg-white shadow-xl">
          <header class="admin-pages__analytics-modal-header flex items-start justify-between gap-4 border-b border-line px-5 py-4">
            <div class="min-w-0">
              <p class="text-xs font-semibold uppercase text-muted">
                페이지 통계
              </p>
              <h2 id="admin-pages-analytics-modal-title" class="mt-1 truncate text-lg font-semibold text-ink">
                {{ analyticsModalPage?.title || '(제목 없음)' }}
              </h2>
              <p class="mt-1 text-xs text-muted">
                {{ formatAdminDateTimeLabel(analyticsModalData.updatedAt) }} 기준
              </p>
            </div>
            <button
              class="admin-pages__analytics-modal-close border border-line px-3 py-1 text-xs font-medium text-muted hover:bg-paper hover:text-ink"
              type="button"
              @click="closeAnalyticsModal"
            >
              닫기
            </button>
          </header>

          <div class="admin-pages__analytics-modal-body space-y-4 p-5">
            <p v-if="analyticsModalLoading" class="text-sm text-muted">
              페이지 통계를 불러오는 중입니다.
            </p>
            <p v-else-if="analyticsModalError" class="text-sm text-red-600">
              {{ analyticsModalError }}
            </p>

            <template v-else>
              <div class="admin-pages__analytics-modal-summary grid gap-3 sm:grid-cols-4">
                <article class="border border-line bg-paper p-3">
                  <p class="text-[11px] font-semibold uppercase text-muted">
                    누적 조회수
                  </p>
                  <strong class="mt-1 block text-lg text-ink">
                    {{ formatAdminNumber(analyticsModalData.total.views) }}
                  </strong>
                </article>
                <article class="border border-line bg-paper p-3">
                  <p class="text-[11px] font-semibold uppercase text-muted">
                    방문자
                  </p>
                  <strong class="mt-1 block text-lg text-ink">
                    {{ formatAdminNumber(analyticsModalData.period.visitors) }}
                  </strong>
                </article>
                <article class="border border-line bg-paper p-3">
                  <p class="text-[11px] font-semibold uppercase text-muted">
                    평균 체류
                  </p>
                  <strong class="mt-1 block text-lg text-ink">
                    {{ formatEngagedDuration(analyticsModalData.period.avgEngagedSeconds) }}
                  </strong>
                </article>
                <article class="border border-line bg-paper p-3">
                  <p class="text-[11px] font-semibold uppercase text-muted">
                    50% 스크롤
                  </p>
                  <strong class="mt-1 block text-lg text-ink">
                    {{ formatAdminNumber(analyticsModalData.period.scroll50) }}
                  </strong>
                </article>
              </div>

              <section class="admin-pages__analytics-modal-chart border border-line bg-paper p-4">
                <div class="flex flex-wrap items-center justify-between gap-3">
                  <div>
                    <h3 class="text-xs font-semibold uppercase text-muted">
                      통계 추이
                    </h3>
                    <p class="mt-1 text-xs text-muted">
                      {{ getAnalyticsPeriodLabel() }} 기준
                    </p>
                  </div>
                  <div class="flex flex-wrap gap-2">
                    <div class="inline-flex border border-line bg-white">
                      <button
                        v-for="metric in analyticsMetricOptions"
                        :key="metric.value"
                        class="h-8 border-r border-line px-3 text-xs font-semibold last:border-r-0"
                        :class="analyticsModalMetric === metric.value ? 'bg-[#15171a] !text-white hover:!bg-[#15171a] hover:!text-white' : 'text-muted hover:bg-paper hover:text-ink'"
                        type="button"
                        @click="analyticsModalMetric = metric.value"
                      >
                        {{ metric.label }}
                      </button>
                    </div>
                    <div class="inline-flex border border-line bg-white">
                      <button
                        v-for="option in analyticsPeriodOptions"
                        :key="option.value"
                        class="h-8 border-r border-line px-3 text-xs font-semibold last:border-r-0"
                        :class="analyticsModalPeriod === option.value ? 'bg-[#15171a] !text-white hover:!bg-[#15171a] hover:!text-white' : 'text-muted hover:bg-paper hover:text-ink'"
                        type="button"
                        @click="selectAnalyticsModalPeriod(option.value)"
                      >
                        {{ option.label }}
                      </button>
                    </div>
                  </div>
                </div>

                <AdminAnalyticsTrendChart
                  class="mt-4"
                  :rows="analyticsModalData.trends"
                  :period="analyticsModalPeriod"
                  :metric-key="analyticsModalMetric"
                  :metric-label="analyticsModalMetric === 'views' ? '조회수' : '방문자'"
                  :format-value="formatAdminNumber"
                  v-model:page-offset="analyticsModalChartPageOffset"
                  :show-header="false"
                  compact
                  bar-height-class="h-36"
                />
              </section>

              <div class="admin-pages__analytics-modal-engagement grid gap-3 sm:grid-cols-3">
                <article class="border border-line bg-paper p-3">
                  <p class="text-[11px] font-semibold uppercase text-muted">
                    75% 스크롤
                  </p>
                  <strong class="mt-1 block text-lg text-ink">
                    {{ formatAdminNumber(analyticsModalData.period.scroll75) }}
                  </strong>
                </article>
                <article class="border border-line bg-paper p-3">
                  <p class="text-[11px] font-semibold uppercase text-muted">
                    100% 스크롤
                  </p>
                  <strong class="mt-1 block text-lg text-ink">
                    {{ formatAdminNumber(analyticsModalData.period.scroll100) }}
                  </strong>
                </article>
                <article class="border border-line bg-paper p-3">
                  <p class="text-[11px] font-semibold uppercase text-muted">
                    선택 기간 조회수
                  </p>
                  <strong class="mt-1 block text-lg text-ink">
                    {{ formatAdminNumber(analyticsModalData.period.views) }}
                  </strong>
                </article>
              </div>
            </template>
          </div>
        </article>
      </div>
    </Teleport>
  </section>
</template>