zenn/planner.sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.1.40 - 관리자 대시보드 기본 구조 추가

Browse Source
This commit is contained in:
zenn
2026-04-22 18:38:31 +09:00
parent b18af56c3c
commit 8f96c22c6d
14 changed files with 627 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/App.vue
View File

@@ -1,11 +1,13 @@
<script setup>
import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
import AdminDashboard from './components/AdminDashboard.vue'
import AuthDialog from './components/AuthDialog.vue'
import GoalsDashboard from './components/GoalsDashboard.vue'
import MiniCalendar from './components/MiniCalendar.vue'
import PlannerPage from './components/PlannerPage.vue'
import SettingsDashboard from './components/SettingsDashboard.vue'
import StatsDashboard from './components/StatsDashboard.vue'
import { fetchAdminOverview } from './lib/adminApi'
import {
clearAuthState,
fetchCurrentUser,
@@ -74,6 +76,19 @@ const profileBusy = ref(false)
const passwordBusy = ref(false)
const profileMessage = ref('')
const passwordMessage = ref('')
const adminBusy = ref(false)
const adminMessage = ref('')
const adminOverview = ref({
totalUsers: 0,
totalAdmins: 0,
verifiedUsers: 0,
activeUsers30d: 0,
newUsers7d: 0,
totalPlannerEntries: 0,
totalGoals: 0,
})
const adminUsers = ref([])
const adminRecentLogins = ref([])
const hours = [
'6', '7', '8', '9', '10', '11', '12',
@@ -336,6 +351,7 @@ const markedDateKeys = computed(() =>
)
const isAuthenticated = computed(() => Boolean(authToken.value && currentUser.value))
const isAdmin = computed(() => currentUser.value?.role === 'admin')
const filteredGoals = computed(() => {
const query = goalQuery.value.trim().toLowerCase()
return goals.value.filter((goal) => {
@@ -701,6 +717,20 @@ const readNextItems = computed(() => {
]
})
const nextDaySummary = computed(() => {
const nextDayFirstTask = secondaryPlanner.value.tasks.find((task) => task.title.trim())
if (!hasPlannerContent(secondaryPlanner.value)) {
return '등록된 일정이 없습니다.'
}
if (!nextDayFirstTask) {
return '등록된 일정이 없습니다.'
}
return `내일의 첫 작업은 "${nextDayFirstTask.title}" 입니다.`
})
const isWideFocusSidebar = computed(() => windowWidth.value >= 1620)
const isOverlayFocusSidebar = computed(() => windowWidth.value < 1280)
const showInlineLeftSidebar = computed(() => windowWidth.value >= 1280)
@@ -819,7 +849,16 @@ function closeRightPanel() {
}
function setScreenMode(mode) {
if (mode === 'admin' && !isAdmin.value) {
return
}
screenMode.value = mode
if (mode === 'admin') {
void loadAdminDashboard()
}
closeLeftPanel()
}
@@ -925,6 +964,7 @@ async function applyAuthSuccess(data) {
})
await loadGoals()
await hydratePlannerRecordsFromApi()
await loadAdminDashboard()
syncProfileForm()
closeAuthDialog()
}
@@ -974,6 +1014,7 @@ async function restoreAuthSession() {
})
await loadGoals()
await hydratePlannerRecordsFromApi()
await loadAdminDashboard()
syncProfileForm()
} catch (error) {
authToken.value = ''
@@ -992,6 +1033,21 @@ function logout() {
goals.value = []
goalQuery.value = ''
goalMessage.value = ''
adminMessage.value = ''
adminUsers.value = []
adminRecentLogins.value = []
adminOverview.value = {
totalUsers: 0,
totalAdmins: 0,
verifiedUsers: 0,
activeUsers30d: 0,
newUsers7d: 0,
totalPlannerEntries: 0,
totalGoals: 0,
}
if (screenMode.value === 'admin') {
screenMode.value = 'planner'
}
setSyncFeedback('local', '로그인 후 클라우드 저장을 사용할 수 있습니다.', {
visible: false,
})
@@ -1001,6 +1057,29 @@ function logout() {
resetPasswordForm()
}
async function loadAdminDashboard() {
if (!authToken.value || !isAdmin.value) {
adminUsers.value = []
adminRecentLogins.value = []
adminMessage.value = ''
return
}
adminBusy.value = true
try {
const result = await fetchAdminOverview(authToken.value)
adminOverview.value = result.summary
adminUsers.value = result.users
adminRecentLogins.value = result.recentLogins
adminMessage.value = ''
} catch (error) {
adminMessage.value = error.message || '관리자 데이터를 불러오지 못했습니다.'
} finally {
adminBusy.value = false
}
}
async function loadGoals() {
if (!authToken.value) {
return
@@ -1191,6 +1270,10 @@ async function submitProfileForm() {
user: result.user,
})
syncProfileForm()
await loadAdminDashboard()
if (!isAdmin.value && screenMode.value === 'admin') {
screenMode.value = 'planner'
}
profileMessage.value = '프로필이 저장되었습니다.'
} catch (error) {
profileMessage.value = error.message || '프로필을 저장하지 못했습니다.'
@@ -1445,9 +1528,6 @@ onBeforeUnmount(() => {
<div class="overflow-hidden rounded-[28px] border border-stone-200 bg-[linear-gradient(145deg,rgba(255,255,255,0.96),rgba(246,238,228,0.92))] p-5 shadow-[0_18px_40px_rgba(28,25,23,0.06)]">
<div class="flex items-center justify-between gap-3">
<p class="text-[11px] font-bold uppercase tracking-[0.28em] text-stone-500">10 Minute Planner</p>
<span class="rounded-full border border-stone-200 bg-white/80 px-3 py-1 text-[10px] font-bold tracking-[0.18em] text-stone-500">
DAILY FLOW
</span>
</div>
<div class="mt-6 space-y-3">
<h1 class="text-[28px] font-semibold leading-[1.1] tracking-[-0.06em] text-stone-900">
@@ -1466,6 +1546,7 @@ onBeforeUnmount(() => {
<p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">SIGNED IN</p>
<p class="mt-2 text-lg font-semibold tracking-[-0.03em] text-stone-900">{{ currentUser.nickname }}</p>
<p class="mt-1 text-sm font-semibold text-stone-500">{{ currentUser.email }}</p>
<p class="mt-2 text-[11px] font-bold tracking-[0.16em] text-stone-400">{{ currentUser.role === 'admin' ? 'ADMIN' : 'USER' }}</p>
<button
type="button"
class="mt-4 w-full rounded-full border border-stone-200 px-4 py-3 text-xs font-bold tracking-[0.16em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
@@ -1537,6 +1618,16 @@ onBeforeUnmount(() => {
<p class="text-xs font-bold tracking-[0.18em]">SETTINGS</p>
<p class="mt-1 text-[11px] font-semibold tracking-[0.04em]" :class="screenMode === 'settings' ? 'text-stone-200' : 'text-stone-500'">계정 정보와 비밀번호 수정</p>
</button>
<button
v-if="isAdmin"
type="button"
class="rounded-[20px] border px-4 py-4 text-left transition"
:class="screenMode === 'admin' ? 'border-stone-900 bg-stone-900 text-white shadow-[0_12px_24px_rgba(28,25,23,0.18)]' : 'border-stone-200 bg-white text-stone-700 hover:border-stone-400'"
@click="setScreenMode('admin')"
>
<p class="text-xs font-bold tracking-[0.18em]">ADMIN</p>
<p class="mt-1 text-[11px] font-semibold tracking-[0.04em]" :class="screenMode === 'admin' ? 'text-stone-200' : 'text-stone-500'">사용자 현황과 운영 통계 확인</p>
</button>
</div>
</section>
@@ -1647,6 +1738,7 @@ onBeforeUnmount(() => {
<p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">SIGNED IN</p>
<p class="mt-2 text-lg font-semibold tracking-[-0.03em] text-stone-900">{{ currentUser.nickname }}</p>
<p class="mt-1 text-sm font-semibold text-stone-500">{{ currentUser.email }}</p>
<p class="mt-2 text-[11px] font-bold tracking-[0.16em] text-stone-400">{{ currentUser.role === 'admin' ? 'ADMIN' : 'USER' }}</p>
<button
type="button"
class="mt-4 w-full rounded-full border border-stone-200 px-4 py-3 text-xs font-bold tracking-[0.16em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
@@ -1695,6 +1787,16 @@ onBeforeUnmount(() => {
<p class="text-xs font-bold tracking-[0.18em]">SETTINGS</p>
<p class="mt-1 text-[11px] font-semibold tracking-[0.04em]" :class="screenMode === 'settings' ? 'text-stone-200' : 'text-stone-500'">계정 정보와 비밀번호 수정</p>
</button>
<button
v-if="isAdmin"
type="button"
class="rounded-[20px] border px-4 py-4 text-left transition"
:class="screenMode === 'admin' ? 'border-stone-900 bg-stone-900 text-white shadow-[0_12px_24px_rgba(28,25,23,0.18)]' : 'border-stone-200 bg-white text-stone-700 hover:border-stone-400'"
@click="setScreenMode('admin')"
>
<p class="text-xs font-bold tracking-[0.18em]">ADMIN</p>
<p class="mt-1 text-[11px] font-semibold tracking-[0.04em]" :class="screenMode === 'admin' ? 'text-stone-200' : 'text-stone-500'">사용자 현황과 운영 통계 확인</p>
</button>
</div>
</section>
@@ -1834,7 +1936,7 @@ onBeforeUnmount(() => {
/>
</Transition>
<div class="scrollbar-hide print-target border border-white/60 bg-white/45 shadow-[0_18px_60px_rgba(28,25,23,0.06)] xl:h-full xl:min-h-0 xl:overflow-y-auto xl:pr-3" :class="isCompactMobile ? 'rounded-[24px] p-3' : 'rounded-[28px] p-4'">
<div class="scrollbar-hide print-target border border-white/60 bg-white/45 xl:h-full xl:min-h-0 xl:overflow-y-auto xl:pr-3" :class="isCompactMobile ? 'rounded-[24px] p-3' : 'rounded-[28px] p-4'">
<div v-if="isOverlayFocusSidebar" class="mb-4 flex justify-end">
<button
type="button"
@@ -1868,7 +1970,7 @@ onBeforeUnmount(() => {
<aside
v-if="showInlineFocusSidebar"
class="scrollbar-hide print-hidden rounded-[28px] border border-white/60 bg-[#f7f2ea]/95 p-3 shadow-[0_18px_60px_rgba(28,25,23,0.12)] xl:h-full xl:min-h-0 xl:overflow-y-auto"
class="scrollbar-hide print-hidden rounded-[28px] border border-white/60 bg-[#f7f2ea]/95 p-3 xl:h-full xl:min-h-0 xl:overflow-y-auto"
:class="[focusSidebarOuterClass]"
>
<div v-if="!showInlineFocusSidebar" class="mb-3 flex items-center justify-between rounded-[18px] border border-stone-200 bg-white/90 px-4 py-3">
@@ -1992,7 +2094,7 @@ onBeforeUnmount(() => {
<span class="ml-1" :class="secondaryDateDisplay.weekdayTone">{{ secondaryDateDisplay.weekday }}</span>
</p>
<p class="text-[11px] font-semibold tracking-[0.08em] text-stone-600">
내일의 첫 작업은 "{{ secondaryPlanner.tasks.find((task) => task.title.trim())?.title || '새 작업 추가' }}" 로 시작합니다.
{{ nextDaySummary }}
</p>
</div>
</article>
@@ -2030,7 +2132,7 @@ onBeforeUnmount(() => {
<Transition name="drawer-right">
<aside
v-if="!showInlineFocusSidebar && rightPanelOpen"
class="scrollbar-hide print-hidden fixed inset-y-4 right-4 z-40 w-[min(360px,calc(100vw-2rem))] overflow-y-auto rounded-[28px] border border-white/60 bg-[#f7f2ea]/95 p-3 shadow-[0_18px_60px_rgba(28,25,23,0.12)]"
class="scrollbar-hide print-hidden fixed inset-y-4 right-4 z-40 w-[min(360px,calc(100vw-2rem))] overflow-y-auto rounded-[28px] border border-white/60 bg-[#f7f2ea]/95 p-3"
>
<div class="mb-3 flex items-center justify-between rounded-[18px] border border-stone-200 bg-white/90 px-4 py-3">
<p class="text-[11px] font-bold tracking-[0.18em] text-ink">SIDE PANEL</p>
@@ -2153,7 +2255,7 @@ onBeforeUnmount(() => {
<span class="ml-1" :class="secondaryDateDisplay.weekdayTone">{{ secondaryDateDisplay.weekday }}</span>
</p>
<p class="text-[11px] font-semibold tracking-[0.08em] text-stone-600">
내일의 첫 작업은 "{{ secondaryPlanner.tasks.find((task) => task.title.trim())?.title || '새 작업 추가' }}" 로 시작합니다.
{{ nextDaySummary }}
</p>
</div>
</article>
@@ -2192,7 +2294,7 @@ onBeforeUnmount(() => {
<section
v-else-if="screenMode === 'planner'"
class="scrollbar-hide print-hidden overflow-x-auto rounded-[28px] border border-white/60 bg-white/45 p-4 shadow-[0_18px_60px_rgba(28,25,23,0.06)] sm:p-6 xl:h-full xl:overflow-y-auto"
class="scrollbar-hide print-hidden overflow-x-auto rounded-[28px] border border-white/60 bg-white/45 p-4 sm:p-6 xl:h-full xl:overflow-y-auto"
>
<div class="mx-auto flex gap-6" :style="spreadCanvasStyle">
<div class="print-target overflow-hidden" :style="spreadPageFrameStyle">
@@ -2279,6 +2381,16 @@ onBeforeUnmount(() => {
@submit:password="submitPasswordForm"
/>
<AdminDashboard
v-else-if="screenMode === 'admin' && isAdmin"
class="scrollbar-hide print-hidden xl:h-full xl:overflow-y-auto"
:summary="adminOverview"
:users="adminUsers"
:recent-logins="adminRecentLogins"
:busy="adminBusy"
:message="adminMessage"
/>
<StatsDashboard
v-else
class="scrollbar-hide print-hidden xl:h-full xl:overflow-y-auto"

185
src/components/AdminDashboard.vue Normal file
View 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>

21
src/lib/adminApi.js Normal file
View File

@@ -0,0 +1,21 @@
import { buildApiUrl, toUserFacingApiError } from './apiBase'
async function request(path, token) {
const response = await fetch(buildApiUrl(path), {
headers: {
Authorization: `Bearer ${token}`,
},
})
const data = await response.json().catch(() => ({}))
if (!response.ok) {
throw new Error(toUserFacingApiError(data, '관리자 데이터를 불러오지 못했습니다.'))
}
return data
}
export async function fetchAdminOverview(token) {
return request('/api/admin/overview', token)
}