38 lines
2.6 KiB
Vue
38 lines
2.6 KiB
Vue
<script setup>
|
|
const { data, error, refresh } = await useFetch('/admin/api/comments', {
|
|
query: { pageSize: 5 },
|
|
default: () => ({ items: [], pagination: { total: 0 } })
|
|
})
|
|
let refreshTimer = null
|
|
onMounted(() => { refreshTimer = window.setInterval(() => refresh(), 30000) })
|
|
onUnmounted(() => { if (refreshTimer) window.clearInterval(refreshTimer) })
|
|
|
|
/**
|
|
* 최근 댓글의 작성 시각을 짧게 표시한다.
|
|
* @param {string} value - 작성 시각
|
|
* @returns {string} 한국어 날짜·시각
|
|
*/
|
|
const formatCreatedAt = (value) => new Intl.DateTimeFormat('ko-KR', {
|
|
month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit', timeZone: 'Asia/Seoul'
|
|
}).format(new Date(value))
|
|
</script>
|
|
|
|
<template>
|
|
<section class="admin-comment-list border border-line bg-white px-4 py-3">
|
|
<h2 class="admin-comment-list__heading mb-1 text-xs font-semibold text-muted">최근 댓글 <span class="font-normal">· 전체 {{ data?.pagination.total || 0 }}개</span></h2>
|
|
<p v-if="error" class="admin-comment-list__error text-xs text-red-700" role="alert">
|
|
댓글을 불러오지 못했습니다. <button type="button" class="underline" @click="refresh()">다시 시도</button>
|
|
</p>
|
|
<p v-else-if="!data?.items.length" class="admin-comment-list__empty py-1 text-xs text-muted">작성한 댓글이 없습니다.</p>
|
|
<ul v-else class="admin-comment-list__items divide-y divide-line">
|
|
<li v-for="comment in data.items" :key="comment.id" class="admin-comment-list__item grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-0.5 py-1.5 text-xs md:grid-cols-[minmax(0,2fr)_7rem_8rem_minmax(0,3fr)]">
|
|
<NuxtLink :to="`/post/${encodeURIComponent(comment.postSlug)}#comments`" v-if="['published', 'members'].includes(comment.postStatus)" target="_blank" rel="noopener noreferrer" class="admin-comment-list__post truncate font-medium hover:underline" :title="comment.postTitle">{{ comment.postTitle || '(제목 없음)' }}</NuxtLink>
|
|
<NuxtLink v-else :to="`/admin/posts/${comment.postId}`" class="admin-comment-list__post truncate font-medium hover:underline" :title="comment.postTitle">{{ comment.postTitle || '(제목 없음)' }}</NuxtLink>
|
|
<NuxtLink :to="`/admin/members/${comment.userId}`" class="admin-comment-list__author truncate text-muted hover:underline" :title="comment.username">{{ comment.username }}</NuxtLink>
|
|
<time :datetime="comment.createdAt" class="admin-comment-list__time text-muted">{{ formatCreatedAt(comment.createdAt) }}</time>
|
|
<p class="admin-comment-list__body truncate text-muted" :title="comment.body">{{ comment.body }}</p>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</template>
|