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

---
 frontend/components/ServerPortlet.vue | 38 +++++++++++++--------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/frontend/components/ServerPortlet.vue b/frontend/components/ServerPortlet.vue
index 3c86f49..349c94b 100644
--- a/frontend/components/ServerPortlet.vue
+++ b/frontend/components/ServerPortlet.vue
@@ -44,9 +44,9 @@
           
           <template v-if="server.level !== 'offline'">
             <!-- 업타임 -->
-            <div class="extra-row">
-              <span class="extra-icon">⏱</span>
-              <span class="extra-value">{{ server.uptime_str || '-' }}</span>
+            <div class="info-row">
+              <span class="info-label">UP</span>
+              <span class="info-value">{{ server.uptime_str || '-' }}</span>
             </div>
             
             <div class="metric-row">
@@ -78,21 +78,21 @@
             </div>
             
             <!-- 추가 정보: 온도, Load, 메모리용량, 디스크용량 -->
-            <div class="extra-row">
-              <span class="extra-icon">🌡</span>
-              <span class="extra-value">{{ server.cpu_temp ? server.cpu_temp + '°C' : '-' }}</span>
+            <div class="info-row">
+              <span class="info-label">TEMP</span>
+              <span class="info-value">{{ server.cpu_temp ? server.cpu_temp + '°C' : '-' }}</span>
             </div>
-            <div class="extra-row">
-              <span class="extra-icon">⚡</span>
-              <span class="extra-value">{{ server.load_percent ? server.load_percent.toFixed(1) + '%' : '-' }}</span>
+            <div class="info-row">
+              <span class="info-label">LOAD</span>
+              <span class="info-value">{{ server.load_percent ? server.load_percent.toFixed(1) + '%' : '-' }}</span>
             </div>
-            <div class="extra-row">
-              <span class="extra-icon">🔲</span>
-              <span class="extra-value">{{ formatServerMem(server) }}</span>
+            <div class="info-row">
+              <span class="info-label">RAM</span>
+              <span class="info-value">{{ formatServerMem(server) }}</span>
             </div>
-            <div class="extra-row">
-              <span class="extra-icon">📀</span>
-              <span class="extra-value">{{ formatServerDisk(server) }}</span>
+            <div class="info-row">
+              <span class="info-label">HDD</span>
+              <span class="info-value">{{ formatServerDisk(server) }}</span>
             </div>
           </template>
           
@@ -423,7 +423,7 @@ function formatTimeAgo(datetime: string | null): string {
 .server-unit.danger { border-left: 5px solid #ef4444; }
 .server-unit.offline { border-left: 5px solid #6b7280; opacity: 0.7; }
 
-.server-info { width: 200px; min-width: 200px; padding: 16px; border-right: 1px solid var(--border-color); cursor: pointer; }
+.server-info { width: 220px; min-width: 220px; padding: 16px; border-right: 1px solid var(--border-color); cursor: pointer; }
 .server-info:hover { background: var(--bg-tertiary, #f8fafc); }
 
 .server-name { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
@@ -447,9 +447,9 @@ function formatTimeAgo(datetime: string | null): string {
 .metric-value.critical { color: #ea580c; }
 .metric-value.danger { color: #dc2626; }
 
-.extra-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
-.extra-icon { font-size: 12px; width: 16px; text-align: center; }
-.extra-value { font-size: 12px; font-weight: 600; color: var(--text-secondary); font-family: monospace; }
+.info-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
+.info-label { font-size: 14px; font-weight: 600; color: var(--text-muted); width: 42px; }
+.info-value { flex: 1; font-size: 14px; font-weight: 600; color: var(--text-secondary); font-family: monospace; text-align: right; }
 
 .offline-info { text-align: center; padding: 24px 0; color: var(--text-muted); }
 .offline-text { font-size: 18px; margin-bottom: 8px; }