관리자 통계 UI 개선 v1.9.7

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

Co-authored-by: Cursor <cursoragent@cursor.com>

components/admin/AdminAnalyticsTrendChart.vue

@@ -119,6 +119,15 @@ const isBarDimmed = (row) => {
   return Boolean(hoveredBarKey.value && !isBarEmphasized(row))
 }
 
+/**
+ * 축 라벨이 강조 상태인지 확인한다.
+ * @param {Object} row - 추이 행
+ * @returns {boolean} 강조 여부
+ */
+const isAxisHighlighted = (row) => {
+  return isBarEmphasized(row) || (isAnalyticsCurrentTrendRow(props.period, row, todayKey) && !hoveredBarKey.value)
+}
+
 /**
  * 막대 높이 비율을 반환한다.
  * @param {Object} row - 추이 행
@@ -247,10 +256,7 @@ const getRowDelta = (row) => {
 </script>
 
 <template>
-  <section
-    class="admin-analytics-trend-chart"
-    @mouseleave="handleBarLeave"
-  >
+  <section class="admin-analytics-trend-chart">
     <header
       v-if="showHeader && chartHeaderLabel"
       class="admin-analytics-trend-chart__header mb-3 flex items-center justify-between gap-3"
@@ -272,13 +278,14 @@ const getRowDelta = (row) => {
           :key="`${period}-${getBarRowKey(row)}`"
           class="admin-analytics-trend-chart__column flex min-w-0 flex-1 flex-col transition-opacity duration-150"
           :class="isBarDimmed(row) ? 'opacity-40' : 'opacity-100'"
+          @mouseenter="handleBarEnter(row)"
+          @mouseleave="handleBarLeave"
         >
           <component
             :is="clickable ? 'button' : 'div'"
             class="admin-analytics-trend-chart__bar-wrap group relative flex w-full items-end border-b border-line"
             :class="[barHeightClass, clickable ? 'cursor-pointer border-0 bg-transparent p-0' : '']"
             :type="clickable ? 'button' : undefined"
-            @mouseenter="handleBarEnter(row)"
             @focus="handleBarEnter(row)"
             @click="handleBarClick(row)"
           >
@@ -341,10 +348,10 @@ const getRowDelta = (row) => {
             />
           </component>
 
-          <div class="admin-analytics-trend-chart__axis border-t border-line pt-2 text-center">
+          <div class="admin-analytics-trend-chart__axis overflow-visible border-t border-line px-0.5 pt-2 text-center">
             <span
-              class="admin-analytics-trend-chart__axis-primary inline-block text-[11px] font-medium transition-colors duration-150"
-              :class="isBarEmphasized(row) || (isAnalyticsCurrentTrendRow(period, row, todayKey) && !hoveredBarKey) ? 'rounded-full bg-[#15171a] px-2 py-0.5 text-[10px] text-white' : 'text-muted'"
+              class="admin-analytics-trend-chart__axis-primary inline-flex max-w-full items-center justify-center whitespace-nowrap leading-none transition-colors duration-150"
+              :class="isAxisHighlighted(row) ? 'rounded-full bg-[#15171a] px-1.5 py-0.5 text-[9px] font-semibold !text-white' : 'text-[11px] font-medium text-muted'"
             >
               {{ getAnalyticsTrendAxisPrimaryLabel(period, row, index === visibleRows.length - 1, todayKey) }}
             </span>