v0.1.40 - 관리자 대시보드 기본 구조 추가
This commit is contained in:
185
src/components/AdminDashboard.vue
Normal file
185
src/components/AdminDashboard.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
summary: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
users: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
recentLogins: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
busy: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
message: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
function formatDate(value) {
|
||||
if (!value) {
|
||||
return '기록 없음'
|
||||
}
|
||||
|
||||
const date = new Date(value)
|
||||
|
||||
if (Number.isNaN(date.getTime())) {
|
||||
return '기록 없음'
|
||||
}
|
||||
|
||||
return new Intl.DateTimeFormat('ko-KR', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}).format(date)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="grid gap-6">
|
||||
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||||
<article class="rounded-[28px] border border-white/60 bg-white/80 p-6">
|
||||
<p class="text-[11px] font-bold uppercase tracking-[0.24em] text-stone-500">Total Users</p>
|
||||
<p class="mt-4 text-4xl font-semibold tracking-[-0.06em] text-stone-900">{{ summary.totalUsers }}</p>
|
||||
<p class="mt-2 text-sm font-semibold text-stone-500">현재 가입된 전체 계정 수</p>
|
||||
</article>
|
||||
|
||||
<article class="rounded-[28px] border border-white/60 bg-white/80 p-6">
|
||||
<p class="text-[11px] font-bold uppercase tracking-[0.24em] text-stone-500">Active 30 Days</p>
|
||||
<p class="mt-4 text-4xl font-semibold tracking-[-0.06em] text-stone-900">{{ summary.activeUsers30d }}</p>
|
||||
<p class="mt-2 text-sm font-semibold text-stone-500">최근 30일 안에 접속한 사용자</p>
|
||||
</article>
|
||||
|
||||
<article class="rounded-[28px] border border-white/60 bg-white/80 p-6">
|
||||
<p class="text-[11px] font-bold uppercase tracking-[0.24em] text-stone-500">Planner Entries</p>
|
||||
<p class="mt-4 text-4xl font-semibold tracking-[-0.06em] text-stone-900">{{ summary.totalPlannerEntries }}</p>
|
||||
<p class="mt-2 text-sm font-semibold text-stone-500">전체 작성된 날짜 문서 수</p>
|
||||
</article>
|
||||
|
||||
<article class="rounded-[28px] border border-white/60 bg-white/80 p-6">
|
||||
<p class="text-[11px] font-bold uppercase tracking-[0.24em] text-stone-500">Verified / Admin</p>
|
||||
<p class="mt-4 text-3xl font-semibold tracking-[-0.06em] text-stone-900">{{ summary.verifiedUsers }} / {{ summary.totalAdmins }}</p>
|
||||
<p class="mt-2 text-sm font-semibold text-stone-500">인증 완료 계정 수 / 관리자 수</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 xl:grid-cols-[320px_minmax(0,1fr)]">
|
||||
<aside class="rounded-[28px] border border-white/60 bg-white/75 p-6">
|
||||
<p class="text-[11px] font-bold uppercase tracking-[0.24em] text-stone-500">운영 요약</p>
|
||||
<div class="mt-5 space-y-4">
|
||||
<div class="rounded-2xl border border-stone-200 bg-white px-4 py-4">
|
||||
<p class="text-[10px] font-bold tracking-[0.18em] text-stone-500">최근 7일 신규 가입</p>
|
||||
<p class="mt-2 text-2xl font-semibold tracking-[-0.05em] text-stone-900">{{ summary.newUsers7d }}명</p>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-stone-200 bg-white px-4 py-4">
|
||||
<p class="text-[10px] font-bold tracking-[0.18em] text-stone-500">전체 목표 수</p>
|
||||
<p class="mt-2 text-2xl font-semibold tracking-[-0.05em] text-stone-900">{{ summary.totalGoals }}개</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<p class="text-[11px] font-bold uppercase tracking-[0.24em] text-stone-500">최근 접속</p>
|
||||
<div class="mt-4 space-y-3">
|
||||
<article
|
||||
v-for="user in recentLogins"
|
||||
:key="`recent-${user.id}`"
|
||||
class="rounded-2xl border border-stone-200 bg-white px-4 py-4"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<p class="text-sm font-semibold text-stone-900">{{ user.nickname }}</p>
|
||||
<span class="rounded-full bg-stone-100 px-2 py-1 text-[10px] font-bold tracking-[0.12em] text-stone-600">
|
||||
{{ user.role }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="mt-1 text-xs font-semibold text-stone-500">{{ user.email }}</p>
|
||||
<p class="mt-3 text-[11px] font-semibold text-stone-600">{{ formatDate(user.lastLoginAt) }}</p>
|
||||
</article>
|
||||
<p v-if="recentLogins.length === 0" class="rounded-2xl border border-dashed border-stone-300 bg-white/80 px-4 py-4 text-sm font-semibold text-stone-500">
|
||||
아직 접속 기록이 없습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section class="rounded-[28px] border border-white/60 bg-white/75 p-6">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p class="text-[11px] font-bold uppercase tracking-[0.24em] text-stone-500">사용자 목록</p>
|
||||
<p class="mt-2 text-sm font-semibold text-stone-500">최종 접속일, 작성 문서 수, 목표 수를 한 번에 볼 수 있습니다.</p>
|
||||
</div>
|
||||
<div v-if="busy" class="rounded-full bg-stone-900 px-4 py-2 text-[11px] font-bold tracking-[0.16em] text-white">
|
||||
불러오는 중...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="message"
|
||||
class="mt-4 rounded-2xl border border-stone-300 bg-white/80 px-4 py-3 text-sm font-semibold leading-6 text-stone-700"
|
||||
>
|
||||
{{ message }}
|
||||
</p>
|
||||
|
||||
<div class="mt-5 overflow-hidden rounded-[24px] border border-stone-200 bg-white">
|
||||
<div class="hidden grid-cols-[84px_minmax(0,1.4fr)_120px_150px_110px_100px_150px] gap-3 border-b border-stone-200 bg-[#f8f4ed] px-5 py-4 text-[10px] font-bold uppercase tracking-[0.18em] text-stone-500 xl:grid">
|
||||
<span>ID</span>
|
||||
<span>사용자</span>
|
||||
<span>권한</span>
|
||||
<span>최종 접속</span>
|
||||
<span>문서 수</span>
|
||||
<span>목표 수</span>
|
||||
<span>상태</span>
|
||||
</div>
|
||||
|
||||
<div class="divide-y divide-stone-200">
|
||||
<article
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
class="px-5 py-4"
|
||||
>
|
||||
<div class="grid gap-3 xl:grid-cols-[84px_minmax(0,1.4fr)_120px_150px_110px_100px_150px] xl:items-center">
|
||||
<p class="text-xs font-bold tracking-[0.14em] text-stone-500">#{{ user.id }}</p>
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-stone-900">{{ user.nickname }}</p>
|
||||
<p class="mt-1 text-xs font-semibold text-stone-500">{{ user.email }}</p>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-stone-700">{{ user.role }}</p>
|
||||
<p class="text-sm font-semibold text-stone-700">{{ formatDate(user.lastLoginAt) }}</p>
|
||||
<p class="text-sm font-semibold text-stone-700">{{ user.plannerEntryCount }}개</p>
|
||||
<p class="text-sm font-semibold text-stone-700">{{ user.goalCount }}개</p>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span
|
||||
class="rounded-full px-3 py-1 text-[10px] font-bold tracking-[0.14em]"
|
||||
:class="user.isActiveRecently ? 'bg-emerald-100 text-emerald-700' : 'bg-stone-100 text-stone-500'"
|
||||
>
|
||||
{{ user.isActiveRecently ? '활동 중' : '휴면 가능성' }}
|
||||
</span>
|
||||
<span
|
||||
class="rounded-full px-3 py-1 text-[10px] font-bold tracking-[0.14em]"
|
||||
:class="user.emailVerifiedAt ? 'bg-sky-100 text-sky-700' : 'bg-amber-100 text-amber-700'"
|
||||
>
|
||||
{{ user.emailVerifiedAt ? '이메일 인증' : '미인증' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div
|
||||
v-if="!busy && users.length === 0"
|
||||
class="px-5 py-10 text-center text-sm font-semibold text-stone-500"
|
||||
>
|
||||
표시할 사용자가 없습니다.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
Reference in New Issue
Block a user