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

대시보드, 통계 정리

Browse Source
This commit is contained in:
Jaybe
2025-06-09 15:35:05 +09:00
parent 141a0de6d0
commit 05312c7d93
4 changed files with 321 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/club/Dashboard.vue
+86 -66
View File
@@ -8,7 +8,7 @@
<div v-else class="grid">
<!-- 회원 통계 카드 -->
<div class="col-12 md:col-6 lg:col-3">
<div class="col-12 md:col-6 lg:col-6">
<div class="dashboard-card">
<div class="card-header">
<i class="pi pi-users"></i>
@@ -24,51 +24,8 @@
</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-calendar"></i>
<h3>다음 모임</h3>
</div>
<div class="card-content" v-if="nextMeeting">
<p>일시: {{ formatDate(nextMeeting.date) }}</p>
<p>장소: {{ nextMeeting.location || '미정' }}</p>
<p>참가 예정: {{ nextMeeting.participantsCount }}명</p>
</div>
<div class="card-content" v-else>
<p>예정된 모임이 없습니다.</p>
</div>
<div class="card-footer">
<Button label="모임 관리" icon="pi pi-arrow-right" @click="navigateTo('/club/events')" />
</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-chart-bar"></i>
<h3>최근 모임</h3>
</div>
<div class="card-content" v-if="lastMeeting">
<p>일시: {{ formatDate(lastMeeting.date) }}</p>
<p>참가자: {{ lastMeeting.participantsCount }}명</p>
<p>게임 수: {{ lastMeeting.games }}게임</p>
</div>
<div class="card-content" v-else>
<p>최근 모임 기록이 없습니다.</p>
</div>
<div class="card-footer">
<Button label="기록 보기" icon="pi pi-arrow-right" @click="navigateTo('/club/events')" />
</div>
</div>
</div>
<!-- 점수 통계 카드 -->
<div class="col-12 md:col-6 lg:col-3">
<div class="col-12 md:col-6 lg:col-6">
<div class="dashboard-card">
<div class="card-header">
<i class="pi pi-chart-line"></i>
@@ -84,17 +41,94 @@
</div>
</div>
</div>
<!-- 다음 모임 카드(여러 개) -->
<div class="col-12 md:col-6 lg:col-6">
<div class="dashboard-card">
<div class="card-header">
<i class="pi pi-calendar"></i>
<h3>다음 모임</h3>
</div>
<div class="card-content" v-if="nextMeetings && nextMeetings.length">
<table class="recent-meetings-table" style="width:100%; border-collapse:collapse;">
<thead>
<tr>
<th>일시</th>
<th>제목</th>
<th>장소</th>
<th>참가자</th>
</tr>
</thead>
<tbody>
<tr v-for="meeting in nextMeetings.slice(0, 3)" :key="meeting.id || meeting.date">
<td>{{ formatDate(meeting.date) }}</td>
<td>{{ meeting.title || '-' }}</td>
<td>{{ meeting.location || '미정' }}</td>
<td>{{ meeting.participantsCount || meeting.participants || 0 }}명</td>
</tr>
</tbody>
</table>
</div>
<div class="card-content" v-else>
<p>예정된 모임이 없습니다.</p>
</div>
<div class="card-footer">
<Button label="모임 관리" icon="pi pi-arrow-right" @click="navigateTo('/club/events')" />
</div>
</div>
</div>
<!-- 최근 모임 카드: 최근 3개 리스트로 -->
<div class="col-12 md:col-6 lg:col-6">
<div class="dashboard-card">
<div class="card-header">
<i class="pi pi-chart-bar"></i>
<h3>최근 모임</h3>
</div>
<div class="card-content">
<table class="recent-meetings-table" style="width:100%; border-collapse:collapse;">
<thead>
<tr>
<th>일시</th>
<th>제목</th>
<th>참가자</th>
<th>게임 수</th>
</tr>
</thead>
<tbody>
<tr v-for="meeting in recentMeetings.slice(0, 3)" :key="meeting.id || meeting.date">
<td>{{ formatDate(meeting.date) }}</td>
<td>{{ meeting.title }}</td>
<td>{{ meeting.participantsCount || meeting.participants || 0 }}명</td>
<td>{{ meeting.games }}게임</td>
</tr>
<tr v-if="recentMeetings.length === 0">
<td colspan="4" style="text-align:center;">최근 모임 데이터가 없습니다.</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer">
<Button label="기록 보기" icon="pi pi-arrow-right" @click="navigateTo('/club/events')" />
</div>
</div>
</div>
</div>
<div class="grid mt-4">
<!-- 상위 회원 순위 -->
<div class="col-12 md:col-6">
<div class="col-12">
<div class="dashboard-card">
<div class="card-header">
<h3>에버리지 순위</h3>
</div>
<DataTable :value="topMembers" :rows="5" stripedRows responsiveLayout="scroll">
<Column field="rank" header="#" :body="rankTemplate" style="width: 10%"></Column>
<template #empty>
<tr>
<td colspan="5" style="text-align:center;">순위 데이터가 없습니다.</td>
</tr>
</template>
<Column header="순위" :body="(_, { rowIndex }) => rowIndex + 1" style="width: 10%"></Column>
<Column field="name" header="이름" style="width: 30%"></Column>
<Column field="average" header="에버리지" :body="averageTemplate" style="width: 20%"></Column>
<Column field="games" header="게임 수" style="width: 20%"></Column>
@@ -102,21 +136,6 @@
</DataTable>
</div>
</div>
<!-- 최근 모임 목록 -->
<div class="col-12 md:col-6">
<div class="dashboard-card">
<div class="card-header">
<h3>최근 모임</h3>
</div>
<DataTable :value="recentMeetings" :rows="5" stripedRows responsiveLayout="scroll">
<Column field="date" header="일시" :body="dateTemplate" style="width: 25%"></Column>
<Column field="title" header="제목" style="width: 40%"></Column>
<Column field="participants" header="참가자" style="width: 15%"></Column>
<Column field="games" header="게임 수" style="width: 20%"></Column>
</DataTable>
</div>
</div>
</div>
</div>
</template>
@@ -142,8 +161,8 @@ const memberStats = ref({
associateCount: 0
});
// 다음 모임 정보
const nextMeeting = ref(null);
// 다음 모임 정보 (여러 개)
const nextMeetings = ref([]);
// 최근 모임 정보
const lastMeeting = ref(null);
@@ -195,11 +214,12 @@ const loadDashboardData = async () => {
});
memberStats.value = membersResponse.data;
// 다음 모임 정보 로드
// 다음 모임 정보 로드 (여러 개)
const nextMeetingResponse = await apiClient.post('/api/club/meetings/next', {
clubId: clubId.value
});
nextMeeting.value = nextMeetingResponse.data;
const data = nextMeetingResponse.data;
nextMeetings.value = Array.isArray(data) ? data : (data ? [data] : []);
// 최근 모임 정보 로드
const lastMeetingResponse = await apiClient.post('/api/club/meetings/last', {