From ce90c41f0c5684a7240ff81f39c01d64a0783097 Mon Sep 17 00:00:00 2001
From: Hyoseong Jo <coziny@osolit.net>
Date: Sun, 28 Dec 2025 17:42:50 +0900
Subject: [PATCH] =?UTF-8?q?=EC=86=8C=EC=8A=A4=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/LocationStatsPortlet.vue | 150 +++++++++++--------
 frontend/components/NetworkPortlet.vue       |  41 +++--
 2 files changed, 104 insertions(+), 87 deletions(-)

diff --git a/frontend/components/LocationStatsPortlet.vue b/frontend/components/LocationStatsPortlet.vue
index cb630f5..da4aefc 100644
--- a/frontend/components/LocationStatsPortlet.vue
+++ b/frontend/components/LocationStatsPortlet.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="location-stats-card">
     <div class="card-header">
-      <span class="card-icon">🏢</span>
-      <span class="card-title">물리공간</span>
+      <span class="card-title">🏢 물리공간</span>
     </div>
     <div class="location-list">
       <div 
@@ -11,22 +10,25 @@
         class="location-item"
         :class="getTempClass(loc.avgTemp)"
       >
-        <div class="loc-name">{{ loc.location }}</div>
+        <div class="loc-header">
+          <span class="loc-name">{{ loc.location }}</span>
+          <span class="loc-servers">{{ loc.serverCount }}대</span>
+        </div>
         <div class="loc-stats">
-          <div class="stat-row temp">
-            <span class="stat-icon">🌡</span>
-            <span class="stat-value">{{ loc.avgTemp ? loc.avgTemp + '°C' : '-' }}</span>
+          <div class="stat-temp">
+            <span class="temp-value">{{ loc.avgTemp ? loc.avgTemp + '°' : '-' }}</span>
           </div>
-          <div class="stat-row traffic">
-            <span class="stat-icon">↓</span>
-            <span class="stat-value rx">{{ formatBytes(loc.totalRx) }}</span>
-          </div>
-          <div class="stat-row traffic">
-            <span class="stat-icon">↑</span>
-            <span class="stat-value tx">{{ formatBytes(loc.totalTx) }}</span>
+          <div class="stat-traffic">
+            <div class="traffic-row">
+              <span class="traffic-label">↓</span>
+              <span class="traffic-value rx">{{ formatBytes(loc.totalRx) }}</span>
+            </div>
+            <div class="traffic-row">
+              <span class="traffic-label">↑</span>
+              <span class="traffic-value tx">{{ formatBytes(loc.totalTx) }}</span>
+            </div>
           </div>
         </div>
-        <div class="loc-servers">{{ loc.serverCount }}대</div>
       </div>
       <div v-if="!locations || locations.length === 0" class="no-data">
         데이터 없음
