zenn/tier-maker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

릴리스: v1.2.9 관리자 대시보드 디테일 정리

Browse Source
This commit is contained in:
zenn
2026-03-30 16:40:09 +09:00
parent d724a64451
commit 2346b5fbe3
5 changed files with 171 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
frontend/src/views/AdminView.vue
View File

@@ -95,6 +95,45 @@ const activeTabDescription = computed(() => {
}
return '계정 정보, 권한, 비밀번호와 최근 활동을 함께 확인합니다.'
})
const adminOverviewStats = computed(() => {
const publishedTierLists = adminTierLists.value.filter((tierList) => tierList.isPublic).length
const pendingRequests = templateRequests.value.length
const orphanItems = customItems.value.filter((item) => item.usageCount === 0).length
const adminCount = users.value.filter((user) => user.isAdmin || user.draftIsAdmin).length
if (activeTab.value === 'games') {
return [
{ label: '전체 게임', value: `${games.value.length}` },
{ label: '상단 고정', value: `${featuredGameIds.value.length}/50` },
{ label: '선택 상태', value: hasSelectedGame.value ? '활성' : '대기' },
]
}
if (activeTab.value === 'items') {
return [
{ label: '검색 결과', value: `${customItemTotal.value}` },
{ label: '미사용', value: `${orphanItems}` },
{ label: '대상 게임', value: customItemTargetGameId.value ? '선택됨' : '미선택' },
]
}
if (activeTab.value === 'tierlists') {
return tierlistsMode.value === 'requests'
? [
{ label: '대기 요청', value: `${pendingRequests}` },
{ label: '생성 요청', value: `${templateRequests.value.filter((request) => request.type === 'create').length}` },
{ label: '업데이트 요청', value: `${templateRequests.value.filter((request) => request.type === 'update').length}` },
]
: [
{ label: '검색 결과', value: `${adminTierListTotal.value}` },
{ label: '공개 티어표', value: `${publishedTierLists}` },
{ label: '현재 페이지', value: `${adminTierListPage.value}/${adminTierListPageCount.value}` },
]
}
return [
{ label: '가입 회원', value: `${users.value.length}` },
{ label: '관리자', value: `${adminCount}` },
{ label: '활동 계정', value: `${users.value.filter((user) => user.tierListCount > 0).length}` },
]
})
onMounted(async () => {
await auth.refresh()
@@ -897,6 +936,12 @@ async function saveFeaturedOrder() {
<div class="adminHero__eyebrow">Admin Workspace</div>
<h2 class="adminHero__title">{{ activeTabTitle }}</h2>
<p class="adminHero__desc">{{ activeTabDescription }}</p>
<div class="adminHero__stats">
<article v-for="stat in adminOverviewStats" :key="stat.label" class="adminHeroStat">
<span class="adminHeroStat__label">{{ stat.label }}</span>
<strong class="adminHeroStat__value">{{ stat.value }}</strong>
</article>
</div>
</header>
<template v-if="activeTab === 'games'">
@@ -1474,11 +1519,14 @@ async function saveFeaturedOrder() {
}
.adminHero {
display: grid;
gap: 8px;
padding: 18px 20px;
border-radius: 18px;
gap: 10px;
padding: 22px 24px;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.02);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}
.adminHero__eyebrow {
font-size: 11px;
@@ -1498,6 +1546,32 @@ async function saveFeaturedOrder() {
color: rgba(255, 255, 255, 0.66);
line-height: 1.6;
}
.adminHero__stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 6px;
}
.adminHeroStat {
display: grid;
gap: 6px;
padding: 14px 16px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(7, 7, 7, 0.18);
}
.adminHeroStat__label {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.46);
}
.adminHeroStat__value {
font-size: 22px;
line-height: 1;
font-weight: 900;
letter-spacing: -0.04em;
}
.adminSidebar {
position: sticky;
top: 14px;
@@ -1508,10 +1582,13 @@ async function saveFeaturedOrder() {
.adminSidebar__panel {
display: grid;
gap: 12px;
padding: 14px;
border-radius: 18px;
padding: 16px;
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(17, 17, 17, 0.9);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
rgba(13, 13, 13, 0.94);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}
.adminSidebar__label {
font-size: 11px;
@@ -1534,8 +1611,8 @@ async function saveFeaturedOrder() {
.sidebarStat {
display: grid;
gap: 4px;
padding: 10px 12px;
border-radius: 12px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
}
@@ -1589,18 +1666,29 @@ async function saveFeaturedOrder() {
}
.tab,
.modeTab {
padding: 10px 14px;
border-radius: 10px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.92);
cursor: pointer;
font-weight: 800;
transition:
border-color 0.16s ease,
background 0.16s ease,
transform 0.16s ease;
}
.tab:hover,
.modeTab:hover {
border-color: rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.07);
transform: translateY(-1px);
}
.tab--active,
.modeTab--active {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.18);
background: rgba(96, 165, 250, 0.14);
border-color: rgba(96, 165, 250, 0.28);
color: rgba(239, 246, 255, 0.98);
}
.adminSidebar__tabs .tab,
.modeTabs--stack .modeTab {
@@ -1609,9 +1697,12 @@ async function saveFeaturedOrder() {
}
.panel {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(48, 48, 48, 0.78);
border-radius: 18px;
padding: 16px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018)),
rgba(34, 34, 34, 0.84);
border-radius: 24px;
padding: 18px;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}
.panel--empty {
min-height: 240px;
@@ -1644,9 +1735,9 @@ async function saveFeaturedOrder() {
.featuredOrderPanel__list,
.featuredOrderPanel__picker {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.03);
border-radius: 16px;
padding: 14px;
background: rgba(255, 255, 255, 0.025);
border-radius: 18px;
padding: 16px;
}
.featuredList,
.featuredPickerList {
@@ -1661,10 +1752,10 @@ async function saveFeaturedOrder() {
gap: 12px;
justify-content: space-between;
align-items: center;
padding: 12px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.18);
padding: 14px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.22);
}
.featuredCard__meta {
display: flex;
@@ -1706,9 +1797,9 @@ async function saveFeaturedOrder() {
gap: 10px;
justify-content: space-between;
align-items: center;
padding: 12px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 14px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.16);
color: rgba(255, 255, 255, 0.92);
cursor: pointer;
@@ -1738,9 +1829,9 @@ async function saveFeaturedOrder() {
}
.adminCard {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.03);
border-radius: 16px;
padding: 14px;
background: rgba(255, 255, 255, 0.025);
border-radius: 18px;
padding: 16px;
min-width: 0;
}
.sectionHeader {
@@ -1783,8 +1874,8 @@ async function saveFeaturedOrder() {
.input {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border-radius: 12px;
padding: 11px 13px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.18);
color: rgba(255, 255, 255, 0.92);
@@ -1826,8 +1917,8 @@ async function saveFeaturedOrder() {
.btn {
font-size: 12px;
margin-top: 12px;
padding: 10px 12px;
border-radius: 12px;
padding: 11px 13px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.92);
@@ -1835,6 +1926,15 @@ async function saveFeaturedOrder() {
font-weight: 800;
text-align: center;
text-decoration: none;
transition:
background 0.16s ease,
border-color 0.16s ease,
transform 0.16s ease;
}
.btn:hover:not(:disabled) {
transform: translateY(-1px);
border-color: rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.1);
}
.btn--small {
margin-top: 0;
@@ -1853,6 +1953,7 @@ async function saveFeaturedOrder() {
}
.btn--primary {
background: rgba(96, 165, 250, 0.2);
border-color: rgba(96, 165, 250, 0.26);
}
.btn--danger {
background: rgba(239, 68, 68, 0.14);
@@ -1938,8 +2039,8 @@ async function saveFeaturedOrder() {
flex-wrap: wrap;
}
.itemPreviewCard {
padding: 10px;
border-radius: 14px;
padding: 12px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
}
@@ -1977,9 +2078,9 @@ async function saveFeaturedOrder() {
}
.thumbCard {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.04);
padding: 10px;
padding: 12px;
min-width: 0;
}
.thumb {
@@ -2012,18 +2113,18 @@ async function saveFeaturedOrder() {
.customItemGrid {
margin-top: 14px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
}
.customItemCard {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.04);
overflow: hidden;
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px;
padding: 14px;
min-width: 0;
}
.customItemCard__image {
@@ -2081,9 +2182,9 @@ async function saveFeaturedOrder() {
}
.userCard {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.04);
padding: 14px;
padding: 16px;
}
.userCard__head {
display: flex;
@@ -2134,8 +2235,8 @@ async function saveFeaturedOrder() {
.userStat {
display: grid;
gap: 4px;
padding: 10px 12px;
border-radius: 12px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
}
@@ -2176,8 +2277,8 @@ async function saveFeaturedOrder() {
.templateRequestCard {
display: grid;
gap: 14px;
padding: 16px;
border-radius: 18px;
padding: 18px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.03);
}
@@ -2242,9 +2343,9 @@ async function saveFeaturedOrder() {
grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
gap: 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 18px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.03);
padding: 14px;
padding: 16px;
}
.tierAdminCard__preview {
cursor: pointer;
@@ -2304,8 +2405,8 @@ async function saveFeaturedOrder() {
.tierAdminSection {
display: grid;
gap: 10px;
padding: 12px;
border-radius: 14px;
padding: 14px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.14);
}
@@ -2326,8 +2427,8 @@ async function saveFeaturedOrder() {
display: grid;
gap: 8px;
justify-items: center;
padding: 10px;
border-radius: 12px;
padding: 12px 10px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.92);
@@ -2363,8 +2464,8 @@ async function saveFeaturedOrder() {
width: min(560px, 100%);
display: grid;
gap: 14px;
padding: 18px;
border-radius: 20px;
padding: 20px;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(11, 18, 32, 0.96);
}
@@ -2425,6 +2526,9 @@ async function saveFeaturedOrder() {
.adminWorkspace {
grid-template-columns: 1fr;
}
.adminHero__stats {
grid-template-columns: 1fr;
}
.adminSidebar {
position: static;
order: -1;