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 @@
{{ levelIcon(server.level) }}
-
{{ server.server_name }}
+
+ {{ server.server_name }}
+ {{ server.server_ip }}
+
📦{{ server.container_summary.total }}
@@ -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; }