@@ -56,11 +58,11 @@ function getTempClass(temp: number | null): string {
 }
 
 function formatBytes(bytes: number): string {
-  if (!bytes || bytes === 0) return '0 B/s'
-  if (bytes >= 1024 * 1024 * 1024) return (bytes / (1024 * 1024 * 1024)).toFixed(1) + ' GB/s'
-  if (bytes >= 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + ' MB/s'
-  if (bytes >= 1024) return (bytes / 1024).toFixed(1) + ' KB/s'
-  return bytes.toFixed(0) + ' B/s'
+  if (!bytes || bytes === 0) return '0B'
+  if (bytes >= 1024 * 1024 * 1024) return (bytes / (1024 * 1024 * 1024)).toFixed(1) + 'G'
+  if (bytes >= 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + 'M'
+  if (bytes >= 1024) return (bytes / 1024).toFixed(0) + 'K'
+  return bytes.toFixed(0) + 'B'
 }
 </script>
 
@@ -68,8 +70,8 @@ function formatBytes(bytes: number): string {
 .location-stats-card {
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
-  border-radius: 12px;
-  padding: 12px;
+  border-radius: 10px;
+  padding: 10px;
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -78,21 +80,17 @@ function formatBytes(bytes: number): string {
 }
 
 .card-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 10px;
-  padding-bottom: 8px;
+  margin-bottom: 8px;
+  padding-bottom: 6px;
   border-bottom: 1px solid var(--border-color);
 }
 
-.card-icon { font-size: 18px; }
-.card-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
+.card-title { font-size: 12px; font-weight: 600; color: var(--text-primary); }
 
 .location-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
   overflow-y: auto;
   flex: 1;
 }
@@ -100,61 +98,87 @@ function formatBytes(bytes: number): string {
 .location-item {
   background: var(--bg-tertiary, #f8fafc);
   border-radius: 8px;
-  padding: 10px;
+  padding: 8px 10px;
   border-left: 3px solid #22c55e;
 }
 
 .location-item.temp-warning { border-left-color: #f59e0b; }
 .location-item.temp-critical { border-left-color: #ef4444; }
 
+.loc-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
 .loc-name {
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 600;
   color: var(--text-primary);
-  margin-bottom: 6px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.loc-stats {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.stat-row {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 11px;
-}
-
-.stat-icon { 
-  width: 14px; 
-  text-align: center;
-  color: var(--text-muted);
-}
-
-.stat-value { 
-  color: var(--text-secondary);
-  font-family: monospace;
-}
-
-.stat-value.rx { color: #06b6d4; }
-.stat-value.tx { color: #f59e0b; }
-
 .loc-servers {
   font-size: 10px;
   color: var(--text-muted);
-  text-align: right;
-  margin-top: 4px;
+  flex-shrink: 0;
 }
 
-.no-data {
+.loc-stats {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.stat-temp {
+  flex-shrink: 0;
+}
+
+.temp-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text-primary);
+  font-family: monospace;
+}
+
+.temp-warning .temp-value { color: #f59e0b; }
+.temp-critical .temp-value { color: #ef4444; }
+
+.stat-traffic {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.traffic-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.traffic-label {
   font-size: 12px;
   color: var(--text-muted);
+  width: 12px;
+}
+
+.traffic-value {
+  font-size: 13px;
+  font-weight: 600;
+  font-family: monospace;
+}
+
+.traffic-value.rx { color: #06b6d4; }
+.traffic-value.tx { color: #f59e0b; }
+
+.no-data {
+  font-size: 11px;
+  color: var(--text-muted);
   text-align: center;
-  padding: 20px 0;
+  padding: 16px 0;
 }
 </style>
diff --git a/frontend/components/NetworkPortlet.vue b/frontend/components/NetworkPortlet.vue
index d2c380f..bfa2c5d 100644
--- a/frontend/components/NetworkPortlet.vue
+++ b/frontend/components/NetworkPortlet.vue
@@ -1,14 +1,8 @@
 <template>
   <div :class="['network-card', statusClass]" @click="goToList">
-    <div class="card-icon">{{ icon }}</div>
-    <div class="card-title">{{ title }}</div>
-    <div class="card-status" v-if="status && status.last_checked_at">
-      <span class="status-icon">{{ status.is_healthy ? '✅' : '❌' }}</span>
-      <span class="status-text">{{ status.is_healthy ? '정상' : '오류' }}</span>
-    </div>
-    <div class="card-status" v-else>
-      <span class="status-icon">⚪</span>
-      <span class="status-text">대기</span>
+    <div class="card-row">
+      <span class="card-title">{{ icon }} {{ title }}</span>
+      <span class="status-badge">{{ status?.is_healthy ? '✅' : status?.last_checked_at ? '❌' : '⚪' }}</span>
     </div>
     <div class="card-time" v-if="status && status.last_checked_at">
       {{ formatTimeAgo(status.last_checked_at) }}
@@ -55,30 +49,29 @@ function formatTimeAgo(datetime: string | null): string {
 .network-card {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  padding: 10px 8px;
+  padding: 8px 10px;
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
-  border-radius: 10px;
+  border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s;
-  text-align: center;
 }
 .network-card:hover {
   background: var(--bg-tertiary, #f8fafc);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
 }
-.network-card.healthy { border-top: 4px solid #22c55e; }
-.network-card.unhealthy { border-top: 4px solid #ef4444; }
-.network-card.pending { border-top: 4px solid #9ca3af; }
+.network-card.healthy { border-left: 3px solid #22c55e; }
+.network-card.unhealthy { border-left: 3px solid #ef4444; }
+.network-card.pending { border-left: 3px solid #9ca3af; }
 
-.card-icon { font-size: 22px; margin-bottom: 4px; }
-.card-title { font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
+.card-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 
-.card-status { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 2px; }
-.status-icon { font-size: 14px; }
-.status-text { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
+.card-title { font-size: 12px; font-weight: 600; color: var(--text-primary); }
+.status-badge { font-size: 12px; }
 
-.card-time { font-size: 10px; color: var(--text-muted); }
+.card-time { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
 </style>