대시보드 디바이스 통계 표시 정리

pages/admin/index.vue

@@ -130,7 +130,15 @@ const groupedTrafficDevices = computed(() => {
     groups.set(key, existing)
   }
 
-  return [...groups.values()].sort((a, b) => b.pageViews - a.pageViews || b.visitors - a.visitors)
+  return [...groups.values()]
+    .map((group) => ({
+      ...group,
+      rows: [...group.rows].sort((a, b) => {
+        return Number(b.visitors || 0) - Number(a.visitors || 0)
+          || Number(b.pageViews || 0) - Number(a.pageViews || 0)
+      })
+    }))
+    .sort((a, b) => b.visitors - a.visitors || b.pageViews - a.pageViews)
 })
 const topPosts = computed(() => selectedTrendDetail.value?.topPosts || [])
 const topPages = computed(() => selectedTrendDetail.value?.topPages || [])
@@ -266,6 +274,18 @@ const formatTrafficPercent = (value) => {
   return `${Math.round((Number(value || 0) / total) * 100)}%`
 }
 
+/**
+ * 디바이스 집계 요약을 표시한다.
+ * @param {{ pageViews?: number, visitors?: number }} row - 디바이스 집계
+ * @returns {string} 표시 문자열
+ */
+const formatDeviceSummary = (row) => {
+  const visitors = Number(row?.visitors || 0)
+  const pageViews = Number(row?.pageViews || 0)
+
+  return `${visitors}명 / ${pageViews}회 / ${formatDeviceVisitorPercent(visitors)}`
+}
+
 /**
  * 디바이스 방문자 비율을 표시한다.
  * @param {number} value - 방문자 수
@@ -885,22 +905,15 @@ watch(trendRows, () => {
                     :key="group.deviceType"
                     class="border-b border-line pb-2 text-xs last:border-b-0 last:pb-0"
                   >
-                    <div class="flex items-start justify-between gap-3">
-                      <div>
-                        <p class="font-medium text-ink">
-                          {{ group.deviceType }}
-                        </p>
-                        <p class="mt-0.5 text-[11px] text-muted">
-                          {{ group.rows.map((row) => row.osName).filter(Boolean).join(' / ') || '-' }}
-                        </p>
-                      </div>
-                      <p class="text-right text-muted">
-                        <span class="font-semibold text-ink">{{ group.pageViews }}</span>회
-                        <br>
-                        {{ group.visitors }}명 · {{ formatDeviceVisitorPercent(group.visitors) }}
+                    <div class="flex items-center justify-between gap-3">
+                      <p class="font-medium text-ink">
+                        {{ group.deviceType }}
+                      </p>
+                      <p class="shrink-0 text-right font-medium text-muted">
+                        {{ formatDeviceSummary(group) }}
                       </p>
                     </div>
-                    <ul class="mt-2 space-y-1 border-t border-line pt-2 text-[11px] text-muted">
+                    <ul class="mt-2 space-y-1 text-[11px] text-muted">
                       <li
                         v-for="row in group.rows"
                         :key="`${group.deviceType}-${row.osName}`"