관리자 통계 UI 개선 v1.9.7

기간 필터 hover 스타일 충돌을 수정하고, 통계 추이 기본값을 일간으로 변경한다.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-06-29 15:34:22 +09:00
parent ef9efd7af5
commit 901463e5f3
8 changed files with 36 additions and 21 deletions

View File

@@ -11,15 +11,15 @@ const { data: posts } = await useFetch('/admin/api/posts', {
})
const analyticsRangeOptions = [
{ label: '일일', period: 'daily', days: 7 },
{ label: '일간', period: 'daily', days: 7 },
{ label: '주간', period: 'weekly', days: 56 },
{ label: '월간', period: 'monthly', days: 365 },
{ label: '년간', period: 'yearly', days: 365 * 8 }
]
const selectedAnalyticsPeriod = ref('weekly')
const selectedAnalyticsPeriod = ref('daily')
const analyticsChartPageOffset = ref(0)
const selectedAnalyticsRange = computed(() => {
return analyticsRangeOptions.find((option) => option.period === selectedAnalyticsPeriod.value) || analyticsRangeOptions[1]
return analyticsRangeOptions.find((option) => option.period === selectedAnalyticsPeriod.value) || analyticsRangeOptions[0]
})
const selectedAnalyticsDays = computed(() => selectedAnalyticsRange.value.days)
const analyticsQuery = computed(() => ({
@@ -422,8 +422,10 @@ watch(selectedAnalyticsPeriod, () => {
v-for="option in analyticsRangeOptions"
:key="option.period"
type="button"
class="admin-dashboard__range-button border border-line px-3 py-1 text-xs font-medium text-muted hover:bg-paper hover:text-ink"
:class="option.period === selectedAnalyticsPeriod ? 'bg-[#15171a] text-white hover:bg-[#15171a] hover:text-white' : 'bg-white'"
class="admin-dashboard__range-button border border-line px-3 py-1 text-xs font-medium transition-colors"
:class="option.period === selectedAnalyticsPeriod
? 'bg-[#15171a] !text-white hover:!bg-[#15171a] hover:!text-white'
: 'bg-white text-muted hover:bg-paper hover:text-ink'"
@click="selectedAnalyticsPeriod = option.period"
>
{{ option.label }}

View File

@@ -456,7 +456,7 @@ const deletePage = async (page) => {
v-for="metric in analyticsMetricOptions"
:key="metric.value"
class="h-8 border-r border-line px-3 text-xs font-semibold last:border-r-0"
:class="analyticsModalMetric === metric.value ? 'bg-[#15171a] text-white' : 'text-muted hover:bg-paper hover:text-ink'"
:class="analyticsModalMetric === metric.value ? 'bg-[#15171a] !text-white hover:!bg-[#15171a] hover:!text-white' : 'text-muted hover:bg-paper hover:text-ink'"
type="button"
@click="analyticsModalMetric = metric.value"
>
@@ -468,7 +468,7 @@ const deletePage = async (page) => {
v-for="option in analyticsPeriodOptions"
:key="option.value"
class="h-8 border-r border-line px-3 text-xs font-semibold last:border-r-0"
:class="analyticsModalPeriod === option.value ? 'bg-[#15171a] text-white' : 'text-muted hover:bg-paper hover:text-ink'"
:class="analyticsModalPeriod === option.value ? 'bg-[#15171a] !text-white hover:!bg-[#15171a] hover:!text-white' : 'text-muted hover:bg-paper hover:text-ink'"
type="button"
@click="selectAnalyticsModalPeriod(option.value)"
>

View File

@@ -1041,7 +1041,7 @@ watch(openPostMenuId, async (postId) => {
v-for="metric in analyticsMetricOptions"
:key="metric.value"
class="h-8 border-r border-line px-3 text-xs font-semibold last:border-r-0"
:class="analyticsModalMetric === metric.value ? 'bg-[#15171a] text-white' : 'text-muted hover:bg-paper hover:text-ink'"
:class="analyticsModalMetric === metric.value ? 'bg-[#15171a] !text-white hover:!bg-[#15171a] hover:!text-white' : 'text-muted hover:bg-paper hover:text-ink'"
type="button"
@click="analyticsModalMetric = metric.value"
>
@@ -1053,7 +1053,7 @@ watch(openPostMenuId, async (postId) => {
v-for="option in analyticsPeriodOptions"
:key="option.value"
class="h-8 border-r border-line px-3 text-xs font-semibold last:border-r-0"
:class="analyticsModalPeriod === option.value ? 'bg-[#15171a] text-white' : 'text-muted hover:bg-paper hover:text-ink'"
:class="analyticsModalPeriod === option.value ? 'bg-[#15171a] !text-white hover:!bg-[#15171a] hover:!text-white' : 'text-muted hover:bg-paper hover:text-ink'"
type="button"
@click="selectAnalyticsModalPeriod(option.value)"
>