jaybe/bowlingManager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Jaybe
2025-04-17 23:32:39 +09:00
commit 5b719b6766
105 changed files with 25653 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/admin/Dashboard.vue
+291
View File
@@ -0,0 +1,291 @@
<template>
<div class="admin-dashboard">
<h2>관리자 대시보드</h2>
<div v-if="loading" class="loading-spinner">
<ProgressSpinner />
</div>
<div v-else class="grid">
<!-- 요약 카드 -->
<div class="col-12 md:col-6 lg:col-3">
<div class="dashboard-card">
<div class="card-header">
<i class="pi pi-users"></i>
<h3>사용자</h3>
</div>
<div class="card-content">
<p>총 사용자 수: {{ summary.totalUsers }}</p>
</div>
<div class="card-footer">
<Button label="사용자 관리" icon="pi pi-arrow-right" @click="navigateTo('/admin/users')" />
</div>
</div>
</div>
<div class="col-12 md:col-6 lg:col-3">
<div class="dashboard-card">
<div class="card-header">
<i class="pi pi-building"></i>
<h3>클럽</h3>
</div>
<div class="card-content">
<p>총 클럽 수: {{ summary.totalClubs }}</p>
</div>
<div class="card-footer">
<Button label="클럽 관리" icon="pi pi-arrow-right" @click="navigateTo('/admin/clubs')" />
</div>
</div>
</div>
<div class="col-12 md:col-6 lg:col-3">
<div class="dashboard-card">
<div class="card-header">
<i class="pi pi-credit-card"></i>
<h3>구독</h3>
</div>
<div class="card-content">
<p>활성 구독: {{ summary.activeSubscriptions }}</p>
</div>
<div class="card-footer">
<Button label="구독 관리" icon="pi pi-arrow-right" @click="navigateTo('/admin/subscriptions')" />
</div>
</div>
</div>
<!-- 최근 데이터 -->
<div class="col-12 md:col-6">
<div class="dashboard-card">
<div class="card-header">
<i class="pi pi-users"></i>
<h3>최근 가입한 사용자</h3>
</div>
<div class="card-content">
<DataTable :value="recent.users" :rows="5" stripedRows>
<Column field="name" header="이름"></Column>
<Column field="email" header="이메일"></Column>
<Column field="role" header="권한"></Column>
<Column field="createdAt" header="가입일">
<template #body="{ data }">
{{ formatDate(data.createdAt) }}
</template>
</Column>
</DataTable>
</div>
</div>
</div>
<div class="col-12 md:col-6">
<div class="dashboard-card">
<div class="card-header">
<i class="pi pi-building"></i>
<h3>최근 생성된 클럽</h3>
</div>
<div class="card-content">
<DataTable :value="recent.clubs" :rows="5" stripedRows>
<Column field="name" header="클럽명"></Column>
<Column field="memberCount" header="회원 수"></Column>
<Column field="owner.name" header="모임장"></Column>
<Column field="createdAt" header="생성일">
<template #body="{ data }">
{{ formatDate(data.createdAt) }}
</template>
</Column>
</DataTable>
</div>
</div>
</div>
<!-- 월별 통계 차트 -->
<div class="col-12">
<div class="dashboard-card">
<div class="card-header">
<i class="pi pi-chart-line"></i>
<h3>월별 통계</h3>
</div>
<div class="card-content">
<Chart type="line" :data="chartData" :options="chartOptions" />
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useToast } from 'primevue/usetoast';
import dayjs from 'dayjs';
import adminService from '@/services/adminService';
// 컴포넌트들은 main.js에서 전역으로 등록되어 있으므로 import 불필요
const router = useRouter();
const toast = useToast();
// 데이터 상태
const loading = ref(true);
const summary = ref({
totalUsers: 0,
totalClubs: 0,
activeSubscriptions: 0
});
const recent = ref({
users: [],
clubs: [],
subscriptions: []
});
const stats = ref({
users: [],
clubs: [],
subscriptions: []
});
// 차트 데이터 계산
const chartData = computed(() => {
const months = stats.value.users.map(item => item.month);
return {
labels: months,
datasets: [
{
label: '사용자',
data: stats.value.users.map(item => item.count),
borderColor: '#42A5F5',
tension: 0.4
},
{
label: '클럽',
data: stats.value.clubs.map(item => item.count),
borderColor: '#66BB6A',
tension: 0.4
},
{
label: '구독',
data: stats.value.subscriptions.map(item => item.count),
borderColor: '#FFA726',
tension: 0.4
}
]
};
});
// 차트 옵션
const chartOptions = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top'
}
},
scales: {
y: {
beginAtZero: true,
ticks: {
stepSize: 1
}
}
}
};
// 컴포넌트 마운트 시 데이터 로드
onMounted(async () => {
try {
loading.value = true;
await loadDashboardData();
} catch (error) {
console.error('관리자 대시보드 데이터 로딩 오류:', error);
} finally {
loading.value = false;
}
});
// 대시보드 데이터 로드 함수
const loadDashboardData = async () => {
try {
const response = await adminService.getDashboardData();
const data = response.data;
summary.value = data.summary;
recent.value = data.recent;
stats.value = data.stats;
} catch (error) {
console.error('관리자 대시보드 데이터 로딩 중 오류 발생:', error);
toast.add({ severity: 'error', summary: '오류', detail: '관리자 대시보드 데이터를 가져오는 중 오류가 발생했습니다.', life: 3000 });
}
};
// 날짜 포맷 함수
const formatDate = (date) => {
return dayjs(date).format('YYYY-MM-DD');
};
const navigateTo = (path) => {
router.push(path);
};
</script>
<style scoped>
.admin-dashboard {
padding: 1rem;
}
.loading-spinner {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.dashboard-card {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
height: 100%;
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
.card-header {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.card-header i {
font-size: 1.5rem;
margin-right: 0.5rem;
color: #3B82F6;
}
.card-header h3 {
margin: 0;
font-size: 1.25rem;
}
.card-content {
flex: 1;
margin-bottom: 1rem;
}
.card-footer {
display: flex;
justify-content: flex-end;
}
:deep(.p-datatable) {
box-shadow: none;
}
:deep(.p-datatable .p-datatable-thead > tr > th) {
background-color: #f8f9fa;
}
:deep(.p-datatable .p-datatable-tbody > tr) {
background-color: transparent;
}
</style>