725 lines
29 KiB
Vue
725 lines
29 KiB
Vue
<script setup>
|
|
definePageMeta({
|
|
layout: 'admin'
|
|
})
|
|
|
|
const deletingId = ref('')
|
|
const errorMessage = ref('')
|
|
const searchQuery = ref('')
|
|
const statusFilter = ref('all')
|
|
const listedFilter = ref('all')
|
|
const sortOrder = ref('newest')
|
|
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 {
|
|
displayValue: searchInput,
|
|
onInput: onSearchInput,
|
|
onCompositionEnd: onSearchCompositionEnd
|
|
} = useImeSearchInput(searchQuery, { debounce: 200 })
|
|
|
|
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))
|
|
/** 전체 페이지 수 */
|
|
const totalPageCount = computed(() => pages.value.length)
|
|
/** 홈 표시 페이지 수 */
|
|
const listedPageCount = computed(() => pages.value.filter((page) => page.isListed).length)
|
|
/** 추천 페이지 수 */
|
|
const featuredPageCount = computed(() => pages.value.filter((page) => page.isFeatured).length)
|
|
/** 페이지 목록 필터가 적용되어 있는지 */
|
|
const hasActiveListFilters = computed(() => {
|
|
return searchQuery.value.trim()
|
|
|| statusFilter.value !== 'all'
|
|
|| listedFilter.value !== 'all'
|
|
|| sortOrder.value !== 'newest'
|
|
})
|
|
/** 검색·필터·정렬이 적용된 페이지 목록 */
|
|
const filteredPages = computed(() => {
|
|
const keyword = searchQuery.value.trim().toLowerCase()
|
|
const filtered = pages.value.filter((page) => {
|
|
const matchesStatus = statusFilter.value === 'all'
|
|
|| page.status === statusFilter.value
|
|
const matchesListed = listedFilter.value === 'all'
|
|
|| (listedFilter.value === 'listed' && page.isListed)
|
|
|| (listedFilter.value === 'featured' && page.isFeatured)
|
|
|
|
if (!matchesStatus || !matchesListed) {
|
|
return false
|
|
}
|
|
|
|
if (!keyword) {
|
|
return true
|
|
}
|
|
|
|
return [
|
|
page.title,
|
|
page.slug,
|
|
page.listingTitle,
|
|
page.listingDescription,
|
|
page.status,
|
|
page.listingSection
|
|
].some((value) => String(value || '').toLowerCase().includes(keyword))
|
|
})
|
|
|
|
return [...filtered].sort((a, b) => {
|
|
const firstTime = new Date(sortOrder.value === 'oldest' ? a.createdAt : a.updatedAt).getTime() || 0
|
|
const secondTime = new Date(sortOrder.value === 'oldest' ? b.createdAt : b.updatedAt).getTime() || 0
|
|
|
|
return sortOrder.value === 'oldest'
|
|
? firstTime - secondTime
|
|
: secondTime - firstTime
|
|
})
|
|
})
|
|
/** 현재 필터 기준 표시 페이지 수 */
|
|
const filteredPageCount = computed(() => filteredPages.value.length)
|
|
|
|
/**
|
|
* 숫자를 관리자 목록 표시 형식으로 변환한다.
|
|
* @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 {Object} page - 페이지
|
|
* @returns {boolean} 공개 여부
|
|
*/
|
|
const isPublicPage = (page) => page.status === 'published'
|
|
|
|
/**
|
|
* 페이지 목록 썸네일 URL을 반환한다.
|
|
* @param {Object} page - 페이지
|
|
* @returns {string} 썸네일 URL
|
|
*/
|
|
const getPageThumbnailSrc = (page) => {
|
|
return page.listingImageThumbnail || page.featuredImage || ''
|
|
}
|
|
|
|
/**
|
|
* 날짜 표시 형식 변환
|
|
* @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 flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
|
<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>
|
|
<p class="admin-pages__count mt-2 text-sm text-muted">
|
|
총 {{ formatAdminNumber(totalPageCount) }}개
|
|
<template v-if="listedPageCount > 0">
|
|
<span class="admin-pages__count-separator text-[#c8ced3]"> · </span>
|
|
<span class="admin-pages__count-listed">홈 표시 {{ formatAdminNumber(listedPageCount) }}개</span>
|
|
</template>
|
|
<template v-if="featuredPageCount > 0">
|
|
<span class="admin-pages__count-separator text-[#c8ced3]"> · </span>
|
|
<span class="admin-pages__count-featured">추천 {{ formatAdminNumber(featuredPageCount) }}개</span>
|
|
</template>
|
|
<template v-if="hasActiveListFilters && filteredPageCount !== totalPageCount">
|
|
<span class="admin-pages__count-separator text-[#c8ced3]"> · </span>
|
|
<span class="admin-pages__count-filtered">표시 {{ formatAdminNumber(filteredPageCount) }}개</span>
|
|
</template>
|
|
</p>
|
|
</div>
|
|
<div class="admin-pages__header-actions flex min-w-0 flex-1 flex-wrap items-center justify-start gap-2 lg:flex-nowrap lg:justify-end">
|
|
<div class="admin-pages__filters flex min-w-0 flex-wrap items-center gap-2">
|
|
<AdminSearchInput
|
|
:value="searchInput"
|
|
label="페이지 검색"
|
|
placeholder="페이지 검색"
|
|
root-class="admin-pages__search"
|
|
input-class="admin-pages__search-input"
|
|
@input="onSearchInput"
|
|
@compositionupdate="onSearchInput"
|
|
@compositionend="onSearchCompositionEnd"
|
|
/>
|
|
<label class="admin-pages__filter">
|
|
<span class="sr-only">상태 필터</span>
|
|
<span class="admin-pages__filter-select-wrap relative block">
|
|
<select v-model="statusFilter" class="admin-pages__filter-select h-10 appearance-none rounded border border-line bg-white pl-3 pr-9 text-sm text-[#394047] outline-none transition-colors hover:border-[#c8ced3] focus:border-[#8e9cac]">
|
|
<option value="all">전체 상태</option>
|
|
<option value="published">공개</option>
|
|
<option value="draft">초안</option>
|
|
<option value="private">비공개</option>
|
|
</select>
|
|
<svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
|
|
</span>
|
|
</label>
|
|
<label class="admin-pages__filter">
|
|
<span class="sr-only">노출 필터</span>
|
|
<span class="admin-pages__filter-select-wrap relative block">
|
|
<select v-model="listedFilter" class="admin-pages__filter-select h-10 appearance-none rounded border border-line bg-white pl-3 pr-9 text-sm text-[#394047] outline-none transition-colors hover:border-[#c8ced3] focus:border-[#8e9cac]">
|
|
<option value="all">전체 페이지</option>
|
|
<option value="listed">홈 표시</option>
|
|
<option value="featured">추천만</option>
|
|
</select>
|
|
<svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
|
|
</span>
|
|
</label>
|
|
<label class="admin-pages__filter">
|
|
<span class="sr-only">정렬</span>
|
|
<span class="admin-pages__filter-select-wrap relative block">
|
|
<select v-model="sortOrder" class="admin-pages__filter-select h-10 appearance-none rounded border border-line bg-white pl-3 pr-9 text-sm text-[#394047] outline-none transition-colors hover:border-[#c8ced3] focus:border-[#8e9cac]">
|
|
<option value="newest">최신순</option>
|
|
<option value="oldest">오래된순</option>
|
|
</select>
|
|
<svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<NuxtLink class="admin-pages__new shrink-0 rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white" to="/admin/pages/new">
|
|
새 페이지
|
|
</NuxtLink>
|
|
</div>
|
|
</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 admin-pages__cell-featured w-10 px-2 py-3 text-center">
|
|
<span class="sr-only">추천</span>
|
|
<span class="inline-flex size-4 items-center justify-center text-[#f5a623]" aria-hidden="true">★</span>
|
|
</th>
|
|
<th class="admin-pages__cell admin-pages__cell-thumbnail w-16 px-2 py-3">
|
|
<span class="sr-only">썸네일</span>
|
|
</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 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 filteredPages" :key="page.id" class="admin-pages__row group">
|
|
<td class="admin-pages__cell admin-pages__cell-featured w-10 px-2 py-4 text-center">
|
|
<span
|
|
v-if="page.isFeatured"
|
|
class="admin-pages__featured-star inline-flex size-8 items-center justify-center text-[#f5a623]"
|
|
title="추천 페이지"
|
|
aria-label="추천 페이지"
|
|
>
|
|
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
|
</svg>
|
|
</span>
|
|
</td>
|
|
<td class="admin-pages__cell admin-pages__cell-thumbnail w-16 px-2 py-4">
|
|
<span class="admin-pages__thumbnail block h-9 w-12 overflow-hidden rounded bg-[#eef1f4]">
|
|
<img
|
|
v-if="getPageThumbnailSrc(page)"
|
|
class="h-full w-full object-cover"
|
|
:src="getPageThumbnailSrc(page)"
|
|
:alt="page.title || '페이지 썸네일'"
|
|
loading="lazy"
|
|
>
|
|
</span>
|
|
</td>
|
|
<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>
|
|
<span v-if="page.isListed" class="admin-pages__listed-badge ml-2 inline-flex h-5 items-center rounded bg-[#eff1f2] px-2 text-[11px] font-semibold text-[#7c8b9a]">
|
|
홈 표시
|
|
</span>
|
|
<span v-if="page.isListed && page.listingSection" class="admin-pages__section-badge ml-1 inline-flex h-5 items-center rounded bg-white px-2 text-[11px] font-semibold text-[#7c8b9a] ring-1 ring-[#e3e6e8]">
|
|
{{ page.listingSection }}
|
|
</span>
|
|
<span v-if="page.isFeatured" class="admin-pages__featured-badge ml-1 inline-flex h-5 items-center rounded bg-[#15171a] px-2 text-[11px] font-semibold text-white">
|
|
추천
|
|
</span>
|
|
<div class="admin-pages__slug-row mt-1 flex items-center gap-1 text-xs text-muted">
|
|
<span class="admin-pages__slug truncate">/pages/{{ page.slug }}</span>
|
|
<NuxtLink
|
|
v-if="isPublicPage(page)"
|
|
class="admin-pages__preview-link inline-flex size-5 items-center justify-center rounded text-[#8e9cac] opacity-0 transition-colors hover:text-[#394047] focus:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#8e9cac] group-hover:opacity-100 group-focus-within:opacity-100"
|
|
:to="`/pages/${page.slug}`"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="공개 페이지 보기"
|
|
title="공개 페이지 보기"
|
|
@click.stop
|
|
>
|
|
<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M17 7 7 17" />
|
|
<path d="M8 7h9v9" />
|
|
</svg>
|
|
</NuxtLink>
|
|
</div>
|
|
</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>
|
|
<p v-else-if="filteredPages.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>
|