feat: 산책갈개 관리자 콘솔 (Vue3+TS+Quasar) — 사용자 앱과 분리된 독립 프로젝트
- 인증: 구글 로그인(GIS) + 개발자 로그인(local), 관리자(ADMIN) 가드 - 대시보드: 요약 카드·접속자 추이(체크인 기반)·티어별·시군구 지역 - 회원 관리: 목록·상태/구독/권한 변경·삭제, 회원 상세(강아지·체크인·매칭·구독 이력) - 구독 관리: 목록·요약·수동 부여/연장/취소 - 자체 토큰키(dn_admin_token)로 사용자 앱과 세션 분리, 백엔드 dognation_BT 연동 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
ByungCheol
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<q-page class="q-pa-md">
|
||||
<div class="row items-center q-mb-md">
|
||||
<div class="text-h6 text-weight-bold">대시보드</div>
|
||||
<q-space />
|
||||
<q-btn flat round icon="refresh" :loading="loading" @click="loadAll" />
|
||||
</div>
|
||||
|
||||
<q-banner v-if="error" dense class="bg-red-1 text-red-8 q-mb-md rounded-borders">
|
||||
<template #avatar><q-icon name="wifi_off" /></template>
|
||||
통계를 불러오지 못했습니다.
|
||||
</q-banner>
|
||||
|
||||
<div class="row q-col-gutter-md q-mb-md">
|
||||
<div v-for="c in cards" :key="c.label" class="col-6 col-sm-4 col-md-2">
|
||||
<q-card flat bordered>
|
||||
<q-card-section class="q-pb-xs">
|
||||
<div class="row items-center no-wrap">
|
||||
<q-icon :name="c.icon" :color="c.color" size="20px" class="q-mr-xs" />
|
||||
<div class="text-caption text-grey-7">{{ c.label }}</div>
|
||||
</div>
|
||||
<div class="text-h5 text-weight-bold q-mt-xs">{{ c.value }}</div>
|
||||
<div v-if="c.sub" class="text-caption text-grey-6">{{ c.sub }}</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-card flat bordered class="q-mb-md">
|
||||
<q-card-section class="row items-center q-pb-none">
|
||||
<div class="text-subtitle1 text-weight-medium">접속자 추이</div>
|
||||
<div class="text-caption text-grey-6 q-ml-sm">체크인 순사용자</div>
|
||||
<q-space />
|
||||
<q-btn-toggle
|
||||
v-model="unit"
|
||||
dense unelevated toggle-color="primary" size="sm"
|
||||
:options="[
|
||||
{ label: '일간', value: 'day' },
|
||||
{ label: '주간', value: 'week' },
|
||||
{ label: '월간', value: 'month' },
|
||||
]"
|
||||
@update:model-value="loadVisitors"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div v-if="visitors.length" class="chart">
|
||||
<div v-for="(p, i) in visitors" :key="i" class="chart-col">
|
||||
<div class="chart-bar-wrap">
|
||||
<div class="chart-bar" :style="{ height: barHeight(p.count) }" :title="`${p.label}: ${p.count}명`" />
|
||||
</div>
|
||||
<div class="chart-label">{{ labelEvery(i) ? p.label : '' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-caption text-grey-5 q-py-md text-center">데이터 없음</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-12 col-md-6">
|
||||
<q-card flat bordered>
|
||||
<q-card-section class="q-pb-none">
|
||||
<div class="text-subtitle1 text-weight-medium">티어별 회원수</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div v-for="t in tierRows" :key="t.key" class="q-mb-sm">
|
||||
<div class="row items-center q-mb-xs">
|
||||
<div class="text-body2">{{ tierLabel(t.key) }}</div>
|
||||
<q-space />
|
||||
<div class="text-body2 text-weight-medium">{{ t.count }}명</div>
|
||||
</div>
|
||||
<div class="track"><div class="fill" :style="{ width: pct(t.count, memberTotal), background: tierColor(t.key) }" /></div>
|
||||
</div>
|
||||
<div v-if="!tierRows.length" class="text-caption text-grey-5">데이터 없음</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6">
|
||||
<q-card flat bordered>
|
||||
<q-card-section class="q-pb-none">
|
||||
<div class="text-subtitle1 text-weight-medium">지역별 매칭 (시군구)</div>
|
||||
<div class="text-caption text-grey-6">체크인 지역 기준</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div v-for="r in regions" :key="r.region" class="q-mb-sm">
|
||||
<div class="row items-center q-mb-xs">
|
||||
<div class="text-body2">{{ r.region }}</div>
|
||||
<q-space />
|
||||
<div class="text-caption text-grey-6 q-mr-sm">{{ r.users }}명</div>
|
||||
<div class="text-body2 text-weight-medium">{{ r.checkIns }}건</div>
|
||||
</div>
|
||||
<div class="track"><div class="fill" :style="{ width: pct(r.checkIns, regionMax), background: '#6DB3E8' }" /></div>
|
||||
</div>
|
||||
<div v-if="!regions.length" class="text-caption text-grey-5">데이터 없음</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { statsApi, type RegionStat, type StatsSummary, type VisitorPoint, type VisitorUnit } from '@/api/stats'
|
||||
|
||||
const loading = ref(false)
|
||||
const error = ref(false)
|
||||
const summary = ref<StatsSummary | null>(null)
|
||||
const visitors = ref<VisitorPoint[]>([])
|
||||
const regions = ref<RegionStat[]>([])
|
||||
const unit = ref<VisitorUnit>('day')
|
||||
|
||||
const cards = computed(() => {
|
||||
const s = summary.value
|
||||
return [
|
||||
{ label: '총 회원', value: s?.members.total ?? '–', icon: 'group', color: 'primary', sub: '' },
|
||||
{ label: '금일 신규', value: s?.today.signups ?? '–', icon: 'person_add', color: 'positive', sub: '' },
|
||||
{ label: '금일 탈퇴', value: s?.today.withdrawals ?? '–', icon: 'person_remove', color: 'negative', sub: '' },
|
||||
{ label: 'DAU', value: s?.visitors.dau ?? '–', icon: 'today', color: 'primary', sub: '오늘 접속' },
|
||||
{ label: 'WAU', value: s?.visitors.wau ?? '–', icon: 'date_range', color: 'primary', sub: '최근 7일' },
|
||||
{ label: 'MAU', value: s?.visitors.mau ?? '–', icon: 'calendar_month', color: 'primary', sub: '최근 30일' },
|
||||
]
|
||||
})
|
||||
|
||||
const memberTotal = computed(() => summary.value?.members.total ?? 0)
|
||||
const tierRows = computed(() => {
|
||||
const order = ['FREE', 'AD_FREE', 'PREMIUM']
|
||||
return [...(summary.value?.members.byTier ?? [])].sort((a, b) => order.indexOf(a.key) - order.indexOf(b.key))
|
||||
})
|
||||
const regionMax = computed(() => Math.max(1, ...regions.value.map((r) => r.checkIns)))
|
||||
const visitorMax = computed(() => Math.max(1, ...visitors.value.map((v) => v.count)))
|
||||
|
||||
function barHeight(count: number): string {
|
||||
return `${Math.round((count / visitorMax.value) * 100)}%`
|
||||
}
|
||||
function pct(v: number, total: number): string {
|
||||
return `${total > 0 ? Math.round((v / total) * 100) : 0}%`
|
||||
}
|
||||
function labelEvery(i: number): boolean {
|
||||
return i % (visitors.value.length > 15 ? 5 : 1) === 0
|
||||
}
|
||||
function tierLabel(key: string): string {
|
||||
return key === 'AD_FREE' ? '광고제거' : key
|
||||
}
|
||||
function tierColor(key: string): string {
|
||||
return key === 'PREMIUM' ? '#FFB300' : key === 'AD_FREE' ? '#4DB6AC' : '#90A4AE'
|
||||
}
|
||||
|
||||
onMounted(loadAll)
|
||||
|
||||
async function loadAll() {
|
||||
loading.value = true
|
||||
error.value = false
|
||||
try {
|
||||
const [s, v, r] = await Promise.all([statsApi.summary(), statsApi.visitors(unit.value), statsApi.regions()])
|
||||
summary.value = s
|
||||
visitors.value = v
|
||||
regions.value = r
|
||||
} catch (e) {
|
||||
error.value = true
|
||||
console.error(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadVisitors() {
|
||||
try {
|
||||
visitors.value = await statsApi.visitors(unit.value)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart { display: flex; align-items: flex-end; gap: 3px; height: 180px; }
|
||||
.chart-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
|
||||
.chart-bar-wrap { width: 100%; height: 160px; display: flex; align-items: flex-end; justify-content: center; }
|
||||
.chart-bar { width: 70%; min-height: 2px; background: #6db3e8; border-radius: 3px 3px 0 0; transition: height 0.2s; }
|
||||
.chart-label { font-size: 10px; color: #90a4ae; margin-top: 4px; white-space: nowrap; height: 14px; }
|
||||
.track { height: 8px; background: #eceff1; border-radius: 4px; overflow: hidden; }
|
||||
.fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
|
||||
</style>
|
||||
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<q-layout view="lHh Lpr lFf">
|
||||
<q-page-container>
|
||||
<q-page class="flex flex-center bg-grey-2">
|
||||
<q-card flat bordered class="login-card q-pa-lg">
|
||||
<div class="text-center q-mb-lg">
|
||||
<q-icon name="pets" size="42px" color="primary" />
|
||||
<div class="text-h6 text-weight-bold q-mt-sm">산책갈개 관리자</div>
|
||||
<div class="text-caption text-grey-6">관리자 계정으로 로그인하세요</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-center">
|
||||
<div ref="googleBtn" />
|
||||
</div>
|
||||
|
||||
<div v-if="isDev" class="q-mt-lg">
|
||||
<q-separator class="q-mb-md" />
|
||||
<div class="text-caption text-grey-6 text-center q-mb-sm">개발용 (local 백엔드)</div>
|
||||
<q-btn
|
||||
outline
|
||||
color="primary"
|
||||
class="full-width"
|
||||
icon="developer_mode"
|
||||
label="개발자 로그인 (admin@dog.com)"
|
||||
:loading="loading"
|
||||
@click="onDevLogin"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-inner-loading :showing="loading" />
|
||||
|
||||
<q-banner v-if="error" dense class="bg-red-1 text-red-8 q-mt-md rounded-borders">
|
||||
<template #avatar><q-icon name="error" /></template>
|
||||
{{ error }}
|
||||
</q-banner>
|
||||
|
||||
<div v-if="!clientId && ready" class="text-caption text-grey-6 text-center q-mt-md">
|
||||
구글 로그인이 설정되지 않았습니다. (서버 GOOGLE_CLIENT_ID 확인)
|
||||
</div>
|
||||
</q-card>
|
||||
</q-page>
|
||||
</q-page-container>
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { authApi } from '@/api/auth'
|
||||
import { ApiError } from '@/api/http'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
|
||||
const googleBtn = ref<HTMLElement | null>(null)
|
||||
const clientId = ref('')
|
||||
const ready = ref(false)
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
const isDev = import.meta.env.DEV
|
||||
const GSI_SRC = 'https://accounts.google.com/gsi/client'
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
clientId.value = (await authApi.googleClientId()).clientId
|
||||
} catch {
|
||||
error.value = '서버에 연결하지 못했습니다.'
|
||||
ready.value = true
|
||||
return
|
||||
}
|
||||
ready.value = true
|
||||
if (!clientId.value) return
|
||||
|
||||
try {
|
||||
await loadGsi()
|
||||
window.google!.accounts.id.initialize({ client_id: clientId.value, callback: onCredential })
|
||||
window.google!.accounts.id.renderButton(googleBtn.value as HTMLElement, {
|
||||
type: 'standard',
|
||||
theme: 'outline',
|
||||
size: 'large',
|
||||
text: 'signin_with',
|
||||
shape: 'pill',
|
||||
width: 260,
|
||||
})
|
||||
} catch {
|
||||
error.value = '구글 로그인 초기화에 실패했습니다.'
|
||||
}
|
||||
})
|
||||
|
||||
function loadGsi(): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (window.google?.accounts?.id) return resolve()
|
||||
const el = document.createElement('script')
|
||||
el.src = GSI_SRC
|
||||
el.async = true
|
||||
el.defer = true
|
||||
el.onload = () => resolve()
|
||||
el.onerror = () => reject(new Error('GSI load failed'))
|
||||
document.head.appendChild(el)
|
||||
})
|
||||
}
|
||||
|
||||
function onCredential(response: GsiCredentialResponse) {
|
||||
finishLogin(() => auth.loginWithGoogle(response.credential))
|
||||
}
|
||||
|
||||
function onDevLogin() {
|
||||
finishLogin(() => auth.loginDev('admin@dog.com'))
|
||||
}
|
||||
|
||||
async function finishLogin(login: () => Promise<{ role: string }>) {
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
const member = await login()
|
||||
if (member.role !== 'ADMIN') {
|
||||
await auth.logout()
|
||||
error.value = '관리자 권한이 없는 계정입니다.'
|
||||
return
|
||||
}
|
||||
await router.replace({ name: 'dashboard' })
|
||||
} catch (e) {
|
||||
error.value = e instanceof ApiError ? e.message : '로그인 중 오류가 발생했습니다.'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-card {
|
||||
width: 360px;
|
||||
max-width: 90vw;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<q-page class="q-pa-md">
|
||||
<div class="row items-center q-mb-md">
|
||||
<q-btn flat dense round icon="arrow_back" @click="goBack" />
|
||||
<div class="text-h6 text-weight-bold q-ml-sm">회원 상세</div>
|
||||
<q-space />
|
||||
<q-btn flat round icon="refresh" :loading="loading" @click="load" />
|
||||
</div>
|
||||
|
||||
<q-banner v-if="error" dense class="bg-red-1 text-red-8 q-mb-md rounded-borders">
|
||||
<template #avatar><q-icon name="error" /></template>
|
||||
회원 정보를 불러오지 못했습니다.
|
||||
</q-banner>
|
||||
|
||||
<template v-if="detail">
|
||||
<q-card flat bordered class="q-mb-md">
|
||||
<q-card-section class="row items-center no-wrap">
|
||||
<q-avatar size="56px" color="blue-1" text-color="primary">
|
||||
<img v-if="m.profileImage" :src="m.profileImage" alt="" />
|
||||
<q-icon v-else name="person" size="32px" />
|
||||
</q-avatar>
|
||||
<div class="q-ml-md">
|
||||
<div class="text-h6 text-weight-bold">{{ m.nickname }}</div>
|
||||
<div class="text-caption text-grey-6">{{ m.email }}</div>
|
||||
<div class="q-mt-xs">
|
||||
<q-badge :color="tierColor(m.subscriptionTier)" class="q-mr-xs">{{ m.subscriptionTier }}</q-badge>
|
||||
<q-badge :color="statusColor(m.status)" class="q-mr-xs">{{ statusLabel(m.status) }}</q-badge>
|
||||
<q-badge v-if="m.role === 'ADMIN'" color="deep-purple" class="q-mr-xs">관리자</q-badge>
|
||||
<q-badge outline color="grey-7">{{ m.provider }}</q-badge>
|
||||
</div>
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="text-caption text-grey-6 self-start">가입 {{ date(m.createdAt) }}</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-12 col-md-6">
|
||||
<q-card flat bordered>
|
||||
<q-card-section class="q-pb-none"><div class="text-subtitle1 text-weight-medium">강아지 ({{ detail.dogs.length }})</div></q-card-section>
|
||||
<q-card-section>
|
||||
<div v-if="!detail.dogs.length" class="text-caption text-grey-5">등록된 강아지 없음</div>
|
||||
<q-item v-for="d in detail.dogs" :key="d.id" class="q-px-none">
|
||||
<q-item-section avatar><q-avatar color="secondary" text-color="white" icon="pets" /></q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-weight-medium">{{ d.name }}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ [d.breed, sizeLabel(d.size), genderLabel(d.gender), d.neutered ? '중성화' : null].filter(Boolean).join(' · ') || '정보 없음' }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6">
|
||||
<q-card flat bordered>
|
||||
<q-card-section class="q-pb-none"><div class="text-subtitle1 text-weight-medium">구독 이력 ({{ detail.subscriptions.length }})</div></q-card-section>
|
||||
<q-card-section>
|
||||
<div v-if="!detail.subscriptions.length" class="text-caption text-grey-5">구독 내역 없음</div>
|
||||
<q-markup-table v-else flat dense wrap-cells>
|
||||
<thead><tr><th class="text-left">티어</th><th class="text-left">플랫폼</th><th class="text-left">기간</th><th>상태</th></tr></thead>
|
||||
<tbody>
|
||||
<tr v-for="(s, i) in detail.subscriptions" :key="i">
|
||||
<td>{{ s.tier }}</td><td>{{ s.platform }}</td>
|
||||
<td class="text-caption">{{ date(s.startedAt) }} ~ {{ date(s.expiresAt) }}</td>
|
||||
<td class="text-center"><q-badge :color="s.active ? 'positive' : 'grey'">{{ s.active ? '활성' : '만료' }}</q-badge></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</q-markup-table>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6">
|
||||
<q-card flat bordered>
|
||||
<q-card-section class="q-pb-none"><div class="text-subtitle1 text-weight-medium">체크인 이력 (최근 {{ detail.checkIns.length }})</div></q-card-section>
|
||||
<q-card-section>
|
||||
<div v-if="!detail.checkIns.length" class="text-caption text-grey-5">체크인 없음</div>
|
||||
<q-list v-else separator>
|
||||
<q-item v-for="(c, i) in detail.checkIns" :key="i" class="q-px-none">
|
||||
<q-item-section avatar><q-icon name="place" color="primary" /></q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ c.spotName }}</q-item-label>
|
||||
<q-item-label caption>{{ c.region || '미지정' }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side class="text-caption text-grey-6">{{ dateTime(c.checkedInAt) }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6">
|
||||
<q-card flat bordered>
|
||||
<q-card-section class="q-pb-none"><div class="text-subtitle1 text-weight-medium">매칭 이력 (최근 {{ detail.matches.length }})</div></q-card-section>
|
||||
<q-card-section>
|
||||
<div v-if="!detail.matches.length" class="text-caption text-grey-5">매칭 없음</div>
|
||||
<q-markup-table v-else flat dense wrap-cells>
|
||||
<thead><tr><th>구분</th><th class="text-left">상대</th><th>상태</th><th class="text-left">일시</th></tr></thead>
|
||||
<tbody>
|
||||
<tr v-for="mt in detail.matches" :key="mt.id">
|
||||
<td class="text-center"><q-badge :color="mt.direction === '보냄' ? 'primary' : 'teal'">{{ mt.direction }}</q-badge></td>
|
||||
<td>{{ mt.counterpartDog }}</td>
|
||||
<td class="text-center"><q-badge :color="matchColor(mt.status)">{{ mt.status }}</q-badge></td>
|
||||
<td class="text-caption">{{ dateTime(mt.createdAt) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</q-markup-table>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { membersApi, type MemberDetail } from '@/api/members'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const detail = ref<MemberDetail | null>(null)
|
||||
const loading = ref(false)
|
||||
const error = ref(false)
|
||||
|
||||
const m = computed(() => detail.value!.member)
|
||||
const memberId = computed(() => Number(route.params.id))
|
||||
|
||||
onMounted(load)
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
error.value = false
|
||||
try {
|
||||
detail.value = await membersApi.detail(memberId.value)
|
||||
} catch (e) {
|
||||
error.value = true
|
||||
console.error(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
router.push({ name: 'members' })
|
||||
}
|
||||
|
||||
function date(s: string | null): string {
|
||||
return s ? new Date(s).toLocaleDateString('ko-KR') : '-'
|
||||
}
|
||||
function dateTime(s: string): string {
|
||||
return new Date(s).toLocaleString('ko-KR', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
|
||||
}
|
||||
function tierColor(t: string): string {
|
||||
return t === 'PREMIUM' ? 'amber-8' : t === 'AD_FREE' ? 'teal' : 'blue-grey'
|
||||
}
|
||||
function statusColor(s: string): string {
|
||||
return s === 'ACTIVE' ? 'positive' : s === 'BANNED' ? 'negative' : 'grey'
|
||||
}
|
||||
function statusLabel(s: string): string {
|
||||
return s === 'ACTIVE' ? '활성' : s === 'BANNED' ? '정지' : '휴면'
|
||||
}
|
||||
function matchColor(s: string): string {
|
||||
return s === 'ACCEPTED' ? 'positive' : s === 'REJECTED' || s === 'CANCELED' ? 'negative' : 'orange'
|
||||
}
|
||||
function sizeLabel(s: string | null): string | null {
|
||||
return s === 'SMALL' ? '소형' : s === 'MEDIUM' ? '중형' : s === 'LARGE' ? '대형' : null
|
||||
}
|
||||
function genderLabel(g: string | null): string | null {
|
||||
return g === 'MALE' ? '수컷' : g === 'FEMALE' ? '암컷' : null
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<q-page class="q-pa-md">
|
||||
<div class="row items-center q-mb-md">
|
||||
<div class="text-h6 text-weight-bold">회원 관리</div>
|
||||
<q-chip dense color="blue-1" text-color="primary" class="q-ml-sm">총 {{ members.length }}명</q-chip>
|
||||
<q-space />
|
||||
<q-input v-model="filter" dense outlined debounce="200" placeholder="이메일·닉네임 검색" class="q-mr-sm" style="min-width: 220px">
|
||||
<template #prepend><q-icon name="search" /></template>
|
||||
</q-input>
|
||||
<q-btn flat round icon="refresh" :loading="loading" @click="load" />
|
||||
</div>
|
||||
|
||||
<q-banner v-if="loadError" dense class="bg-red-1 text-red-8 q-mb-md rounded-borders">
|
||||
<template #avatar><q-icon name="wifi_off" /></template>
|
||||
회원 목록을 불러오지 못했습니다.
|
||||
</q-banner>
|
||||
|
||||
<q-table :rows="members" :columns="columns" row-key="id" :loading="loading" :filter="filter" :pagination="{ rowsPerPage: 20 }" flat bordered>
|
||||
<template #body-cell-member="props">
|
||||
<q-td :props="props">
|
||||
<div class="row items-center no-wrap">
|
||||
<q-avatar size="32px" color="blue-1" text-color="primary">
|
||||
<img v-if="props.row.profileImage" :src="props.row.profileImage" alt="" />
|
||||
<q-icon v-else name="person" />
|
||||
</q-avatar>
|
||||
<div class="q-ml-sm">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.nickname }}
|
||||
<q-chip v-if="isSelf(props.row)" dense size="sm" color="grey-3" text-color="grey-8">본인</q-chip>
|
||||
</div>
|
||||
<div class="text-caption text-grey-6">{{ props.row.email }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template #body-cell-provider="props">
|
||||
<q-td :props="props">
|
||||
<q-chip dense square size="sm" :color="props.row.provider === 'APPLE' ? 'grey-9' : 'red-2'" :text-color="props.row.provider === 'APPLE' ? 'white' : 'red-9'">
|
||||
{{ props.row.provider }}
|
||||
</q-chip>
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template #body-cell-status="props">
|
||||
<q-td :props="props">
|
||||
<q-select dense options-dense outlined emit-value map-options :model-value="props.row.status" :options="statusOptions"
|
||||
:disable="isSelf(props.row) || busyId === props.row.id" style="min-width: 110px"
|
||||
@update:model-value="(v: MemberStatus) => onStatus(props.row, v)" />
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template #body-cell-tier="props">
|
||||
<q-td :props="props">
|
||||
<q-select dense options-dense outlined emit-value map-options :model-value="props.row.subscriptionTier" :options="tierOptions"
|
||||
:disable="busyId === props.row.id" style="min-width: 120px"
|
||||
@update:model-value="(v: MemberTier) => onTier(props.row, v)" />
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template #body-cell-role="props">
|
||||
<q-td :props="props">
|
||||
<q-select dense options-dense outlined emit-value map-options :model-value="props.row.role" :options="roleOptions"
|
||||
:disable="isSelf(props.row) || busyId === props.row.id" style="min-width: 110px"
|
||||
@update:model-value="(v: MemberRole) => onRole(props.row, v)" />
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template #body-cell-actions="props">
|
||||
<q-td :props="props">
|
||||
<q-btn flat dense round icon="visibility" color="primary" @click="goDetail(props.row)">
|
||||
<q-tooltip>상세</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn flat dense round icon="delete" color="negative" :disable="isSelf(props.row) || busyId === props.row.id" @click="onDelete(props.row)" />
|
||||
</q-td>
|
||||
</template>
|
||||
</q-table>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useQuasar, type QTableColumn } from 'quasar'
|
||||
import { membersApi, type MemberRole, type MemberStatus, type MemberTier } from '@/api/members'
|
||||
import type { Member } from '@/api/auth'
|
||||
import { ApiError } from '@/api/http'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const $q = useQuasar()
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
|
||||
const members = ref<Member[]>([])
|
||||
const loading = ref(false)
|
||||
const loadError = ref(false)
|
||||
const filter = ref('')
|
||||
const busyId = ref<number | null>(null)
|
||||
|
||||
const statusOptions = [
|
||||
{ label: '활성', value: 'ACTIVE' },
|
||||
{ label: '휴면', value: 'DORMANT' },
|
||||
{ label: '정지', value: 'BANNED' },
|
||||
]
|
||||
const tierOptions = [
|
||||
{ label: 'FREE', value: 'FREE' },
|
||||
{ label: '광고제거', value: 'AD_FREE' },
|
||||
{ label: 'PREMIUM', value: 'PREMIUM' },
|
||||
]
|
||||
const roleOptions = [
|
||||
{ label: '일반', value: 'USER' },
|
||||
{ label: '관리자', value: 'ADMIN' },
|
||||
]
|
||||
|
||||
const columns: QTableColumn<Member>[] = [
|
||||
{ name: 'member', label: '회원', field: 'email', align: 'left', sortable: true },
|
||||
{ name: 'provider', label: '가입', field: 'provider', align: 'center' },
|
||||
{ name: 'status', label: '상태', field: 'status', align: 'center' },
|
||||
{ name: 'tier', label: '구독', field: 'subscriptionTier', align: 'center' },
|
||||
{ name: 'role', label: '권한', field: 'role', align: 'center' },
|
||||
{ name: 'createdAt', label: '가입일', field: 'createdAt', align: 'center', sortable: true, format: (v: string) => new Date(v).toLocaleDateString('ko-KR') },
|
||||
{ name: 'actions', label: '', field: 'id', align: 'center' },
|
||||
]
|
||||
|
||||
onMounted(load)
|
||||
|
||||
function isSelf(m: Member): boolean {
|
||||
return m.id === auth.member?.id
|
||||
}
|
||||
function goDetail(m: Member) {
|
||||
router.push({ name: 'member-detail', params: { id: m.id } })
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
loadError.value = false
|
||||
try {
|
||||
members.value = await membersApi.list()
|
||||
} catch (e) {
|
||||
loadError.value = true
|
||||
console.error(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function run(id: number, fn: () => Promise<Member>, done: string) {
|
||||
busyId.value = id
|
||||
try {
|
||||
const updated = await fn()
|
||||
const i = members.value.findIndex((m) => m.id === id)
|
||||
if (i >= 0) members.value[i] = updated
|
||||
$q.notify({ color: 'positive', message: done, icon: 'check', position: 'top' })
|
||||
} catch (e) {
|
||||
$q.notify({ color: 'negative', message: e instanceof ApiError ? e.message : '변경에 실패했습니다.', icon: 'error', position: 'top' })
|
||||
} finally {
|
||||
busyId.value = null
|
||||
}
|
||||
}
|
||||
|
||||
function onStatus(m: Member, status: MemberStatus) {
|
||||
if (status === m.status) return
|
||||
run(m.id, () => membersApi.updateStatus(m.id, status), '상태를 변경했습니다.')
|
||||
}
|
||||
function onTier(m: Member, tier: MemberTier) {
|
||||
if (tier === m.subscriptionTier) return
|
||||
run(m.id, () => membersApi.updateTier(m.id, tier), '구독 티어를 변경했습니다.')
|
||||
}
|
||||
function onRole(m: Member, role: MemberRole) {
|
||||
if (role === m.role) return
|
||||
run(m.id, () => membersApi.updateRole(m.id, role), '권한을 변경했습니다.')
|
||||
}
|
||||
|
||||
function onDelete(m: Member) {
|
||||
$q.dialog({
|
||||
title: '회원 삭제',
|
||||
message: `${m.nickname}(${m.email}) 회원을 삭제할까요? 되돌릴 수 없습니다.`,
|
||||
cancel: true,
|
||||
ok: { label: '삭제', color: 'negative' },
|
||||
}).onOk(async () => {
|
||||
busyId.value = m.id
|
||||
try {
|
||||
await membersApi.remove(m.id)
|
||||
members.value = members.value.filter((x) => x.id !== m.id)
|
||||
$q.notify({ color: 'positive', message: '회원을 삭제했습니다.', icon: 'check', position: 'top' })
|
||||
} catch (e) {
|
||||
$q.notify({ color: 'negative', message: e instanceof ApiError ? e.message : '삭제에 실패했습니다.', icon: 'error', position: 'top' })
|
||||
} finally {
|
||||
busyId.value = null
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<q-page class="q-pa-md">
|
||||
<div class="row items-center q-mb-md">
|
||||
<div class="text-h6 text-weight-bold">구독 관리</div>
|
||||
<q-space />
|
||||
<q-btn unelevated color="primary" icon="add" label="구독 부여" class="q-mr-sm" @click="openGrant" />
|
||||
<q-btn flat round icon="refresh" :loading="loading" @click="loadAll" />
|
||||
</div>
|
||||
|
||||
<q-banner v-if="error" dense class="bg-red-1 text-red-8 q-mb-md rounded-borders">
|
||||
<template #avatar><q-icon name="wifi_off" /></template>
|
||||
구독 정보를 불러오지 못했습니다.
|
||||
</q-banner>
|
||||
|
||||
<!-- 요약 카드 -->
|
||||
<div class="row q-col-gutter-md q-mb-md">
|
||||
<div class="col-6 col-md-3">
|
||||
<q-card flat bordered><q-card-section>
|
||||
<div class="text-caption text-grey-7"><q-icon name="card_membership" size="18px" color="primary" /> 활성 구독</div>
|
||||
<div class="text-h5 text-weight-bold">{{ summary?.active ?? '–' }}</div>
|
||||
</q-card-section></q-card>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<q-card flat bordered><q-card-section>
|
||||
<div class="text-caption text-grey-7"><q-icon name="hourglass_bottom" size="18px" color="orange" /> 만료 임박(7일)</div>
|
||||
<div class="text-h5 text-weight-bold">{{ summary?.expiringSoon ?? '–' }}</div>
|
||||
</q-card-section></q-card>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<q-card flat bordered><q-card-section>
|
||||
<div class="text-caption text-grey-7 q-mb-xs">티어별(활성)</div>
|
||||
<div v-for="c in summary?.byTier ?? []" :key="c.key" class="text-body2">{{ c.key }} <b>{{ c.count }}</b></div>
|
||||
<div v-if="!summary?.byTier.length" class="text-caption text-grey-5">없음</div>
|
||||
</q-card-section></q-card>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<q-card flat bordered><q-card-section>
|
||||
<div class="text-caption text-grey-7 q-mb-xs">플랫폼별(활성)</div>
|
||||
<div v-for="c in summary?.byPlatform ?? []" :key="c.key" class="text-body2">{{ c.key }} <b>{{ c.count }}</b></div>
|
||||
<div v-if="!summary?.byPlatform.length" class="text-caption text-grey-5">없음</div>
|
||||
</q-card-section></q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 필터 -->
|
||||
<div class="q-mb-sm">
|
||||
<q-btn-toggle
|
||||
v-model="filter" dense unelevated toggle-color="primary" size="sm"
|
||||
:options="[{ label: '전체', value: 'all' }, { label: '활성', value: 'active' }, { label: '비활성', value: 'inactive' }]"
|
||||
@update:model-value="loadList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-table :rows="subs" :columns="columns" row-key="id" :loading="loading" :pagination="{ rowsPerPage: 20 }" flat bordered>
|
||||
<template #body-cell-member="props">
|
||||
<q-td :props="props">
|
||||
<div class="text-weight-medium">{{ props.row.nickname }}</div>
|
||||
<div class="text-caption text-grey-6">{{ props.row.email }}</div>
|
||||
</q-td>
|
||||
</template>
|
||||
<template #body-cell-tier="props">
|
||||
<q-td :props="props"><q-badge :color="props.row.tier === 'PREMIUM' ? 'amber-8' : 'teal'">{{ props.row.tier }}</q-badge></q-td>
|
||||
</template>
|
||||
<template #body-cell-platform="props">
|
||||
<q-td :props="props"><q-chip dense square size="sm" color="grey-3" text-color="grey-8">{{ props.row.platform }}</q-chip></q-td>
|
||||
</template>
|
||||
<template #body-cell-period="props">
|
||||
<q-td :props="props" class="text-caption">{{ date(props.row.startedAt) }} ~ {{ date(props.row.expiresAt) }}</q-td>
|
||||
</template>
|
||||
<template #body-cell-active="props">
|
||||
<q-td :props="props" class="text-center">
|
||||
<q-badge :color="props.row.active ? 'positive' : 'grey'">{{ props.row.active ? '활성' : '해지' }}</q-badge>
|
||||
</q-td>
|
||||
</template>
|
||||
<template #body-cell-actions="props">
|
||||
<q-td :props="props" class="text-center">
|
||||
<q-btn flat dense round icon="more_time" color="primary" :disable="busyId === props.row.id" @click="onExtend(props.row)">
|
||||
<q-tooltip>연장</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn flat dense round icon="cancel" color="negative" :disable="!props.row.active || busyId === props.row.id" @click="onCancel(props.row)">
|
||||
<q-tooltip>취소</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</template>
|
||||
</q-table>
|
||||
|
||||
<!-- 구독 부여 다이얼로그 -->
|
||||
<q-dialog v-model="grantOpen">
|
||||
<q-card style="min-width: 340px">
|
||||
<q-card-section class="text-subtitle1 text-weight-bold">구독 수동 부여</q-card-section>
|
||||
<q-card-section class="q-gutter-md">
|
||||
<q-select
|
||||
v-model="grantUserId" outlined dense use-input input-debounce="200"
|
||||
label="회원" :options="memberOptions" emit-value map-options option-value="id" option-label="label"
|
||||
@filter="filterMembers"
|
||||
/>
|
||||
<q-select v-model="grantTier" outlined dense label="티어" :options="['AD_FREE', 'PREMIUM']" />
|
||||
<q-input v-model.number="grantMonths" outlined dense type="number" label="개월 수" :min="1" />
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat label="취소" v-close-popup />
|
||||
<q-btn unelevated color="primary" label="부여" :loading="granting" :disable="!grantUserId" @click="submitGrant" />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useQuasar, type QTableColumn } from 'quasar'
|
||||
import { subscriptionsApi, type Subscription, type SubscriptionFilter, type SubscriptionSummary } from '@/api/subscriptions'
|
||||
import { membersApi } from '@/api/members'
|
||||
import type { Member } from '@/api/auth'
|
||||
import { ApiError } from '@/api/http'
|
||||
|
||||
const $q = useQuasar()
|
||||
|
||||
const subs = ref<Subscription[]>([])
|
||||
const summary = ref<SubscriptionSummary | null>(null)
|
||||
const loading = ref(false)
|
||||
const error = ref(false)
|
||||
const filter = ref<SubscriptionFilter>('all')
|
||||
const busyId = ref<number | null>(null)
|
||||
|
||||
const columns: QTableColumn<Subscription>[] = [
|
||||
{ name: 'member', label: '회원', field: 'email', align: 'left' },
|
||||
{ name: 'tier', label: '티어', field: 'tier', align: 'center' },
|
||||
{ name: 'platform', label: '플랫폼', field: 'platform', align: 'center' },
|
||||
{ name: 'period', label: '기간', field: 'expiresAt', align: 'left', sortable: true },
|
||||
{ name: 'active', label: '상태', field: 'active', align: 'center' },
|
||||
{ name: 'actions', label: '', field: 'id', align: 'center' },
|
||||
]
|
||||
|
||||
// 부여 다이얼로그
|
||||
const grantOpen = ref(false)
|
||||
const granting = ref(false)
|
||||
const grantUserId = ref<number | null>(null)
|
||||
const grantTier = ref<'AD_FREE' | 'PREMIUM'>('PREMIUM')
|
||||
const grantMonths = ref(1)
|
||||
const allMembers = ref<Member[]>([])
|
||||
const memberOptions = ref<{ id: number; label: string }[]>([])
|
||||
|
||||
onMounted(loadAll)
|
||||
|
||||
function date(s: string): string {
|
||||
return new Date(s).toLocaleDateString('ko-KR')
|
||||
}
|
||||
|
||||
async function loadAll() {
|
||||
loading.value = true
|
||||
error.value = false
|
||||
try {
|
||||
const [list, sum] = await Promise.all([subscriptionsApi.list(filter.value), subscriptionsApi.summary()])
|
||||
subs.value = list
|
||||
summary.value = sum
|
||||
} catch (e) {
|
||||
error.value = true
|
||||
console.error(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadList() {
|
||||
loading.value = true
|
||||
try {
|
||||
subs.value = await subscriptionsApi.list(filter.value)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function openGrant() {
|
||||
grantOpen.value = true
|
||||
if (!allMembers.value.length) {
|
||||
try {
|
||||
allMembers.value = await membersApi.list()
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
setOptions('')
|
||||
}
|
||||
|
||||
function setOptions(needle: string) {
|
||||
const n = needle.toLowerCase()
|
||||
memberOptions.value = allMembers.value
|
||||
.filter((m) => !n || m.email.toLowerCase().includes(n) || m.nickname.toLowerCase().includes(n))
|
||||
.slice(0, 50)
|
||||
.map((m) => ({ id: m.id, label: `${m.nickname} (${m.email})` }))
|
||||
}
|
||||
function filterMembers(val: string, update: (fn: () => void) => void) {
|
||||
update(() => setOptions(val))
|
||||
}
|
||||
|
||||
async function submitGrant() {
|
||||
if (!grantUserId.value || grantMonths.value < 1) return
|
||||
granting.value = true
|
||||
try {
|
||||
await subscriptionsApi.grant(grantUserId.value, grantTier.value, grantMonths.value)
|
||||
grantOpen.value = false
|
||||
grantUserId.value = null
|
||||
grantMonths.value = 1
|
||||
$q.notify({ color: 'positive', message: '구독을 부여했습니다.', icon: 'check', position: 'top' })
|
||||
await loadAll()
|
||||
} catch (e) {
|
||||
$q.notify({ color: 'negative', message: e instanceof ApiError ? e.message : '부여에 실패했습니다.', icon: 'error', position: 'top' })
|
||||
} finally {
|
||||
granting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function onExtend(s: Subscription) {
|
||||
$q.dialog({
|
||||
title: '구독 연장',
|
||||
message: `${s.nickname} 님의 구독을 몇 개월 연장할까요?`,
|
||||
prompt: { model: '1', type: 'number', isValid: (v: string) => Number(v) >= 1 },
|
||||
cancel: true,
|
||||
}).onOk(async (val: string) => {
|
||||
await mutate(s.id, () => subscriptionsApi.extend(s.id, Number(val)), '연장했습니다.')
|
||||
})
|
||||
}
|
||||
|
||||
function onCancel(s: Subscription) {
|
||||
$q.dialog({
|
||||
title: '구독 취소',
|
||||
message: `${s.nickname}(${s.email}) 님의 구독을 취소하고 티어를 FREE로 되돌릴까요?`,
|
||||
cancel: true,
|
||||
ok: { label: '취소 처리', color: 'negative' },
|
||||
}).onOk(async () => {
|
||||
await mutate(s.id, () => subscriptionsApi.cancel(s.id), '구독을 취소했습니다.')
|
||||
})
|
||||
}
|
||||
|
||||
async function mutate(id: number, fn: () => Promise<Subscription>, done: string) {
|
||||
busyId.value = id
|
||||
try {
|
||||
await fn()
|
||||
$q.notify({ color: 'positive', message: done, icon: 'check', position: 'top' })
|
||||
await loadAll()
|
||||
} catch (e) {
|
||||
$q.notify({ color: 'negative', message: e instanceof ApiError ? e.message : '처리에 실패했습니다.', icon: 'error', position: 'top' })
|
||||
} finally {
|
||||
busyId.value = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user