소스 수정

frontend/index.vue

@@ -48,6 +48,9 @@
               icon="🔒"
               :status="privnetStatus"
             />
+            <LocationStatsPortlet
+              :locations="locationStats"
+            />
           </div>
         </div>
       </main>
@@ -83,11 +86,21 @@ let loadingStartTime = 0
 const pubnetStatus = ref<any>(null)
 const privnetStatus = ref<any>(null)
 const serverDashboard = ref<any>(null)
+const locationStats = ref<any[]>([])
 
 // WebSocket
 let ws: WebSocket | null = null
 let timeInterval: ReturnType<typeof window.setInterval> | null = null
 
+async function fetchLocationStats() {
+  try {
+    const data = await $fetch('/api/server/location-stats')
+    locationStats.value = data as any[]
+  } catch (err) {
+    console.error('Failed to fetch location stats:', err)
+  }
+}
+
 function formatTime(date: Date): string {
   const y = date.getFullYear()
   const m = String(date.getMonth() + 1).padStart(2, '0')
@@ -162,6 +175,7 @@ function connectWebSocket() {
       
       if (msg.type === 'server') {
         serverDashboard.value = msg.data
+        fetchLocationStats()
       }
     } catch (err) {
       console.error('[WS] Parse error:', err)
@@ -214,6 +228,7 @@ function navigateTo(path: string) {
 onMounted(() => {
   connectWebSocket()
   updateCurrentTime()
+  fetchLocationStats()
   timeInterval = window.setInterval(updateCurrentTime, 1000)
 })
 
@@ -239,7 +254,7 @@ onUnmounted(() => {
 
 .dashboard-layout { display: flex; gap: 16px; height: 100%; }
 .server-section { flex: 9; min-width: 0; }
-.network-section { flex: 1; min-width: 130px; max-width: 160px; display: flex; flex-direction: column; gap: 12px; }
+.network-section { flex: 1; min-width: 140px; max-width: 180px; display: flex; flex-direction: column; gap: 10px; }
 
 .connection-status { position: fixed; bottom: 16px; right: 16px; padding: 8px 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; font-size: 12px; color: var(--text-muted); }
 .connection-status.connected { color: #16a34a; }