From bf10a1d000756f8497a00a603a8406982d32fcb8 Mon Sep 17 00:00:00 2001
From: Hyoseong Jo <coziny@osolit.net>
Date: Sun, 28 Dec 2025 23:49:11 +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

---
 backend/routes/_ws.ts                 |  3 ++-
 frontend/components/ServerPortlet.vue | 10 ++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/backend/routes/_ws.ts b/backend/routes/_ws.ts
index 7a6e85c..58bf17e 100644
--- a/backend/routes/_ws.ts
+++ b/backend/routes/_ws.ts
@@ -163,7 +163,7 @@ async function getServerDashboard() {
   
   // 서버 목록
   const servers = await query(`
-    SELECT target_id, server_name, is_active 
+    SELECT target_id, server_name, server_ip, is_active 
     FROM server_targets 
     WHERE is_active = 1 
     ORDER BY server_name
@@ -290,6 +290,7 @@ async function getServerDashboard() {
     serverStatuses.push({
       target_id: server.target_id,
       server_name: server.server_name,
+      server_ip: server.server_ip,
       level: serverLevel,
       cpu_percent: snapshot?.cpu_percent ?? null,
       cpu_level: cpuLevel,
diff --git a/frontend/components/ServerPortlet.vue b/frontend/components/ServerPortlet.vue
index ef1c55d..3c86f49 100644
--- a/frontend/components/ServerPortlet.vue
+++ b/frontend/components/ServerPortlet.vue
@@ -35,7 +35,10 @@
         <div class="server-info" @dblclick="goToServerStatus(server.target_id)">
           <div class="server-name">
             <span class="level-icon">{{ levelIcon(server.level) }}</span>
-            <span class="name">{{ server.server_name }}</span>
+            <div class="name-wrap">
+              <span class="name">{{ server.server_name }}</span>
+              <span class="server-ip">{{ server.server_ip }}</span>
+            </div>
             <span class="container-count" v-if="server.level !== 'offline'">📦{{ server.container_summary.total }}</span>
           </div>
           
@@ -181,6 +184,7 @@ interface ContainerStatus {
 interface ServerStatus {
   target_id: number
   server_name: string
+  server_ip: string
   level: string
   cpu_percent: number | null
   cpu_level: string
@@ -424,7 +428,9 @@ function formatTimeAgo(datetime: string | null): string {
 
 .server-name { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
 .server-name .level-icon { font-size: 16px; flex-shrink: 0; }
-.server-name .name { font-size: 19px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
+.server-name .name-wrap { flex: 1; min-width: 0; overflow: hidden; }
+.server-name .name { display: block; font-size: 19px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.server-name .server-ip { display: block; font-size: 12px; color: var(--text-muted); font-family: monospace; margin-top: 2px; }
 .server-name .container-count { font-size: 15px; color: var(--text-muted); flex-shrink: 0; }
 
 .metric-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }