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"