From 4f8e76866b6ea5c2b1e87f8b50ee5e3d487c7a52 Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Thu, 12 Jun 2025 14:33:19 +0900
Subject: [PATCH 01/17] =?UTF-8?q?rack=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../META-INF/db/schema-Diplo-After.sql        | 17 +++++-
 .../LibvirtRestoreBackupCommandWrapper.java   | 12 +---
 ui/public/locales/en.json                     |  3 +-
 ui/public/locales/ko_KR.json                  |  3 +-
 ui/src/config/section/infra/zones.js          |  3 +
 ui/src/views/plugins/IFrameRack.vue           | 60 +++++++++++++++++++
 ui/vue.config.js                              |  2 +-
 7 files changed, 85 insertions(+), 15 deletions(-)
 create mode 100644 ui/src/views/plugins/IFrameRack.vue

diff --git a/engine/schema/src/main/resources/META-INF/db/schema-Diplo-After.sql b/engine/schema/src/main/resources/META-INF/db/schema-Diplo-After.sql
index 3b20c46d3389..276322356a87 100644
--- a/engine/schema/src/main/resources/META-INF/db/schema-Diplo-After.sql
+++ b/engine/schema/src/main/resources/META-INF/db/schema-Diplo-After.sql
@@ -47,4 +47,19 @@ INSERT IGNORE INTO `cloud`.`vbmc_port` (id, port) VALUES (17, 6246);
 INSERT IGNORE INTO `cloud`.`vbmc_port` (id, port) VALUES (18, 6247);
 INSERT IGNORE INTO `cloud`.`vbmc_port` (id, port) VALUES (19, 6248);
 INSERT IGNORE INTO `cloud`.`vbmc_port` (id, port) VALUES (20, 6249);
-INSERT IGNORE INTO `cloud`.`vbmc_port` (id, port) VALUES (21, 6250);
\ No newline at end of file
+INSERT IGNORE INTO `cloud`.`vbmc_port` (id, port) VALUES (21, 6250);
+
+
+-- BEGIN TABLE rackml_config
+CREATE TABLE IF NOT EXISTS `rackml_config` (
+    `id` bigint unsigned NOT NULL AUTO_INCREMENT COMMENT 'primary key',
+    `zone_id` bigint unsigned NOT NULL COMMENT 'foreign key to data_center.id',
+    `name` varchar(100) NOT NULL COMMENT 'config name (e.g. default)',
+    `content` text NOT NULL COMMENT 'RackML content',
+    `updated_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 'last update time',
+PRIMARY KEY (`id`),
+UNIQUE KEY `uc_rackml_zone_name` (`zone_id`, `name`),
+CONSTRAINT `fk_rackml__zone` FOREIGN KEY (`zone_id`) REFERENCES `data_center` (`id`)
+                                                          ON DELETE RESTRICT
+                                                          ON UPDATE CASCADE
+) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb3;
\ No newline at end of file
diff --git a/plugins/hypervisors/kvm/src/main/java/com/cloud/hypervisor/kvm/resource/wrapper/LibvirtRestoreBackupCommandWrapper.java b/plugins/hypervisors/kvm/src/main/java/com/cloud/hypervisor/kvm/resource/wrapper/LibvirtRestoreBackupCommandWrapper.java
index 0779a2aa468d..aff11cc61a58 100644
--- a/plugins/hypervisors/kvm/src/main/java/com/cloud/hypervisor/kvm/resource/wrapper/LibvirtRestoreBackupCommandWrapper.java
+++ b/plugins/hypervisors/kvm/src/main/java/com/cloud/hypervisor/kvm/resource/wrapper/LibvirtRestoreBackupCommandWrapper.java
@@ -78,7 +78,7 @@ public Answer execute(RestoreBackupCommand command, LibvirtComputingResource ser
     }
 
     private void restoreVolumesOfExistingVM(List<String> volumePaths, String backupPath,
-                                             String backupRepoType, String backupRepoAddress, String mountOptions) {
+                                            String backupRepoType, String backupRepoAddress, String mountOptions) {
         String diskType = "root";
         String mountDirectory = mountBackupDirectory(backupRepoAddress, backupRepoType);
         try {
@@ -151,16 +151,6 @@ private String mountBackupDirectory(String backupRepoAddress, String backupRepoT
         try {
             mountDirectory = Files.createTempDirectory(mountDirectory).toString();
             String mount = String.format(MOUNT_COMMAND, backupRepoType, backupRepoAddress, mountDirectory);
-            if ("cifs".equals(backupRepoType)) {
-                if (Objects.isNull(mountOptions) || mountOptions.trim().isEmpty()) {
-                    mountOptions = "nobrl";
-                } else {
-                    mountOptions += ",nobrl";
-                }
-            }
-            if (Objects.nonNull(mountOptions) && !mountOptions.trim().isEmpty()) {
-                mount += " -o " + mountOptions;
-            }
             Script.runSimpleBashScript(mount);
         } catch (Exception e) {
             throw new CloudRuntimeException(String.format("Failed to mount %s to %s", backupRepoType, backupRepoAddress), e);
diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 757e2cb4558b..5896947043ef 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -4769,5 +4769,6 @@
 "label.theme.cyan": "Cyan",
 "label.theme.polar.green": "Polar Green",
 "label.theme.geek.blue": "Geek Blue",
-"label.theme.golden.purple": "Golden Purple"
+"label.theme.golden.purple": "Golden Purple",
+"label.zone.rack": "Rack"
 }
diff --git a/ui/public/locales/ko_KR.json b/ui/public/locales/ko_KR.json
index 74a678643f58..d48c6a2240e6 100644
--- a/ui/public/locales/ko_KR.json
+++ b/ui/public/locales/ko_KR.json
@@ -4769,5 +4769,6 @@
 "label.theme.cyan": "\uc2dc\uc548",
 "label.theme.polar.green": "\ud3f4\ub77c \uadf8\ub9b0",
 "label.theme.geek.blue": "\uae31 \ube14\ub8e8",
-"label.theme.golden.purple": "\uace8\ub4e0 \ud37c\ud50c"
+"label.theme.golden.purple": "\uace8\ub4e0 \ud37c\ud50c",
+"label.zone.rack": "\uB799\u0020\uC2DC\uAC01\uD654"
 }
diff --git a/ui/src/config/section/infra/zones.js b/ui/src/config/section/infra/zones.js
index b4a34372e101..b3ccd17033e2 100644
--- a/ui/src/config/section/infra/zones.js
+++ b/ui/src/config/section/infra/zones.js
@@ -72,6 +72,9 @@ export default {
   }, {
     name: 'physical.network',
     component: shallowRef(defineAsyncComponent(() => import('@/views/infra/zone/PhysicalNetworksTab.vue')))
+  }, {
+    name: 'zone.rack',
+    component: shallowRef(defineAsyncComponent(() => import('@/views/plugins/IFrameRack.vue')))
   }, {
     name: 'ipv4.subnets',
     component: shallowRef(defineAsyncComponent(() => import('@/views/infra/zone/Ipv4GuestSubnetsTab.vue'))),
diff --git a/ui/src/views/plugins/IFrameRack.vue b/ui/src/views/plugins/IFrameRack.vue
new file mode 100644
index 000000000000..fa8f3af0325d
--- /dev/null
+++ b/ui/src/views/plugins/IFrameRack.vue
@@ -0,0 +1,60 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div>
+    <iframe :src="uriInfo" width="100%" frameBorder="0" style="height: 90vh">
+    </iframe>
+  </div>
+</template>
+
+<script>
+import { api } from '@/api'
+export default {
+  name: 'IFrameWall',
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      uriInfo: ''
+    }
+  },
+  created () {
+    this.urlAction()
+  },
+  methods: {
+    urlAction () {
+      const theme = this.$localStorage.get('DARK_MODE') ? '&theme=dark' : '&theme=light'
+      const port = 7077
+      const zoneId = this.resource.id
+
+      api('listCapabilities').then(json => {
+        const host = json.listcapabilitiesresponse.capability.host || 'localhost'
+        this.uriInfo = `http://${host}:${port}/index.html?zone_id=${zoneId}&name=default${theme}`
+        this.uriCreateOk = true
+      }).catch(err => {
+        console.error('capabilities API 실패:', err)
+        this.uriInfo = ''
+      })
+    }
+  }
+}
+</script>
diff --git a/ui/vue.config.js b/ui/vue.config.js
index 9cae2ff66fb1..e63f7095f0c2 100644
--- a/ui/vue.config.js
+++ b/ui/vue.config.js
@@ -138,7 +138,7 @@ const vueConfig = {
     port: 5050,
     proxy: {
       '/client': {
-        target: process.env.CS_URL || 'http://localhost:8080',
+        target: process.env.CS_URL || 'http://10.10.253.29:8080',
         secure: false,
         ws: false,
         changeOrigin: true,

From 8ce65ccf673db2eb53986321ce61015c5e305669 Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Mon, 14 Jul 2025 16:30:57 +0900
Subject: [PATCH 02/17] =?UTF-8?q?Rack=20=EC=8B=9C=EA=B0=81=ED=99=94=20loca?=
 =?UTF-8?q?lhost=20->=20listcapabilitiesresponse.capability.host=20?=
 =?UTF-8?q?=EA=B0=92=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/views/plugins/IFrameRack.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/ui/src/views/plugins/IFrameRack.vue b/ui/src/views/plugins/IFrameRack.vue
index fa8f3af0325d..364017e74953 100644
--- a/ui/src/views/plugins/IFrameRack.vue
+++ b/ui/src/views/plugins/IFrameRack.vue
@@ -42,13 +42,12 @@ export default {
   },
   methods: {
     urlAction () {
-      const theme = this.$localStorage.get('DARK_MODE') ? '&theme=dark' : '&theme=light'
       const port = 7077
       const zoneId = this.resource.id
 
       api('listCapabilities').then(json => {
-        const host = json.listcapabilitiesresponse.capability.host || 'localhost'
-        this.uriInfo = `http://${host}:${port}/index.html?zone_id=${zoneId}&name=default${theme}`
+        const host = json.listcapabilitiesresponse.capability.host || []
+        this.uriInfo = `http://${host}:${port}/index.html?zone_id=${zoneId}`
         this.uriCreateOk = true
       }).catch(err => {
         console.error('capabilities API 실패:', err)

From 9146ff3c3f56e9a83024f3df728efc61c1b54896 Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Thu, 19 Mar 2026 10:07:07 +0900
Subject: [PATCH 03/17] =?UTF-8?q?[=EB=9E=99=20=EC=8B=9C=EA=B0=81=ED=99=94]?=
 =?UTF-8?q?=201.=20Rack=20=EC=8B=9C=EA=B0=81=ED=99=94=20=EA=B8=B0=EB=8A=A5?=
 =?UTF-8?q?=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/pom.xml                                |    5 +
 plugins/integrations/rack-management/pom.xml  |  140 ++
 .../java/com/cloud/rack/RackLayoutDao.java    |    7 +
 .../com/cloud/rack/RackLayoutDaoImpl.java     |   28 +
 .../com/cloud/rack/RackLayoutManagerImpl.java |   92 +
 .../com/cloud/rack/RackLayoutService.java     |   13 +
 .../java/com/cloud/rack/RackLayoutVO.java     |   55 +
 .../admin/rack/ListRackLayoutsCmd.java        |   69 +
 .../admin/rack/UpdateRackLayoutCmd.java       |   84 +
 .../api/response/RackLayoutResponse.java      |   59 +
 .../rack-management/module.properties         |   18 +
 .../spring-rack-management-context.xml        |   33 +
 plugins/pom.xml                               |    1 +
 tools/marvin/setup.py                         |    2 +-
 ui/package-lock.json                          |   38 +
 ui/package.json                               |    3 +-
 ui/public/locales/en.json                     |    2 +-
 ui/public/locales/ko_KR.json                  |    2 +-
 ui/src/components/page/GlobalLayout.vue       |   27 +-
 ui/src/config/section/infra/zones.js          |    2 +-
 ui/src/views/infra/zone/RackDiagramTab.vue    | 1579 +++++++++++++++++
 ui/src/views/plugins/IFrameRack.vue           |   59 -
 ui/vue.config.js                              |    2 +-
 23 files changed, 2253 insertions(+), 67 deletions(-)
 create mode 100644 plugins/integrations/rack-management/pom.xml
 create mode 100644 plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutDao.java
 create mode 100644 plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutDaoImpl.java
 create mode 100644 plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutManagerImpl.java
 create mode 100644 plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutService.java
 create mode 100644 plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutVO.java
 create mode 100644 plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/command/admin/rack/ListRackLayoutsCmd.java
 create mode 100644 plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/command/admin/rack/UpdateRackLayoutCmd.java
 create mode 100644 plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/response/RackLayoutResponse.java
 create mode 100644 plugins/integrations/rack-management/src/main/resources/META-INF/cloudstack/rack-management/module.properties
 create mode 100644 plugins/integrations/rack-management/src/main/resources/META-INF/cloudstack/rack-management/spring-rack-management-context.xml
 create mode 100644 ui/src/views/infra/zone/RackDiagramTab.vue
 delete mode 100644 ui/src/views/plugins/IFrameRack.vue

diff --git a/client/pom.xml b/client/pom.xml
index 03991a2f5dc7..224a145152b0 100644
--- a/client/pom.xml
+++ b/client/pom.xml
@@ -647,6 +647,11 @@
             <artifactId>cloud-plugin-integrations-wall-alerts</artifactId>
             <version>${project.version}</version>
         </dependency>
+        <dependency>
+            <groupId>org.apache.cloudstack</groupId>
+            <artifactId>cloud-plugin-integrations-rack-management</artifactId>
+            <version>${project.version}</version>
+        </dependency>
         <dependency>
            <groupId>org.apache.cloudstack</groupId>
            <artifactId>cloud-plugin-shutdown</artifactId>
diff --git a/plugins/integrations/rack-management/pom.xml b/plugins/integrations/rack-management/pom.xml
new file mode 100644
index 000000000000..0da8097b55bf
--- /dev/null
+++ b/plugins/integrations/rack-management/pom.xml
@@ -0,0 +1,140 @@
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  The ASF licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing,
+  software distributed under the License is distributed on an
+  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  KIND, either express or implied.  See the License for the
+  specific language governing permissions and limitations
+  under the License.
+-->
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
+         http://maven.apache.org/xsd/maven-4.0.0.xsd">
+
+    <modelVersion>4.0.0</modelVersion>
+    <artifactId>cloud-plugin-integrations-rack-management</artifactId>
+    <name>Apache CloudStack Plugin - Rack Management</name>
+    <parent>
+        <groupId>org.apache.cloudstack</groupId>
+        <artifactId>cloudstack-plugins</artifactId>
+        <version>4.21.0.0-SNAPSHOT</version>
+        <relativePath>../../pom.xml</relativePath>
+    </parent>
+    <dependencies>
+        <dependency>
+            <groupId>org.apache.cloudstack</groupId>
+            <artifactId>cloud-core</artifactId>
+            <version>${project.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.apache.cloudstack</groupId>
+            <artifactId>cloud-framework-db</artifactId>
+            <version>${project.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.apache.cloudstack</groupId>
+            <artifactId>cloud-framework-ca</artifactId>
+            <version>${project.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.apache.cloudstack</groupId>
+            <artifactId>cloud-framework-security</artifactId>
+            <version>${project.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.apache.cloudstack</groupId>
+            <artifactId>cloud-engine-schema</artifactId>
+            <version>${project.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.apache.cloudstack</groupId>
+            <artifactId>cloud-engine-api</artifactId>
+            <version>${project.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.apache.cloudstack</groupId>
+            <artifactId>cloud-engine-components-api</artifactId>
+            <version>${project.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.apache.cloudstack</groupId>
+            <artifactId>cloud-framework-managed-context</artifactId>
+            <version>${project.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.eclipse.persistence</groupId>
+            <artifactId>javax.persistence</artifactId>
+            <version>${cs.jpa.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>com.google.code.gson</groupId>
+            <artifactId>gson</artifactId>
+            <version>${cs.gson.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>com.google.guava</groupId>
+            <artifactId>guava</artifactId>
+            <version>${cs.guava.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>ch.qos.reload4j</groupId>
+            <artifactId>reload4j</artifactId>
+            <version>${cs.reload4j.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework</groupId>
+            <artifactId>spring-context</artifactId>
+            <version>${org.springframework.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework</groupId>
+            <artifactId>spring-aop</artifactId>
+            <version>${org.springframework.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework</groupId>
+            <artifactId>spring-beans</artifactId>
+            <version>${org.springframework.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework</groupId>
+            <artifactId>spring-test</artifactId>
+            <version>${org.springframework.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>commons-codec</groupId>
+            <artifactId>commons-codec</artifactId>
+            <version>${cs.codec.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.hamcrest</groupId>
+            <artifactId>hamcrest-library</artifactId>
+            <version>${cs.hamcrest.version}</version>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.bouncycastle</groupId>
+            <artifactId>bcprov-jdk15on</artifactId>
+            <version>${cs.bcprov.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.bouncycastle</groupId>
+            <artifactId>bctls-jdk15on</artifactId>
+            <version>${cs.bcprov.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>joda-time</groupId>
+            <artifactId>joda-time</artifactId>
+            <version>${cs.joda-time.version}</version>
+        </dependency>
+    </dependencies>
+</project>
diff --git a/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutDao.java b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutDao.java
new file mode 100644
index 000000000000..6985feb90346
--- /dev/null
+++ b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutDao.java
@@ -0,0 +1,7 @@
+package com.cloud.rack;
+
+import com.cloud.utils.db.GenericDao;
+
+public interface RackLayoutDao extends GenericDao<RackLayoutVO, Long> {
+    RackLayoutVO findByZoneAndName(Long zoneId, String name);
+}
\ No newline at end of file
diff --git a/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutDaoImpl.java b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutDaoImpl.java
new file mode 100644
index 000000000000..db46e01ed7aa
--- /dev/null
+++ b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutDaoImpl.java
@@ -0,0 +1,28 @@
+package com.cloud.rack;
+
+import org.springframework.stereotype.Component;
+
+import com.cloud.utils.db.GenericDaoBase;
+import com.cloud.utils.db.SearchBuilder;
+import com.cloud.utils.db.SearchCriteria;
+
+@Component
+public class RackLayoutDaoImpl extends GenericDaoBase<RackLayoutVO, Long> implements RackLayoutDao {
+
+    private final SearchBuilder<RackLayoutVO> ZoneNameSearch;
+
+    public RackLayoutDaoImpl() {
+        ZoneNameSearch = createSearchBuilder();
+        ZoneNameSearch.and("zoneId", ZoneNameSearch.entity().getZoneId(), SearchCriteria.Op.EQ);
+        ZoneNameSearch.and("name", ZoneNameSearch.entity().getName(), SearchCriteria.Op.EQ);
+        ZoneNameSearch.done();
+    }
+
+    @Override
+    public RackLayoutVO findByZoneAndName(Long zoneId, String name) {
+        SearchCriteria<RackLayoutVO> sc = ZoneNameSearch.create();
+        sc.setParameters("zoneId", zoneId);
+        sc.setParameters("name", name);
+        return findOneBy(sc);
+    }
+}
\ No newline at end of file
diff --git a/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutManagerImpl.java b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutManagerImpl.java
new file mode 100644
index 000000000000..acca31279f1f
--- /dev/null
+++ b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutManagerImpl.java
@@ -0,0 +1,92 @@
+package com.cloud.rack;
+
+import java.util.ArrayList;
+import java.util.List;
+import javax.inject.Inject;
+
+import org.apache.log4j.Logger;
+import org.springframework.stereotype.Component;
+
+import org.apache.cloudstack.api.command.admin.rack.ListRackLayoutsCmd;
+import org.apache.cloudstack.api.command.admin.rack.UpdateRackLayoutCmd;
+import org.apache.cloudstack.api.response.ListResponse;
+import org.apache.cloudstack.api.response.RackLayoutResponse;
+import com.cloud.dc.DataCenterVO;
+import com.cloud.dc.dao.DataCenterDao;
+import com.cloud.utils.component.ManagerBase;
+
+@Component
+public class RackLayoutManagerImpl extends ManagerBase implements RackLayoutService {
+    private static final Logger s_logger = Logger.getLogger(RackLayoutManagerImpl.class);
+
+    @Inject
+    private RackLayoutDao rackLayoutDao;
+
+    @Inject
+    private DataCenterDao dataCenterDao;
+
+    @Override
+    public ListResponse<RackLayoutResponse> listRackLayouts(ListRackLayoutsCmd cmd) {
+        Long zoneId = cmd.getZoneId();
+        String name = cmd.getName();
+
+        RackLayoutVO vo = rackLayoutDao.findByZoneAndName(zoneId, name);
+        List<RackLayoutResponse> responses = new ArrayList<>();
+
+        if (vo != null) {
+            responses.add(createRackLayoutResponse(vo));
+        }
+
+        ListResponse<RackLayoutResponse> listResponse = new ListResponse<>();
+        listResponse.setResponses(responses);
+        return listResponse;
+    }
+
+    @Override
+    public RackLayoutResponse updateRackLayout(UpdateRackLayoutCmd cmd) {
+        Long zoneId = cmd.getZoneId();
+        String name = cmd.getName();
+        String content = cmd.getContent();
+
+        RackLayoutVO vo = rackLayoutDao.findByZoneAndName(zoneId, name);
+
+        if (vo == null) {
+            // (INSERT)
+            vo = new RackLayoutVO(zoneId, name, content);
+            rackLayoutDao.persist(vo);
+            s_logger.debug("Created new rack layout for zone: " + zoneId + ", name: " + name);
+        } else {
+            // (UPDATE)
+            vo.setContent(content);
+            rackLayoutDao.update(vo.getId(), vo);
+            s_logger.debug("Updated existing rack layout for zone: " + zoneId + ", name: " + name);
+        }
+
+        return createRackLayoutResponse(vo);
+    }
+
+    // VO 객체를 API Response 포맷으로 예쁘게 변환해 주는 헬퍼 메서드
+    private RackLayoutResponse createRackLayoutResponse(RackLayoutVO vo) {
+        RackLayoutResponse response = new RackLayoutResponse();
+        response.setId(String.valueOf(vo.getId()));
+        response.setName(vo.getName());
+        response.setContent(vo.getContent());
+
+        // 프론트엔드가 사용할 수 있도록 Zone ID를 UUID 포맷으로 변환하여 반환
+        DataCenterVO zone = dataCenterDao.findById(vo.getZoneId());
+        if (zone != null) {
+            response.setZoneId(zone.getUuid());
+        }
+
+        response.setObjectName("racklayout");
+        return response;
+    }
+
+    @Override
+    public List<Class<?>> getCommands() {
+        List<Class<?>> cmdList = new ArrayList<>();
+        cmdList.add(ListRackLayoutsCmd.class);
+        cmdList.add(UpdateRackLayoutCmd.class);
+        return cmdList;
+    }
+}
\ No newline at end of file
diff --git a/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutService.java b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutService.java
new file mode 100644
index 000000000000..259c4089ffdc
--- /dev/null
+++ b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutService.java
@@ -0,0 +1,13 @@
+package com.cloud.rack;
+
+import org.apache.cloudstack.api.command.admin.rack.ListRackLayoutsCmd;
+import org.apache.cloudstack.api.command.admin.rack.UpdateRackLayoutCmd;
+import org.apache.cloudstack.api.response.ListResponse;
+import org.apache.cloudstack.api.response.RackLayoutResponse;
+
+import com.cloud.utils.component.PluggableService;
+
+public interface RackLayoutService extends PluggableService {
+    ListResponse<RackLayoutResponse> listRackLayouts(ListRackLayoutsCmd cmd);
+    RackLayoutResponse updateRackLayout(UpdateRackLayoutCmd cmd);
+}
\ No newline at end of file
diff --git a/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutVO.java b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutVO.java
new file mode 100644
index 000000000000..9f9cfb288727
--- /dev/null
+++ b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutVO.java
@@ -0,0 +1,55 @@
+package com.cloud.rack;
+
+import java.util.Date;
+import javax.persistence.Column;
+import javax.persistence.Entity;
+import javax.persistence.GeneratedValue;
+import javax.persistence.GenerationType;
+import javax.persistence.Id;
+import javax.persistence.Table;
+import javax.persistence.Temporal;
+import javax.persistence.TemporalType;
+
+import org.apache.cloudstack.api.InternalIdentity;
+
+@Entity
+@Table(name = "rackml_config")
+public class RackLayoutVO implements InternalIdentity {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    @Column(name = "id")
+    private Long id;
+
+    @Column(name = "zone_id")
+    private Long zoneId;
+
+    @Column(name = "name")
+    private String name;
+
+    @Column(name = "content", length = 65535)
+    private String content;
+
+    @Temporal(TemporalType.TIMESTAMP)
+    @Column(name = "updated_at", updatable = false)
+    private Date updatedAt;
+
+    public RackLayoutVO() {
+    }
+
+    public RackLayoutVO(Long zoneId, String name, String content) {
+        this.zoneId = zoneId;
+        this.name = name;
+        this.content = content;
+    }
+
+    @Override
+    public long getId() { return id; }
+    public Long getZoneId() { return zoneId; }
+    public void setZoneId(Long zoneId) { this.zoneId = zoneId; }
+    public String getName() { return name; }
+    public void setName(String name) { this.name = name; }
+    public String getContent() { return content; }
+    public void setContent(String content) { this.content = content; }
+    public Date getUpdatedAt() { return updatedAt; }
+}
\ No newline at end of file
diff --git a/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/command/admin/rack/ListRackLayoutsCmd.java b/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/command/admin/rack/ListRackLayoutsCmd.java
new file mode 100644
index 000000000000..bbcde6a03786
--- /dev/null
+++ b/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/command/admin/rack/ListRackLayoutsCmd.java
@@ -0,0 +1,69 @@
+package org.apache.cloudstack.api.command.admin.rack;
+
+import javax.inject.Inject;
+
+import org.apache.cloudstack.acl.RoleType;
+import org.apache.cloudstack.api.APICommand;
+import org.apache.cloudstack.api.ApiConstants;
+import org.apache.cloudstack.api.BaseListCmd;
+import org.apache.cloudstack.api.Parameter;
+import org.apache.cloudstack.api.ResponseObject.ResponseView;
+import org.apache.cloudstack.api.ServerApiException;
+import org.apache.cloudstack.api.response.ListResponse;
+import org.apache.cloudstack.api.response.RackLayoutResponse;
+import org.apache.cloudstack.api.response.ZoneResponse;
+
+import com.cloud.rack.RackLayoutService;
+
+@APICommand(name = ListRackLayoutsCmd.APINAME,
+        description = "Lists rack layout configurations",
+        responseObject = RackLayoutResponse.class,
+        responseView = ResponseView.Restricted,
+        authorized = {RoleType.Admin, RoleType.ResourceAdmin, RoleType.DomainAdmin, RoleType.User})
+public class ListRackLayoutsCmd extends BaseListCmd {
+    public static final String APINAME = "listRackLayouts";
+
+    @Inject
+    private RackLayoutService rackLayoutService;
+
+    /////////////////////////////////////////////////////
+    //////////////// API parameters /////////////////////
+    /////////////////////////////////////////////////////
+
+    @Parameter(name = ApiConstants.ZONE_ID, type = CommandType.UUID, entityType = ZoneResponse.class, required = true,
+            description = "the ID of the zone")
+    private Long zoneId;
+
+    @Parameter(name = ApiConstants.NAME, type = CommandType.STRING, required = false,
+            description = "name of the layout. If not specified, returns the 'default' layout.")
+    private String name;
+
+    /////////////////////////////////////////////////////
+    /////////////////// Accessors ///////////////////////
+    /////////////////////////////////////////////////////
+
+    public Long getZoneId() {
+        return zoneId;
+    }
+
+    public String getName() {
+        return name == null ? "default" : name;
+    }
+
+    @Override
+    public String getCommandName() {
+        return APINAME.toLowerCase() + "response";
+    }
+
+    /////////////////////////////////////////////////////
+    /////////////// API Implementation///////////////////
+    /////////////////////////////////////////////////////
+
+    @Override
+    public void execute() throws ServerApiException {
+        // BaseListCmd를 상속받았으므로 ListResponse로 반환
+        ListResponse<RackLayoutResponse> response = rackLayoutService.listRackLayouts(this);
+        response.setResponseName(getCommandName());
+        setResponseObject(response);
+    }
+}
\ No newline at end of file
diff --git a/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/command/admin/rack/UpdateRackLayoutCmd.java b/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/command/admin/rack/UpdateRackLayoutCmd.java
new file mode 100644
index 000000000000..ec0281cc68d8
--- /dev/null
+++ b/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/command/admin/rack/UpdateRackLayoutCmd.java
@@ -0,0 +1,84 @@
+package org.apache.cloudstack.api.command.admin.rack;
+
+import javax.inject.Inject;
+
+import org.apache.cloudstack.acl.RoleType;
+import org.apache.cloudstack.api.APICommand;
+import org.apache.cloudstack.api.ApiConstants;
+import org.apache.cloudstack.api.BaseCmd;
+import org.apache.cloudstack.api.Parameter;
+import org.apache.cloudstack.api.ResponseObject.ResponseView;
+import org.apache.cloudstack.api.ServerApiException;
+import org.apache.cloudstack.api.response.RackLayoutResponse;
+import org.apache.cloudstack.api.response.ZoneResponse;
+import com.cloud.user.Account;
+
+// ※ 참고: RackLayoutService는 다음 단계에서 만들 서비스 인터페이스입니다.
+import com.cloud.rack.RackLayoutService;
+
+@APICommand(name = UpdateRackLayoutCmd.APINAME,
+        description = "Updates or creates a rack layout configuration for a specific zone",
+        responseObject = RackLayoutResponse.class,
+        responseView = ResponseView.Restricted,
+        authorized = {RoleType.Admin, RoleType.ResourceAdmin, RoleType.DomainAdmin})
+public class UpdateRackLayoutCmd extends BaseCmd {
+    public static final String APINAME = "updateRackLayout";
+
+    @Inject
+    private RackLayoutService rackLayoutService;
+
+    /////////////////////////////////////////////////////
+    //////////////// API parameters /////////////////////
+    /////////////////////////////////////////////////////
+
+    @Parameter(name = ApiConstants.ZONE_ID, type = CommandType.UUID, entityType = ZoneResponse.class, required = true,
+            description = "the ID of the zone")
+    private Long zoneId;
+
+    @Parameter(name = ApiConstants.NAME, type = CommandType.STRING, required = false,
+            description = "name of the layout. Defaults to 'default' if not specified.")
+    private String name;
+
+    // JSON 길이가 길 수 있으므로 length를 넉넉히 잡아줍니다.
+    @Parameter(name = "content", type = CommandType.STRING, required = true, length = 65535,
+            description = "JSON string representing the rack diagram layout")
+    private String content;
+
+    /////////////////////////////////////////////////////
+    /////////////////// Accessors ///////////////////////
+    /////////////////////////////////////////////////////
+
+    public Long getZoneId() {
+        return zoneId;
+    }
+
+    public String getName() {
+        return name == null ? "default" : name;
+    }
+
+    public String getContent() {
+        return content;
+    }
+
+    @Override
+    public String getCommandName() {
+        return APINAME.toLowerCase() + "response";
+    }
+
+    @Override
+    public long getEntityOwnerId() {
+        return Account.ACCOUNT_ID_SYSTEM;
+    }
+
+    /////////////////////////////////////////////////////
+    /////////////// API Implementation///////////////////
+    /////////////////////////////////////////////////////
+
+    @Override
+    public void execute() throws ServerApiException {
+        // 서비스 레이어 호출하여 로직 수행 후 결과 받기
+        RackLayoutResponse response = rackLayoutService.updateRackLayout(this);
+        response.setResponseName(getCommandName());
+        setResponseObject(response);
+    }
+}
\ No newline at end of file
diff --git a/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/response/RackLayoutResponse.java b/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/response/RackLayoutResponse.java
new file mode 100644
index 000000000000..136f7f06aca0
--- /dev/null
+++ b/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/response/RackLayoutResponse.java
@@ -0,0 +1,59 @@
+package org.apache.cloudstack.api.response;
+
+import org.apache.cloudstack.api.ApiConstants;
+import org.apache.cloudstack.api.BaseResponse;
+import com.cloud.serializer.Param;
+import com.google.gson.annotations.SerializedName;
+
+@SuppressWarnings("unused")
+public class RackLayoutResponse extends BaseResponse {
+
+    @SerializedName(ApiConstants.ID)
+    @Param(description = "the ID of the rack layout")
+    private String id;
+
+    @SerializedName(ApiConstants.ZONE_ID)
+    @Param(description = "the ID of the zone for this rack layout")
+    private String zoneId;
+
+    @SerializedName(ApiConstants.NAME)
+    @Param(description = "the name of the rack layout (e.g., default, room1)")
+    private String name;
+
+    // 프론트엔드에서 파싱할 JSON 문자열을 그대로 담아줍니다.
+    @SerializedName("content")
+    @Param(description = "JSON string containing the actual rack layout configuration")
+    private String content;
+
+    public String getId() {
+        return id;
+    }
+
+    public void setId(String id) {
+        this.id = id;
+    }
+
+    public String getZoneId() {
+        return zoneId;
+    }
+
+    public void setZoneId(String zoneId) {
+        this.zoneId = zoneId;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public String getContent() {
+        return content;
+    }
+
+    public void setContent(String content) {
+        this.content = content;
+    }
+}
\ No newline at end of file
diff --git a/plugins/integrations/rack-management/src/main/resources/META-INF/cloudstack/rack-management/module.properties b/plugins/integrations/rack-management/src/main/resources/META-INF/cloudstack/rack-management/module.properties
new file mode 100644
index 000000000000..6cb4a122d6fa
--- /dev/null
+++ b/plugins/integrations/rack-management/src/main/resources/META-INF/cloudstack/rack-management/module.properties
@@ -0,0 +1,18 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+name=rack-management
+parent=api
diff --git a/plugins/integrations/rack-management/src/main/resources/META-INF/cloudstack/rack-management/spring-rack-management-context.xml b/plugins/integrations/rack-management/src/main/resources/META-INF/cloudstack/rack-management/spring-rack-management-context.xml
new file mode 100644
index 000000000000..768a9858d886
--- /dev/null
+++ b/plugins/integrations/rack-management/src/main/resources/META-INF/cloudstack/rack-management/spring-rack-management-context.xml
@@ -0,0 +1,33 @@
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one
+  or more contributor license agreements. See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership. The ASF licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License. You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing,
+  software distributed under the License is distributed on an
+  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  KIND, either express or implied. See the License for the
+  specific language governing permissions and limitations
+  under the License.
+-->
+<beans xmlns="http://www.springframework.org/schema/beans"
+       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+       xmlns:context="http://www.springframework.org/schema/context"
+       xmlns:aop="http://www.springframework.org/schema/aop"
+       xsi:schemaLocation="http://www.springframework.org/schema/beans
+                      http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
+                      http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
+                      http://www.springframework.org/schema/context
+                      http://www.springframework.org/schema/context/spring-context-3.0.xsd"
+                      >
+
+    <bean id="rackLayoutDaoImpl" class="com.cloud.rack.RackLayoutDaoImpl" />
+    <bean id="rackLayoutManagerImpl" class="com.cloud.rack.RackLayoutManagerImpl" />
+
+</beans>
diff --git a/plugins/pom.xml b/plugins/pom.xml
index ccb611b4b4df..e99d7a452b01 100755
--- a/plugins/pom.xml
+++ b/plugins/pom.xml
@@ -102,6 +102,7 @@
         <module>integrations/desktop-service</module>
         <module>integrations/automation-service</module>
         <module>integrations/disaster-recovery</module>
+        <module>integrations/rack-management</module>
         <module>metrics</module>
 
         <module>network-elements/bigswitch</module>
diff --git a/tools/marvin/setup.py b/tools/marvin/setup.py
index 11a63a96aced..803829736892 100644
--- a/tools/marvin/setup.py
+++ b/tools/marvin/setup.py
@@ -27,7 +27,7 @@
         raise RuntimeError("python setuptools is required to build Marvin")
 
 
-VERSION = "4.21.0.0-SNAPSHOT"
+VERSION = "4.21.0.0"
 
 setup(name="Marvin",
       version=VERSION,
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 8210a2fe16e1..01936eb9e314 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -6394,6 +6394,11 @@
         }
       }
     },
+    "base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
+    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -8303,6 +8308,14 @@
         "timsort": "^0.3.0"
       }
     },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "css-loader": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz",
@@ -12222,6 +12235,15 @@
         }
       }
     },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
     "htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -21702,6 +21724,14 @@
         "require-main-filename": "^2.0.0"
       }
     },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -22625,6 +22655,14 @@
       "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
       "dev": true
     },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
diff --git a/ui/package.json b/ui/package.json
index fd6b763e7d9a..7244c8f791df 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -52,6 +52,7 @@
     "cronstrue": "^2.26.0",
     "dompurify": "^3.3.1",
     "enquire.js": "^2.1.6",
+    "html2canvas": "^1.4.1",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.15",
     "markdown-it": "^14.1.0",
@@ -129,7 +130,7 @@
       "vue/max-attributes-per-line": [
         2,
         {
-          "singleline": 5,
+          "singleline": 7,
           "multiline": {
             "max": 1,
             "allowFirstLine": false
diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 1f984202d55f..e0df09e75899 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -4785,7 +4785,7 @@
 "label.theme.polar.green": "Polar Green",
 "label.theme.geek.blue": "Geek Blue",
 "label.theme.golden.purple": "Golden Purple",
-"label.zone.rack": "Rack"
+"label.zone.rack": "Rack",
 "label.usb.devices": "USB Devices",
 "label.lun.devices": "LUN Devices",
 "label.other.devices": "Other Devices",
diff --git a/ui/public/locales/ko_KR.json b/ui/public/locales/ko_KR.json
index 9c31b04f2bd5..cb9a35036a4f 100644
--- a/ui/public/locales/ko_KR.json
+++ b/ui/public/locales/ko_KR.json
@@ -4775,7 +4775,7 @@
 "label.theme.polar.green": "\ud3f4\ub77c \uadf8\ub9b0",
 "label.theme.geek.blue": "\uae31 \ube14\ub8e8",
 "label.theme.golden.purple": "\uace8\ub4e0 \ud37c\ud50c",
-"label.zone.rack": "\uB799\u0020\uC2DC\uAC01\uD654"
+"label.zone.rack": "\uB799\u0020\uC2DC\uAC01\uD654",
 "label.usb.devices": "USB \ub514\ubc14\uc774\uc2a4",
 "label.lun.devices": "LUN \ub514\ubc14\uc774\uc2a4",
 "label.other.devices": "\uae30\ud0c0 \ub514\ubc14\uc774\uc2a4",
diff --git a/ui/src/components/page/GlobalLayout.vue b/ui/src/components/page/GlobalLayout.vue
index cc9edbbde674..a21fa36d47ac 100644
--- a/ui/src/components/page/GlobalLayout.vue
+++ b/ui/src/components/page/GlobalLayout.vue
@@ -233,14 +233,18 @@ export default {
   },
   mounted () {
     try {
+      /*
       const bootH = Number(localStorage.getItem('autoAlertBanner.lastHeight') || 0)
       if (!Number.isNaN(bootH) && bootH >= 0) {
         this.autoBannerHeight = bootH
         document.documentElement.style.setProperty('--autoBannerHeight', bootH + 'px')
-        // 추가: 첫 프레임부터 --affixTopHeader를 맞춰 메뉴/헤더 정렬
-        this.updateAffixTopVars() // ← 이 한 줄을 debouncedRecalc() 이전에 호출
+        this.updateAffixTopVars()
         this.debouncedRecalc && this.debouncedRecalc()
       }
+      */
+      this.autoBannerHeight = 0
+      document.documentElement.style.setProperty('--autoBannerHeight', '0px')
+      this.updateAffixTopVars()
     } catch (_) {}
     window.addEventListener('auto-alert-banner:height', this.onAutoBannerHeight)
     window.addEventListener('resize', this.onResize)
@@ -397,6 +401,25 @@ export default {
   will-change: height;
 }
 
+banner-spacer::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  /* 배너가 들어올 자리(높이)만큼 완벽하게 덮어줍니다 */
+  height: var(--affixTopHeader, 0px);
+  /* 시스템 배경색으로 칠해서 스크롤되는 본문을 가려줍니다 */
+  background-color: var(--layout-bg, #f0f2f5);
+  z-index: 1490; /* 헤더(1500) 바로 밑, 본문보다는 위에 배치 */
+  pointer-events: none; /* 클릭 방해 금지 */
+}
+
+/* 다크모드가 켜졌을 때 가림막 색상 보정 */
+body.dark-mode .banner-spacer::before {
+  background-color: #141414;
+}
+
 /* 고정 헤더 사용 시 컨텐츠 상단 여백 */
 .layout-content {
   &.is-header-fixed {
diff --git a/ui/src/config/section/infra/zones.js b/ui/src/config/section/infra/zones.js
index 081c04869f06..7e6f08d83286 100644
--- a/ui/src/config/section/infra/zones.js
+++ b/ui/src/config/section/infra/zones.js
@@ -74,7 +74,7 @@ export default {
     component: shallowRef(defineAsyncComponent(() => import('@/views/infra/zone/PhysicalNetworksTab.vue')))
   }, {
     name: 'zone.rack',
-    component: shallowRef(defineAsyncComponent(() => import('@/views/plugins/IFrameRack.vue')))
+    component: shallowRef(defineAsyncComponent(() => import('@/views/infra/zone/RackDiagramTab.vue')))
   }, {
     name: 'ipv4.subnets',
     component: shallowRef(defineAsyncComponent(() => import('@/views/infra/zone/Ipv4GuestSubnetsTab.vue'))),
diff --git a/ui/src/views/infra/zone/RackDiagramTab.vue b/ui/src/views/infra/zone/RackDiagramTab.vue
new file mode 100644
index 000000000000..ca0877316467
--- /dev/null
+++ b/ui/src/views/infra/zone/RackDiagramTab.vue
@@ -0,0 +1,1579 @@
+<template>
+  <div class="p-2">
+    <div class="toolbar-container">
+
+      <div class="toolbar-left">
+        <a-space wrap>
+          <a-button type="primary" @click="saveRackData" :loading="saving" :disabled="!isDirty">
+            <SaveOutlined /> 저장
+          </a-button>
+
+          <a-divider type="vertical" class="toolbar-divider" />
+
+          <a-input-search
+            v-model:value="searchQuery"
+            placeholder="장비명, IP, 메모 검색..."
+            style="width: 200px;"
+            allow-clear
+          />
+
+          <a-button type="dashed" @click="openRackModal('add')">
+            <PlusOutlined /> 새 랙 추가
+          </a-button>
+
+          <a-divider type="vertical" class="toolbar-divider" />
+
+          <a-button @click="exportToJson" title="JSON 파일로 백업">
+            <FileTextOutlined /> 백업
+          </a-button>
+          <a-button @click="triggerImport" title="JSON 파일 불러오기">
+            <UploadOutlined /> 복원
+          </a-button>
+          <a-button @click="exportToImage" title="PNG 이미지 캡처">
+            <CameraOutlined /> 캡처
+          </a-button>
+        </a-space>
+
+        <input type="file" ref="fileInput" accept=".json" style="display: none" @change="handleImport" />
+      </div>
+
+      <div class="toolbar-right" style="display: flex; align-items: center;">
+        <span class="zoom-label" style="margin-right: 8px;">Zoom:</span>
+
+        <a-input-number
+          v-model:value="zoomPercent"
+          :min="40"
+          :max="150"
+          :formatter="value => `${value}%`"
+          :parser="value => value.replace('%', '')"
+          size="small"
+          style="width: 70px; text-align: center; margin-right: 12px; flex-shrink: 0;"
+        />
+
+        <div style="width: 120px; flex-shrink: 0; padding-top: 4px;">
+          <a-slider
+            v-model:value="zoomPercent"
+            :min="40"
+            :max="150"
+            :tip-formatter="null"
+          />
+        </div>
+      </div>
+    </div>
+    <a-spin :spinning="loading || saving">
+      <div class="rack-canvas" style="overflow: auto; min-height: 600px; padding: 20px; background: #eef0f4;">
+        <div class="rack-zoom-wrapper" :style="{ transform: `scale(${zoomLevel})`, transformOrigin: 'top left' }">
+
+          <a-empty v-if="!parsedRacks.length" :description="'등록된 랙이 없습니다. 상단의 [새 랙 추가] 버튼을 눌러주세요.'" style="margin-top: 50px;" />
+
+          <div class="rack-container" v-else>
+            <div class="rack-wrapper" v-for="(rack, rIndex) in parsedRacks" :key="rIndex">
+
+              <div class="rack-header">
+                <div class="rack-header-inner">
+                  <a-tooltip placement="top">
+                    <template #title>
+                      {{ rack.name }} ({{ rack.totalHeight }}U)
+                    </template>
+                    <span class="rack-name-text">
+                      {{ rack.name }} ({{ rack.totalHeight }}U)
+                    </span>
+                  </a-tooltip>
+
+                  <div class="rack-header-actions">
+                    <a-button size="small" type="text" @click="moveRack(rIndex, -1)" :disabled="rIndex === 0" title="왼쪽 이동">
+                      <LeftOutlined />
+                    </a-button>
+                    <a-button size="small" type="text" @click="moveRack(rIndex, 1)" :disabled="rIndex === parsedRacks.length - 1" title="오른쪽 이동">
+                      <RightOutlined />
+                    </a-button>
+                    <a-button size="small" type="text" @click="cloneRack(rIndex)" title="랙 복제">
+                      <CopyOutlined />
+                    </a-button>
+                    <a-button size="small" type="text" @click="openRackModal('edit', rIndex)" title="수정">
+                      <SettingOutlined />
+                    </a-button>
+                    <a-popconfirm title="삭제하시겠습니까?" @confirm="deleteRack(rIndex)">
+                      <a-button size="small" type="text" danger>
+                        <DeleteOutlined />
+                      </a-button>
+                    </a-popconfirm>
+                  </div>
+                </div>
+              </div>
+
+              <div class="rack-body" style="display: flex; margin: 0 auto; width: 310px;">
+
+                <div class="rack-ruler">
+                  <div
+                    v-for="u in rack.totalHeight"
+                    :key="u"
+                    class="ruler-number"
+                  >
+                    {{ rack.totalHeight - u + 1 }}
+                  </div>
+                </div>
+
+                <div class="rack-frame" style="flex: 1; margin: 0;">
+                  <div v-for="(item, iIndex) in rack.items" :key="iIndex" class="rack-item" :style="{ height: (item.height * 32) + 'px' }">
+                  </div>
+                </div>
+
+                <div class="rack-frame">
+                  <div
+                    v-for="(item, iIndex) in rack.items"
+                    :key="iIndex"
+                    class="rack-item"
+                    :style="{ height: (item.height * 32) + 'px' }"
+                  >
+                    <div v-if="item.type === 'gap'" class="gap-content" @click="openDeviceModal(rIndex, iIndex)">
+                      <span>+ {{ item.height }}U 여백 (클릭하여 장비 추가)</span>
+                    </div>
+
+                    <div
+                      v-else
+                      class="device-content"
+                      :style="{ opacity: isMatched(item) ? 1 : 0.2, filter: isMatched(item) ? 'none' : 'grayscale(100%)' }"
+                    >
+
+                      <div class="device-top-line" :style="{ backgroundColor: item.type === 'blank' ? 'transparent' : getIconColor(item.type) }"></div>
+
+                      <div class="device-pattern" :class="'pattern-' + item.type"></div>
+
+                      <svg v-if="item.type === 'ups'" class="ups-watermark" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
+                        <path d="M13 2.05v9.45h4.5l-8.5 10.45v-9.45H4.5L13 2.05z" fill="rgba(255,255,255,0.03)" />
+                      </svg>
+
+                      <div
+                        class="device-icon-overlay"
+                        :style="{ color: getIconColor(item.type) }"
+                        v-html="getDeviceIcon(item.type)"
+                      ></div>
+
+                      <div class="device-name-tag" v-if="item.type !== 'blank'">
+                        <span v-if="item.type !== 'custom'" class="tag-text">{{ item.label }}</span>
+                        <span v-else class="tag-text">{{ item.customType }}</span>
+                        <span class="tag-badge">{{ item.height }}U</span>
+                      </div>
+
+                      <div class="device-actions">
+
+                        <a-tooltip v-if="item.memo" placement="top" color="#108ee9" :mouseEnterDelay="0.1">
+                          <template #title>
+                            <div style="white-space: pre-wrap; font-size: 13px;">{{ item.memo }}</div>
+                          </template>
+                          <a-button size="small" type="text" @click.stop>
+                            <InfoCircleOutlined style="color: #40a9ff !important;" />
+                          </a-button>
+                        </a-tooltip>
+
+                        <a-tooltip title="장비 복제" :mouseEnterDelay="0.1">
+                          <a-button size="small" type="text" @click.stop="cloneItem(rIndex, iIndex)">
+                            <CopyOutlined />
+                          </a-button>
+                        </a-tooltip>
+
+                        <a-tooltip title="다른 랙으로 이동" :mouseEnterDelay="0.1">
+                          <a-button size="small" type="text" @click.stop="openMoveDeviceModal(rIndex, iIndex)">
+                            <ExportOutlined />
+                          </a-button>
+                        </a-tooltip>
+
+                        <a-tooltip title="위쪽 여백 끝으로 이동" :mouseEnterDelay="0.1">
+                          <a-button size="small" type="text" @click.stop="moveItem(rIndex, iIndex, -1, true)" :disabled="iIndex === 0">
+                            <VerticalAlignTopOutlined />
+                          </a-button>
+                        </a-tooltip>
+
+                        <a-tooltip title="한 칸 위로" :mouseEnterDelay="0.1">
+                          <a-button size="small" type="text" @click.stop="moveItem(rIndex, iIndex, -1, false)" :disabled="iIndex === 0">
+                            <UpOutlined />
+                          </a-button>
+                        </a-tooltip>
+
+                        <a-tooltip title="한 칸 아래로" :mouseEnterDelay="0.1">
+                          <a-button size="small" type="text" @click.stop="moveItem(rIndex, iIndex, 1, false)" :disabled="iIndex === rack.items.length - 1">
+                            <DownOutlined />
+                          </a-button>
+                        </a-tooltip>
+
+                        <a-tooltip title="아래쪽 여백 끝으로 이동" :mouseEnterDelay="0.1">
+                          <a-button size="small" type="text" @click.stop="moveItem(rIndex, iIndex, 1, true)" :disabled="iIndex === rack.items.length - 1">
+                            <VerticalAlignBottomOutlined />
+                          </a-button>
+                        </a-tooltip>
+
+                        <a-tooltip title="설정" :mouseEnterDelay="0.1">
+                          <a-button size="small" type="text" @click.stop="openDeviceModal(rIndex, iIndex)">
+                            <SettingOutlined />
+                          </a-button>
+                        </a-tooltip>
+
+                        <a-popconfirm title="삭제하시겠습니까?" @confirm="deleteItem(rIndex, iIndex)" placement="topRight">
+                          <a-tooltip title="삭제" :mouseEnterDelay="0.1">
+                            <a-button size="small" type="text" danger @click.stop>
+                              <DeleteOutlined />
+                            </a-button>
+                          </a-tooltip>
+                        </a-popconfirm>
+
+                      </div>
+
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-spin>
+
+    <a-modal
+      v-model:visible="rackModalVisible"
+      :title="rackModalMode === 'add' ? '새 랙 추가' : '랙 설정 수정'"
+      @ok="submitRackModal"
+      @cancel="closeRackModal"
+      destroyOnClose
+    >
+      <a-form layout="vertical">
+        <a-form-item label="랙 이름 (Name)">
+          <a-input v-model:value="rackForm.name" placeholder="예: Server Rack 1" />
+        </a-form-item>
+        <a-form-item label="총 높이 (U)">
+          <a-input-number v-model:value="rackForm.totalHeight" :min="10" :max="50" style="width: 100%" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+    <a-modal
+      v-model:visible="moveModalVisible"
+      title="장비 이동 (다른 랙으로 보내기)"
+      @ok="submitMoveDevice"
+      destroyOnClose
+    >
+      <div style="margin-bottom: 16px;">
+        <InfoCircleOutlined style="color: #1890ff; margin-right: 8px;" />
+        <span>이동할 대상 랙을 선택하면, <strong>빈 공간(Gap)을 찾아 자동으로 배치</strong>됩니다.</span>
+      </div>
+
+      <a-form layout="vertical">
+        <a-form-item label="대상 랙 선택">
+          <a-select v-model:value="moveTargetRackIndex" placeholder="랙을 선택하세요" style="width: 100%">
+            <a-select-option
+              v-for="(rack, idx) in parsedRacks"
+              :key="idx"
+              :value="idx"
+              :disabled="idx === moveSourceInfo.rIndex"
+            >
+              {{ rack.name }} (잔여 여백 확인 필요)
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+    <a-modal
+      v-model:visible="deviceModalVisible"
+      :title="'장비 설정'"
+      @ok="submitDeviceModal"
+      @cancel="closeDeviceModal"
+      destroyOnClose
+    >
+      <a-form layout="vertical">
+        <a-form-item label="장비 종류">
+          <a-select v-model:value="deviceForm.type" style="width: 100%" @change="handleTypeChange">
+            <a-select-option value="server">서버 (Server)</a-select-option>
+            <a-select-option value="switch">스위치 (Switch)</a-select-option>
+            <a-select-option value="storage">스토리지 (Storage)</a-select-option>
+            <a-select-option value="firewall">방화벽 (Firewall)</a-select-option>
+            <a-select-option value="ups">UPS</a-select-option>
+            <a-select-option value="patch">패치패널 (Patch Panel)</a-select-option>
+            <a-select-option value="pdu">PDU</a-select-option>
+            <a-select-option value="blank">블랭크 패널 (Blank)</a-select-option>
+            <a-select-option value="custom">커스텀 (Custom)</a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item label="장비명 (Label)" v-if="deviceForm.type !== 'blank'">
+          <a-input
+            v-model:value="deviceForm.label"
+            placeholder="장비명을 입력하세요."
+            allow-clear
+          />
+        </a-form-item>
+
+        <a-form-item label="커스텀 타입명" v-if="deviceForm.type === 'custom'">
+          <a-input v-model:value="deviceForm.customType" placeholder="예: Router" />
+        </a-form-item>
+
+        <a-form-item label="높이 (U)">
+        <a-input-number
+          v-model:value="deviceForm.height"
+          :min="1"
+          :max="maxAllowedHeight"
+          :precision="0"
+          style="width: 100%"
+        />
+        <div style="font-size: 12px; color: #888; margin-top: 4px;">
+          <InfoCircleOutlined style="margin-right: 4px;" />
+          현재 이 위치의 최대 허용 높이는 <strong>{{ maxAllowedHeight }}U</strong> 입니다.
+        </div>
+      </a-form-item>
+
+        <a-form-item label="장비 메모 / 상세 설명">
+          <a-textarea
+            v-model:value="deviceForm.memo"
+            :rows="3"
+            placeholder="IP 주소, 용도, 담당자 등을 입력하세요"
+          />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed, watch, onBeforeUnmount, nextTick } from 'vue'
+import { message } from 'ant-design-vue'
+import html2canvas from 'html2canvas'
+import { api } from '@/api'
+import {
+  CopyOutlined,
+  SettingOutlined,
+  DeleteOutlined,
+  InfoCircleOutlined,
+  LeftOutlined,
+  RightOutlined,
+  UpOutlined,
+  DownOutlined,
+  VerticalAlignTopOutlined,
+  VerticalAlignBottomOutlined,
+  PlusOutlined,
+  FileTextOutlined,
+  UploadOutlined,
+  CameraOutlined,
+  SaveOutlined,
+  ExportOutlined
+} from '@ant-design/icons-vue'
+
+// 전역 상태
+const loading = ref(false)
+const saving = ref(false)
+const zoomLevel = ref(1)
+
+// 슬라이더 및 입력창과 연동할 퍼센트 단위 변수
+const zoomPercent = computed({
+  get: () => Math.round(zoomLevel.value * 100),
+  set: (val) => {
+    // 최소 40% ~ 최대 150% 범위 제한
+    if (val < 40) val = 40
+    if (val > 150) val = 150
+    zoomLevel.value = val / 100
+  }
+})
+
+// 데이터 모델
+const parsedRacks = ref([])
+
+// 데이터 변경 여부 추적
+const isDirty = ref(false)
+
+// parsedRacks 객체가 깊은 곳까지 변경되는지 감시
+watch(parsedRacks, () => {
+  isDirty.value = true
+}, { deep: true })
+
+// 페이지 이탈 방지 이벤트 핸들러
+const handleBeforeUnload = (e) => {
+  if (isDirty.value) {
+    e.preventDefault()
+    e.returnValue = '' // 브라우저 표준 경고창을 띄우기 위한 필수 값
+  }
+}
+
+const currentZoneId = ref('')
+const zoneLoading = ref(false)
+
+const fetchZonesAndRackData = () => {
+  zoneLoading.value = true // 필요시 템플릿에 스피너(Loading) 연동 가능
+
+  api('listZones', {}).then(json => {
+    const listZones = json.listzonesresponse.zone
+    if (listZones && listZones.length > 0) {
+      // 'Edge' 타입을 제외한 Zone 목록 필터링
+      const filteredZones = listZones.filter(zone => zone.type !== 'Edge')
+
+      if (filteredZones.length > 0) {
+        // 첫 번째 Zone의 ID를 현재 Zone으로 설정
+        currentZoneId.value = filteredZones[0].id
+
+        // Zone ID를 성공적으로 가져왔으므로 DB에서 랙 구성 조회 시작
+        fetchRackData()
+      } else {
+        message.warning('사용 가능한 Zone이 없습니다.')
+      }
+    }
+  }).catch(error => {
+    console.error('Zone 목록 조회 실패:', error)
+    message.error('Zone 정보를 불러오는데 실패했습니다.')
+  }).finally(() => {
+    zoneLoading.value = false
+  })
+}
+
+// ----------------------------------------------------------------
+// 3. DB에서 랙 구성 불러오기 (GET)
+// ----------------------------------------------------------------
+const fetchRackData = () => {
+  if (!currentZoneId.value) return
+
+  loading.value = true
+
+  api('listRackLayouts', {
+    zoneid: currentZoneId.value,
+    name: 'default'
+  }).then(json => {
+    const layouts = json.listracklayoutsresponse.racklayout
+
+    // DB에 저장된 데이터가 있고, 내용(content)이 존재하는 경우
+    if (layouts && layouts.length > 0 && layouts[0].content) {
+      parsedRacks.value = JSON.parse(layouts[0].content)
+      message.success('랙 구성을 불러왔습니다.')
+    } else {
+      // DB에 데이터가 전혀 없는 경우 (최초 접속) -> 기본 빈 랙 생성
+      parsedRacks.value = [{
+        name: 'Main Rack',
+        totalHeight: 42,
+        items: [{ type: 'gap', height: 42 }]
+      }]
+    }
+    // 데이터를 방금 불러왔으므로 미저장 상태(isDirty) 초기화 (빈 줄 삭제함)
+    nextTick(() => { isDirty.value = false })
+  }).catch(error => {
+    console.error('랙 데이터 불러오기 실패:', error)
+    message.error('랙 구성을 불러오는데 실패했습니다.')
+  }).finally(() => {
+    loading.value = false
+  })
+}
+
+const saveRackData = () => {
+  if (!currentZoneId.value) {
+    message.error('저장할 Zone 정보가 없습니다.')
+    return
+  }
+
+  saving.value = true
+  const jsonContent = JSON.stringify(parsedRacks.value)
+
+  api('updateRackLayout', {
+    zoneid: currentZoneId.value,
+    name: 'default',
+    content: jsonContent
+  }).then(json => {
+    message.success('랙 구성이 DB에 안전하게 저장되었습니다.')
+    isDirty.value = false // 저장 성공 시 변경 상태 뱃지 숨김
+  }).catch(error => {
+    console.error('랙 데이터 저장 실패:', error)
+    message.error('랙 구성 저장에 실패했습니다.')
+  }).finally(() => {
+    saving.value = false
+  })
+}
+
+// ---------------- 랙 모달 로직 ----------------
+const rackModalVisible = ref(false)
+const rackModalMode = ref('add') // 'add' or 'edit'
+const targetRackIndex = ref(-1)
+
+const rackForm = reactive({ name: '', totalHeight: 42 })
+
+const openRackModal = (mode, index = -1) => {
+  rackModalMode.value = mode
+  targetRackIndex.value = index
+  if (mode === 'edit' && index > -1) {
+    rackForm.name = parsedRacks.value[index].name
+    rackForm.totalHeight = parsedRacks.value[index].totalHeight
+  } else {
+    rackForm.name = ''
+    rackForm.totalHeight = 42
+  }
+  rackModalVisible.value = true
+}
+
+const closeRackModal = () => {
+  rackModalVisible.value = false
+}
+
+// 랙 전체를 이미지로 저장하는 함수
+const exportToImage = async () => {
+  const element = document.querySelector('.rack-container')
+  if (!element) {
+    message.warning('저장할 랙 구성이 없습니다.')
+    return
+  }
+
+  try {
+    message.loading({ content: '이미지 변환 중...', key: 'exporting' })
+    // 배율(zoomLevel)에 영향받지 않도록 원본 크기로 캡처
+    const canvas = await html2canvas(element, {
+      backgroundColor: '#eef0f4',
+      scale: 2 // 고화질 저장
+    })
+
+    const link = document.createElement('a')
+    link.download = 'rack-diagram-export.png'
+    link.href = canvas.toDataURL('image/png')
+    link.click()
+
+    message.success({ content: '이미지 저장이 완료되었습니다.', key: 'exporting' })
+  } catch (error) {
+    console.error(error)
+    message.error({ content: '이미지 저장에 실패했습니다.', key: 'exporting' })
+  }
+}
+
+// 파일 Input 요소를 참조하기 위한 ref
+const fileInput = ref(null)
+
+// JSON으로 내보내기 (Export)
+const exportToJson = () => {
+  if (!parsedRacks.value || parsedRacks.value.length === 0) {
+    message.warning('내보낼 랙 데이터가 없습니다.')
+    return
+  }
+
+  // 1. 데이터를 JSON 문자열로 변환 (들여쓰기 2칸으로 보기 좋게)
+  const dataStr = JSON.stringify(parsedRacks.value, null, 2)
+
+  // 2. Blob 객체를 생성하여 파일화
+  const blob = new Blob([dataStr], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+
+  // 3. 가상의 a 태그를 만들어 클릭 이벤트 발생 (다운로드 실행)
+  const link = document.createElement('a')
+  link.href = url
+  // 오늘 날짜를 파일명에 포함
+  const dateStr = new Date().toISOString().slice(0, 10)
+  link.download = `rack-data-${dateStr}.json`
+  link.click()
+
+  // 4. 메모리 정리
+  URL.revokeObjectURL(url)
+  message.success('JSON 파일이 다운로드되었습니다.')
+}
+
+// JSON 불러오기 버튼 클릭 시 숨겨진 input 실행
+const triggerImport = () => {
+  if (fileInput.value) {
+    fileInput.value.click()
+  }
+}
+
+// 선택된 JSON 파일 읽고 화면에 렌더링 (Import)
+const handleImport = (event) => {
+  const file = event.target.files[0]
+  if (!file) return
+
+  const reader = new FileReader()
+  reader.onload = (e) => {
+    try {
+      // 1. 파일 내용 파싱
+      const importedData = JSON.parse(e.target.result)
+
+      // 2. 간단한 유효성 검사 (배열 형태인지 확인)
+      if (Array.isArray(importedData)) {
+        parsedRacks.value = importedData // 화면 갱신
+        message.success('성공적으로 데이터를 불러왔습니다.')
+      } else {
+        message.error('유효하지 않은 파일 형식입니다. (배열이 아님)')
+      }
+    } catch (error) {
+      console.error(error)
+      message.error('JSON 파일 파싱에 실패했습니다. 파일이 손상되었을 수 있습니다.')
+    } finally {
+      // 3. 같은 파일을 다시 선택할 수 있도록 input 초기화
+      event.target.value = ''
+    }
+  }
+
+  // 텍스트 형태로 파일 읽기 시작
+  reader.readAsText(file)
+}
+
+const cloneRack = (rIndex) => {
+  const targetRack = parsedRacks.value[rIndex]
+  const newRack = {
+    ...targetRack,
+    name: `${targetRack.name} (Copy)`,
+    items: targetRack.items.map(item => ({ ...item }))
+  }
+  parsedRacks.value.push(newRack)
+  message.success('랙이 복제되었습니다.')
+}
+
+// 랙 순서 좌우 이동 함수
+const moveRack = (rIndex, direction) => {
+  const targetIndex = rIndex + direction
+  if (targetIndex < 0 || targetIndex >= parsedRacks.value.length) return
+
+  const temp = parsedRacks.value[rIndex]
+  parsedRacks.value[rIndex] = parsedRacks.value[targetIndex]
+  parsedRacks.value[targetIndex] = temp
+}
+
+// 랙 모달 저장 로직
+const submitRackModal = () => {
+  if (!rackForm.name) {
+    message.warning('랙 이름을 입력해주세요.')
+    return
+  }
+
+  if (rackModalMode.value === 'add') {
+    parsedRacks.value.push({
+      name: rackForm.name,
+      totalHeight: rackForm.totalHeight,
+      items: [{ type: 'gap', height: rackForm.totalHeight }]
+    })
+  } else {
+    const targetRack = parsedRacks.value[targetRackIndex.value]
+    const currentItemsHeight = targetRack.items.reduce((sum, item) => sum + item.height, 0)
+    const diff = rackForm.totalHeight - currentItemsHeight
+
+    if (diff > 0) {
+      // 랙 크기가 커졌으면 맨 아래에 그만큼 여백(Gap) 추가
+      targetRack.items.push({ type: 'gap', height: diff })
+      targetRack.name = rackForm.name
+      targetRack.totalHeight = rackForm.totalHeight
+    } else if (diff < 0) {
+      // 랙 크기가 줄어들었을 때의 스마트 처리 로직
+      let absDiff = Math.abs(diff)
+      const tempItems = [...targetRack.items]
+
+      // 1. 랙 안에 있는 '실제 장비(gap 제외)'들의 총 높이만 먼저 계산
+      const equipmentHeight = tempItems
+        .filter(item => item.type !== 'gap')
+        .reduce((sum, item) => sum + item.height, 0)
+
+      // 2. 실제 장비들의 총합보다 랙을 더 작게 만들 수는 없으므로 사전 차단
+      if (rackForm.totalHeight < equipmentHeight) {
+        message.error(`실제 장비가 차지하는 공간(${equipmentHeight}U) 이하로 랙 크기를 줄일 수 없습니다.`)
+        return
+      }
+
+      // 3. 맨 아래부터 순회하며 빈 공간(gap)만 골라서 깎아냄
+      for (let i = tempItems.length - 1; i >= 0; i--) {
+        if (tempItems[i].type === 'gap') {
+          if (tempItems[i].height > absDiff) {
+            tempItems[i].height -= absDiff
+            absDiff = 0
+            break // 필요한 만큼 다 깎았으면 종료
+          } else {
+            absDiff -= tempItems[i].height
+            tempItems.splice(i, 1) // 여백 크기가 작으면 완전 삭제하고 계속 진행
+          }
+        }
+        // 장비(server, switch 등)를 만나면 아무 짓도 안 하고 그냥 건너뜀!
+
+        // 목표치를 다 줄였으면 반복문 탈출
+        if (absDiff === 0) break
+      }
+
+      targetRack.items = tempItems
+      targetRack.name = rackForm.name
+      targetRack.totalHeight = rackForm.totalHeight
+    } else {
+      // 높이는 그대로고 이름만 변경된 경우
+      targetRack.name = rackForm.name
+    }
+  }
+  closeRackModal()
+}
+
+const deleteRack = (index) => {
+  parsedRacks.value.splice(index, 1)
+}
+
+// ---------------- 장비 모달/관리 로직 ----------------
+const deviceModalVisible = ref(false)
+const targetItemIndex = ref(-1)
+
+const deviceForm = reactive({
+  type: 'server',
+  label: '',
+  height: 1,
+  customType: '',
+  memo: ''
+})
+
+// 입력 가능한 최대 높이 사전 계산 (물리적 한계)
+const maxAllowedHeight = computed(() => {
+  if (targetRackIndex.value === -1 || targetItemIndex.value === -1) return 42
+  const rack = parsedRacks.value[targetRackIndex.value]
+  const item = rack.items[targetItemIndex.value]
+
+  let physicalMax = item.height // 기본적으로 내 크기 보장
+
+  if (item.type === 'gap') {
+    physicalMax = item.height // 빈 공간이면 그 크기가 한계
+  } else {
+    // 기존 장비 수정 시: 바로 아래가 여백이면 그 공간까지 끌어다 쓸 수 있음
+    if (targetItemIndex.value < rack.items.length - 1) {
+      const nextItem = rack.items[targetItemIndex.value + 1]
+      if (nextItem.type === 'gap') physicalMax += nextItem.height
+    }
+  }
+  return physicalMax
+})
+
+// 각 장비별 기본 라벨명 매핑
+const defaultLabels = {
+  server: 'Server',
+  switch: 'Switch',
+  storage: 'Storage',
+  firewall: 'Firewall',
+  patch: 'Patch Panel',
+  pdu: 'PDU',
+  ups: 'UPS',
+  blank: 'Blank Panel',
+  custom: 'Custom Device'
+}
+
+// 모달 열기 로직 수정
+const openDeviceModal = (rIndex, iIndex) => {
+  targetRackIndex.value = rIndex
+  targetItemIndex.value = iIndex
+  const item = parsedRacks.value[rIndex].items[iIndex]
+
+  if (item.type === 'gap') {
+    deviceForm.type = 'server'
+    deviceForm.label = ''
+    deviceForm.height = 1
+    deviceForm.customType = ''
+    deviceForm.memo = ''
+  } else {
+    // 수정 모드일 때는 기존 데이터 로드
+    deviceForm.type = item.type
+    deviceForm.label = item.label || ''
+    deviceForm.height = item.height
+    deviceForm.customType = item.customType || ''
+    deviceForm.memo = item.memo || ''
+  }
+  deviceModalVisible.value = true
+}
+
+// 장비 종류 Select Box 변경 시 라벨 자동 업데이트
+const handleTypeChange = (newType) => {
+  // 사용자가 직접 입력한 라벨이 없거나, 기존 기본 라벨명과 똑같을 때만 새 기본명으로 교체
+  const isLabelEmpty = !deviceForm.label
+  const isLabelDefault = Object.values(defaultLabels).includes(deviceForm.label)
+
+  if (isLabelEmpty || isLabelDefault) {
+    deviceForm.label = defaultLabels[newType] || ''
+  }
+}
+
+const closeDeviceModal = () => {
+  deviceModalVisible.value = false
+}
+
+const submitDeviceModal = () => {
+  const rIndex = targetRackIndex.value
+  const iIndex = targetItemIndex.value
+  const rack = parsedRacks.value[rIndex]
+  const oldItem = rack.items[iIndex]
+
+  const finalLabel = deviceForm.label || defaultLabels[deviceForm.type] || 'New Device'
+  const finalCustomType = deviceForm.customType || (deviceForm.type === 'custom' ? 'Custom Unit' : '')
+
+  const newItem = {
+    type: deviceForm.type,
+    label: finalLabel,
+    height: deviceForm.height,
+    customType: finalCustomType,
+    memo: deviceForm.memo
+  }
+
+  // 여백(Gap)에 새 장비 추가 시
+  if (oldItem.type === 'gap') {
+    if (oldItem.height < newItem.height) {
+      message.error('선택한 여백보다 큰 장비는 추가할 수 없습니다.')
+      return
+    }
+    const remainingHeight = oldItem.height - newItem.height
+    rack.items.splice(iIndex, 1, newItem)
+    if (remainingHeight > 0) {
+      rack.items.splice(iIndex + 1, 0, { type: 'gap', height: remainingHeight })
+    }
+  } else {
+    // 기존 장비 수정 시 (버그 픽스된 부분)
+    const heightDiff = newItem.height - oldItem.height // 높이 변화량
+
+    if (heightDiff === 0) {
+      // 높이 변화가 없으면 그냥 교체
+      rack.items.splice(iIndex, 1, newItem)
+    } else if (heightDiff > 0) {
+      // 장비 크기를 늘렸을 때: 아래쪽 여백(Gap)을 그만큼 깎아냄
+      const nextItem = rack.items[iIndex + 1]
+      if (nextItem && nextItem.type === 'gap' && nextItem.height >= heightDiff) {
+        rack.items.splice(iIndex, 1, newItem)
+        nextItem.height -= heightDiff
+        if (nextItem.height === 0) rack.items.splice(iIndex + 1, 1) // 여백이 0이 되면 삭제
+      } else {
+        message.error('아래쪽 여백이 부족하여 크기를 늘릴 수 없습니다.')
+        return
+      }
+    } else {
+      // 장비 크기를 줄였을 때: 아래쪽에 남는 만큼 여백(Gap) 추가
+      const absDiff = Math.abs(heightDiff)
+      rack.items.splice(iIndex, 1, newItem)
+      const nextItem = rack.items[iIndex + 1]
+
+      if (nextItem && nextItem.type === 'gap') {
+        nextItem.height += absDiff // 이미 여백이 있으면 합치기
+      } else {
+        rack.items.splice(iIndex + 1, 0, { type: 'gap', height: absDiff }) // 없으면 새로 여백 생성
+      }
+    }
+  }
+  closeDeviceModal()
+}
+
+const cloneItem = (rIndex, iIndex) => {
+  const rack = parsedRacks.value[rIndex]
+  const itemToClone = rack.items[iIndex]
+  const neededHeight = itemToClone.height
+
+  // 1. 아래쪽 여백 확인
+  let availableGapBelow = 0
+  let gapsToRemoveBelowCount = 0
+
+  for (let i = iIndex + 1; i < rack.items.length; i++) {
+    if (rack.items[i].type === 'gap') {
+      availableGapBelow += rack.items[i].height
+      gapsToRemoveBelowCount++
+      if (availableGapBelow >= neededHeight) break
+    } else {
+      break
+    }
+  }
+
+  // 아래쪽으로 복제 가능한 경우
+  if (availableGapBelow >= neededHeight) {
+    const remainingGap = availableGapBelow - neededHeight
+    const newItem = { ...itemToClone }
+
+    // 기존 아래쪽 여백 제거
+    rack.items.splice(iIndex + 1, gapsToRemoveBelowCount)
+    // 복제된 장비 삽입
+    rack.items.splice(iIndex + 1, 0, newItem)
+    // 남은 여백이 있다면 삽입
+    if (remainingGap > 0) {
+      rack.items.splice(iIndex + 2, 0, { type: 'gap', height: remainingGap })
+    }
+    return
+  }
+
+  // 2. 아래쪽이 부족하면 위쪽 여백 확인
+  let availableGapAbove = 0
+  let gapsToRemoveAboveCount = 0
+
+  for (let i = iIndex - 1; i >= 0; i--) {
+    if (rack.items[i].type === 'gap') {
+      availableGapAbove += rack.items[i].height
+      gapsToRemoveAboveCount++
+      if (availableGapAbove >= neededHeight) break
+    } else {
+      break
+    }
+  }
+
+  // 위쪽으로 복제 가능한 경우
+  if (availableGapAbove >= neededHeight) {
+    const remainingGap = availableGapAbove - neededHeight
+    const newItem = { ...itemToClone }
+
+    // 위쪽 여백이 시작되는 인덱스 계산
+    const startGapIndex = iIndex - gapsToRemoveAboveCount
+
+    // 기존 위쪽 여백 제거
+    rack.items.splice(startGapIndex, gapsToRemoveAboveCount)
+
+    // 삽입할 아이템 배열 준비 (남은 여백 먼저, 그다음 복제된 장비)
+    const insertItems = []
+    if (remainingGap > 0) {
+      insertItems.push({ type: 'gap', height: remainingGap })
+    }
+    insertItems.push(newItem)
+
+    // 해당 위치에 일괄 삽입
+    rack.items.splice(startGapIndex, 0, ...insertItems)
+    return
+  }
+
+  // 3. 위/아래 모두 연속된 빈 공간이 부족한 경우
+  message.error(`위/아래 모두 여백이 부족합니다. (필요 공간: ${neededHeight}U)`)
+}
+
+const moveItem = (rIndex, iIndex, direction, isJump = false) => {
+  const rack = parsedRacks.value[rIndex]
+  const items = rack.items
+
+  // 🔼 위로 이동 (direction: -1)
+  if (direction === -1 && iIndex > 0) {
+    const itemAbove = items[iIndex - 1]
+
+    if (itemAbove.type === 'gap') {
+      const moveU = isJump ? itemAbove.height : 1
+
+      itemAbove.height -= moveU
+
+      if (iIndex + 1 < items.length && items[iIndex + 1].type === 'gap') {
+        items[iIndex + 1].height += moveU
+      } else {
+        items.splice(iIndex + 1, 0, { type: 'gap', height: moveU })
+      }
+
+      if (itemAbove.height <= 0) {
+        items.splice(iIndex - 1, 1)
+      }
+    } else {
+      const temp = items[iIndex]
+      items[iIndex] = items[iIndex - 1]
+      items[iIndex - 1] = temp
+    }
+  } else if (direction === 1 && iIndex < items.length - 1) {
+    // 🔽 아래로 이동 (direction: 1) - 주석을 괄호 안으로 넣어서 에러 원천 차단!
+    const itemBelow = items[iIndex + 1]
+
+    if (itemBelow.type === 'gap') {
+      const moveU = isJump ? itemBelow.height : 1
+
+      itemBelow.height -= moveU
+
+      let gapInserted = false
+      if (iIndex > 0 && items[iIndex - 1].type === 'gap') {
+        items[iIndex - 1].height += moveU
+      } else {
+        items.splice(iIndex, 0, { type: 'gap', height: moveU })
+        gapInserted = true
+      }
+
+      const bottomGapIndex = gapInserted ? iIndex + 2 : iIndex + 1
+      if (items[bottomGapIndex].height <= 0) {
+        items.splice(bottomGapIndex, 1)
+      }
+    } else {
+      const temp = items[iIndex]
+      items[iIndex] = items[iIndex + 1]
+      items[iIndex + 1] = temp
+    }
+  }
+}
+
+const deleteItem = (rIndex, iIndex) => {
+  const rack = parsedRacks.value[rIndex]
+  const itemHeight = rack.items[iIndex].height
+
+  // 삭제하는 장비를 Gap으로 변경
+  rack.items.splice(iIndex, 1, { type: 'gap', height: itemHeight })
+
+  // 연속된 Gap 병합 (위아래 빈 공간 합치기)
+  for (let i = rack.items.length - 1; i > 0; i--) {
+    if (rack.items[i].type === 'gap' && rack.items[i - 1].type === 'gap') {
+      rack.items[i - 1].height += rack.items[i].height
+      rack.items.splice(i, 1)
+    }
+  }
+}
+
+// ---------------- 장비 이동(이사) 로직 ----------------
+const moveModalVisible = ref(false)
+const moveTargetRackIndex = ref(null) // 사용자가 선택할 도착지 랙
+const moveSourceInfo = reactive({ rIndex: -1, iIndex: -1 }) // 이사 갈 장비의 원래 위치
+
+// 이사 모달 열기
+const openMoveDeviceModal = (rIndex, iIndex) => {
+  // 랙이 하나밖에 없으면 이사 불가
+  if (parsedRacks.value.length <= 1) {
+    message.warning('이동할 다른 랙이 없습니다. [새 랙 추가]를 먼저 해주세요.')
+    return
+  }
+
+  moveSourceInfo.rIndex = rIndex
+  moveSourceInfo.iIndex = iIndex
+  moveTargetRackIndex.value = null // 초기화
+  moveModalVisible.value = true
+}
+
+// 이사 실행 (확인 버튼 클릭 시)
+const submitMoveDevice = () => {
+  if (moveTargetRackIndex.value === null) {
+    message.warning('이동할 대상 랙을 선택해주세요.')
+    return
+  }
+
+  const sourceRIndex = moveSourceInfo.rIndex
+  const sourceIIndex = moveSourceInfo.iIndex
+  const targetRIndex = moveTargetRackIndex.value
+
+  const sourceRack = parsedRacks.value[sourceRIndex]
+  const targetRack = parsedRacks.value[targetRIndex]
+  const deviceToMove = { ...sourceRack.items[sourceIIndex] } // 장비 복사
+
+  // 1. 대상 랙에 들어갈 공간(Gap)이 있는지 탐색
+  // (장비 높이보다 크거나 같은 첫 번째 여백을 찾음)
+  const targetGapIndex = targetRack.items.findIndex(
+    item => item.type === 'gap' && item.height >= deviceToMove.height
+  )
+
+  if (targetGapIndex === -1) {
+    message.error(`'${targetRack.name}'에 ${deviceToMove.height}U 공간이 부족하여 이동할 수 없습니다.`)
+    return
+  }
+
+  // 2. [대상 랙] 처리: 찾은 여백을 쪼개서 장비 넣기
+  const targetGap = targetRack.items[targetGapIndex]
+  const remainingHeight = targetGap.height - deviceToMove.height
+
+  // 여백 위치에 장비 덮어쓰기
+  targetRack.items.splice(targetGapIndex, 1, deviceToMove)
+
+  // 남은 공간이 있다면 그 아래에 다시 여백 추가
+  if (remainingHeight > 0) {
+    targetRack.items.splice(targetGapIndex + 1, 0, { type: 'gap', height: remainingHeight })
+  }
+
+  // 3. [출발 랙] 처리: 장비가 떠난 자리를 여백으로 메꾸고 병합
+  // 기존 장비 삭제 및 Gap으로 변환
+  sourceRack.items.splice(sourceIIndex, 1, { type: 'gap', height: deviceToMove.height })
+
+  // 연속된 Gap 병합 (위아래 싹 훑어서 합침)
+  // (Tip: 역순으로 돌면서 합쳐야 인덱스가 꼬이지 않음)
+  for (let i = sourceRack.items.length - 1; i > 0; i--) {
+    const current = sourceRack.items[i]
+    const above = sourceRack.items[i - 1]
+
+    if (current.type === 'gap' && above.type === 'gap') {
+      above.height += current.height
+      sourceRack.items.splice(i, 1) // 현재 Gap 제거 (위쪽 Gap에 흡수됨)
+    }
+  }
+
+  message.success(`'${deviceToMove.label}' 장비가 '${targetRack.name}'(으)로 이동되었습니다.`)
+  moveModalVisible.value = false
+}
+
+// 종류별 아이콘 정의
+const getDeviceIcon = (type) => {
+  const icons = {
+    // 내부가 더 꽉 차 보이는 Solid/Bold 스타일 SVG
+    server: `<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M20 10H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2zm-10-5h2v2h-2V5zm6 0h2v2h-2V5zM20 22H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2zm-10-5h2v2h-2v-2zm6 0h2v2h-2v-2z"/></svg>`,
+    switch: `<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><rect x="2" y="5" width="20" height="14" rx="2"/><circle cx="6" cy="12" r="1.5" fill="black"/><circle cx="12" cy="12" r="1.5" fill="black"/><circle cx="18" cy="12" r="1.5" fill="black"/></svg>`,
+    storage: `<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 2C6.48 2 2 3.8 2 6v12c0 2.2 4.48 4 10 4s10-1.8 10-4V6c0-2.2-4.48-4-10-4zm0 18c-4.41 0-8-1.34-8-3s3.59-3 8-3 8 1.34 8 3-3.59 3-8 3zm0-10c-4.41 0-8-1.34-8-3s3.59-3 8-3 8 1.34 8 3-3.59 3-8 3z"/></svg>`,
+    firewall: `<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/></svg>`,
+    ups: `<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M13 2.05v9.45h4.5l-8.5 10.45v-9.45H4.5L13 2.05z"/></svg>`,
+    patch: `<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M22 7H2v10h20V7zm-14 6H4v-2h4v2zm6 0h-4v-2h4v2zm6 0h-4v-2h4v2z"/></svg>`,
+    pdu: `<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><rect x="7" y="2" width="10" height="20" rx="2"/><circle cx="12" cy="6" r="1.5" fill="black"/><circle cx="12" cy="12" r="1.5" fill="black"/><circle cx="12" cy="18" r="1.5" fill="black"/></svg>`,
+    custom: `<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 2L1 21h22L12 2zm0 4.19L19.53 19H4.47L12 6.19z"/></svg>`
+  }
+  return icons[type] || icons.custom
+}
+
+// 각 장비의 상단 라인 컬러와 맞춘 아이콘 컬러 정의
+const getIconColor = (type) => {
+  const colors = {
+    server: '#4a90e2',
+    switch: '#27ae60',
+    storage: '#8e44ad',
+    firewall: '#c0392b',
+    ups: '#00b894', // 민트색
+    patch: '#f39c12', // 주황색
+    pdu: '#d35400', // 진한 주황색
+    custom: '#95a5a6' // 회색
+  }
+  return colors[type] || '#ffffff'
+}
+
+// 검색어 상태
+const searchQuery = ref('')
+
+// 검색 일치 여부 확인 함수
+const isMatched = (item) => {
+  if (!searchQuery.value) return true // 검색어가 없으면 모두 정상 표시
+  if (item.type === 'gap') return true // 여백은 검색 대상에서 제외
+
+  const query = searchQuery.value.toLowerCase()
+  const labelMatch = item.label && item.label.toLowerCase().includes(query)
+  const memoMatch = item.memo && item.memo.toLowerCase().includes(query)
+
+  return labelMatch || memoMatch
+}
+
+onMounted(() => {
+  // 1. Zone 목록을 먼저 가져오고, 성공하면 내부에서 fetchRackData()를 자동으로 실행합니다.
+  fetchZonesAndRackData()
+
+  // 2. 창 닫기/새로고침 방지 이벤트 리스너 등록
+  window.addEventListener('beforeunload', handleBeforeUnload)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('beforeunload', handleBeforeUnload)
+})
+
+</script>
+
+<style scoped>
+/* 툴바 전체 컨테이너 (좌우 양끝 정렬) */
+.toolbar-container {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+
+  /* 좁아지면 자연스럽게 줄바꿈되도록 허용 */
+  flex-wrap: wrap !important;
+  gap: 12px; /* 줄바꿈 되었을 때 위아래 여백 확보 */
+
+  background: #ffffff;
+  padding: 12px 16px;
+  border-radius: 8px;
+  border: 1px solid #e8e8e8;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+  margin-bottom: 16px;
+}
+
+.toolbar-left, .toolbar-right {
+  display: flex;
+  align-items: center;
+}
+
+/* 버튼 사이 구분선 스타일 */
+.toolbar-divider {
+  background-color: #d9d9d9;
+  height: 20px;
+  margin: 0 4px;
+}
+
+/* 화면 배율 텍스트 */
+.zoom-label {
+  font-weight: bold;
+  color: #595959;
+  margin-right: 8px;
+  font-size: 13px;
+}
+
+/* 랙 캔버스 배경 */
+.rack-canvas {
+  scrollbar-width: thin;
+  scrollbar-color: #888 #eef0f4;
+  background: radial-gradient(circle, #f0f2f5 0%, #e6e9ed 100%);
+}
+
+/* 랙 컨테이너 (가로 정렬) */
+.rack-container {
+  display: flex;
+  gap: 30px;
+  align-items: flex-start;
+  overflow-x: auto;
+  padding-bottom: 20px; /* 가로 스크롤바와 랙 사이 여백 */
+}
+
+/* 개별 랙 래퍼 */
+.rack-wrapper {
+  background: #36393f;
+  border-radius: 6px;
+  padding: 15px;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
+  flex-shrink: 0;
+  width: 345px; /* 기존 UI 규격에 맞춰 넓이 조정 */
+  flex: 0 0 345px
+}
+
+/* 랙 헤더 */
+.rack-header {
+  color: #fff;
+  font-weight: bold;
+  margin-bottom: 10px;
+  padding-bottom: 5px;
+  border-bottom: 2px solid #1890ff;
+}
+
+.rack-header-inner {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap; /* 절대 줄바꿈 금지 */
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 24px; /* 높이 고정으로 안정감 부여 */
+}
+
+/* 랙 본체 가로 정렬용 */
+.rack-body {
+  display: flex;
+  background: #1a1b1e; /* 전체 프레임 배경과 맞춤 */
+  border-radius: 8px;
+  border: 4px solid #2b2d31;
+  overflow: hidden;
+}
+
+/* 기존 rack-frame의 중복 테두리와 여백 제거 (rack-body로 옮겼으므로) */
+.rack-frame {
+  border: none !important;
+  border-radius: 0 !important;
+  margin: 0 !important;
+  background: transparent !important;
+}
+
+/* 눈금자 기둥 영역 */
+.rack-ruler {
+  width: 24px; /* 눈금자 너비 */
+  background: #232428; /* 프레임보다 아주 살짝 어두운 색 */
+  border-right: 2px solid #111; /* 장비 영역과의 경계선 */
+  display: flex;
+  flex-direction: column;
+}
+
+/*  개별 눈금 텍스트 (정확히 1U = 32px에 맞춤) */
+.ruler-number {
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #555c65;
+  font-size: 11px;
+  font-family: 'Courier New', monospace;
+  font-weight: bold;
+  box-sizing: border-box;
+  /* 눈금선 느낌을 위해 위아래에 아주 연한 점선 추가 */
+  border-bottom: 1px dotted rgba(255, 255, 255, 0.05);
+}
+
+/* 맨 위 눈금 상단 선 보정 */
+.ruler-number:first-child {
+  border-top: 1px dotted rgba(255, 255, 255, 0.05);
+}
+
+/* 랙 내부 프레임 */
+.rack-frame {
+  width: 280px;
+  background: #2c2f35;
+  border: 4px solid #3f434b;
+  /* 프레임 자체 모서리를 둥글게 */
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  /* 내부 장비들이 둥근 모서리를 벗어나지 않도록 잘라냄 */
+  overflow: hidden;
+  padding: 2px 0;
+}
+
+/* 개별 아이템 (장비 또는 여백) */
+.rack-item {
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  /* 장비 사이 틈을 조금 더 부드럽게 처리 */
+  border-bottom: 2px solid #0a0a0a;
+  /* 개별 장비 모서리도 약간 둥글게 */
+  border-radius: 4px;
+  overflow: hidden; /* 자식 요소의 각진 부분 잘라내기 */
+  margin-bottom: -1px; /* 테두리 겹침 보정 */
+}
+
+/* 랙 이름 텍스트: 길어지면 말줄임표 처리 */
+.rack-name-text {
+  flex: 1;
+  min-width: 0; /* flex 환경에서 ellipsis 작동 필수 조건 */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px; /* 가독성과 공간 확보를 위한 최적 크기 */
+  font-weight: bold;
+  margin-right: 10px;
+  /* 마우스 오버 시 클릭 가능한 느낌 전달 */
+  //cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+/* 마우스 호버 시 텍스트 색상을 밝게 변경 */
+.rack-name-text:hover {
+  color: #5865f2 !important; /* 포인트 컬러로 강조 */
+  text-decoration: none; /* 밑줄 추가로 가독성 확보 */
+}
+
+.rack-item:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+/* 1. 버튼들을 감싸는 컨테이너를 무조건 가로(Row)로 배치 */
+.rack-header-actions {
+  display: flex !important;
+  flex-direction: row !important; /* 세로로 쌓이는 것 방지 */
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* 2. 개별 버튼 스타일 (inline-flex를 써야 가로 배열이 유지됨) */
+.rack-header-actions .ant-btn {
+  color: #ffffff !important;
+  padding: 0 4px !important;
+  display: inline-flex !important; /* flex 대신 inline-flex 적용 */
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+/* 3. 내부 Ant Design 아이콘 색상 강제 (검은색 변함 방지) */
+.rack-header-actions .ant-btn :deep(.anticon) {
+  color: #ffffff !important;
+}
+
+/* 4. 버튼 비활성화 상태 색상 처리 */
+.rack-header-actions .ant-btn:disabled,
+.rack-header-actions .ant-btn:disabled :deep(.anticon) {
+  color: rgba(255, 255, 255, 0.3) !important;
+}
+
+/* 여백 스타일 */
+.gap-content {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* 배경을 더 밝은 회색 계열로 변경 */
+  background: repeating-linear-gradient(
+    45deg,
+    #3a3d42,
+    #3a3d42 10px,
+    #42464d 10px,
+    #42464d 20px
+  );
+  /* 텍스트 색상을 더 밝게 하여 가독성 확보 */
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  /* 장비와 확실히 구분되도록 안쪽 그림자 제거 혹은 변경 */
+  box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
+}
+
+/* 여백 호버 시 피드백 강화 */
+.gap-content:hover {
+  background: #4f545c;
+  color: #5865f2;
+}
+
+/* 장비 내용 래퍼 */
+.device-content {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  cursor: pointer;
+  background-color: #232529 !important;
+  /* 양옆에 랙 마운트용 브라켓(금속 날개) 디자인 추가 */
+  border-left: 8px solid #4f545c;
+  border-right: 8px solid #4f545c;
+}
+
+/* 1. 상단 컬러 라인 (기존 SVG 상단 라인 대체) */
+.device-top-line {
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 3px;
+  z-index: 2;
+}
+
+/* 2. 질감 패턴 기본 틀 */
+.device-pattern {
+  position: absolute;
+  /* 이름표(text)와 겹치지 않게 오른쪽 구석으로 밀어둠 */
+  top: 8px; bottom: 8px; right: 16px; left: 60px;
+  z-index: 1;
+  opacity: 0.6;
+}
+
+/* 💻 서버: 촘촘한 세로 디스크 베이 */
+.pattern-server {
+  background-image: repeating-linear-gradient(to right, #111 0, #111 6px, transparent 6px, transparent 10px);
+}
+
+/* 🗄️ 스토리지: 넓은 세로 디스크 베이 */
+.pattern-storage {
+  background-image: repeating-linear-gradient(to right, #111 0, #111 16px, transparent 16px, transparent 20px);
+}
+
+/* 🎛️ 스위치: 상하 여백을 줘서 포트 구멍처럼 보이게 */
+.pattern-switch {
+  top: 35%; bottom: 35%;
+  background-image: repeating-linear-gradient(to right, #000 0, #000 10px, transparent 10px, transparent 14px);
+}
+
+/* 🧱 방화벽: 빗살무늬 해치 패턴 */
+.pattern-firewall {
+  background-image: repeating-linear-gradient(45deg, #111 0, #111 6px, transparent 6px, transparent 12px);
+}
+
+/* 🔌 패치패널: 얇은 점선 느낌 */
+.pattern-patch {
+  top: 45%; bottom: 45%;
+  background-image: repeating-linear-gradient(to right, #000 0, #000 4px, transparent 4px, transparent 8px);
+}
+
+/* ⚡ UPS: 우측 끝 환풍구 (가운데는 워터마크가 들어감) */
+.pattern-ups {
+  left: auto; width: 60px; right: 20px;
+  background-image: repeating-linear-gradient(to right, #111 0, #111 6px, transparent 6px, transparent 12px);
+}
+
+/* 🔋 PDU: 콘센트 구멍 느낌 */
+.pattern-pdu {
+  background-image: radial-gradient(circle, #000 3px, transparent 4px);
+  background-size: 16px 16px;
+  background-position: left center;
+}
+
+/* 🔲 블랭크 패널: 전체를 덮는 연한 사선 (투명도 1) */
+.pattern-blank {
+  top: 0; bottom: 0; left: 0; right: 0;
+  background-image: repeating-linear-gradient(-45deg, #1c1e22 0, #1c1e22 6px, #232529 6px, #232529 12px);
+  opacity: 1;
+}
+
+/* 3. UPS 전용 정비율 거대 워터마크 */
+.ups-watermark {
+  position: absolute;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  height: 80%; /* U 높이가 커져도 최대 80%까지만 예쁘게 커짐 */
+  max-height: 200px;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.device-icon-overlay {
+  position: absolute;
+  left: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 22px;
+  height: 22px;
+  /* 0.85 투명도로 존재감을 주고, 그림자로 텍스트와의 간섭 최소화 */
+  opacity: 0.85;
+  filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 4;
+}
+
+/* SVG 내부 아이콘이 영역을 꽉 채우도록 설정 */
+.device-icon-overlay :deep(svg) {
+  width: 100%;
+  height: 100%;
+}
+
+/* 장비명 태그 */
+.device-name-tag {
+  position: absolute;
+  top: 50%;
+  left: 60%;
+  transform: translate(-50%, -50%);
+  color: #ffffff;
+  font-size: 15px;
+  font-weight: bold;
+  /* 배경과 겹쳐도 글씨가 뚜렷하게 보이도록 진한 텍스트 그림자 추가 */
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 1);
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  z-index: 5;
+  letter-spacing: -0.2px;
+}
+
+.tag-badge {
+  background: rgba(0,0,0,0.5);
+  padding: 2px 6px;
+  border-radius: 10px;
+  margin-left: 8px;
+  font-size: 10px;
+}
+
+/* 액션 버튼 (호버 시에만 표시) */
+.device-actions {
+  /* 버튼을 장비 둥둥 띄우는 핵심 코드 (이게 빠져서 안 보였던 겁니다!) */
+  position: absolute !important;
+  top: 50%;
+  bottom: 2px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 5; /* 장비나 텍스트 위로 확실히 올림 */
+
+  /* 디자인 요소 (아까 적용한 예쁜 간격과 배경) */
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+  gap: 1px !important;
+  background: rgba(0, 0, 0, 0.85) !important;
+  border-radius: 6px;
+  padding: 4px 8px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
+
+  /* 기본적으로는 숨겨둠 (투명도 0, 클릭 방지) */
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+
+/* 🟢 복구됨: 장비(부모 요소)에 마우스를 올리면 버튼 그룹이 나타남 */
+/* (참고: 장비를 감싸는 클래스가 .rack-item이거나 .rack-slot일 수 있습니다.
+   만약 호버가 안 먹히면 부모 클래스 이름에 맞게 수정해 주세요) */
+.rack-item:hover .device-actions,
+.rack-slot:hover .device-actions,
+.device-container:hover .device-actions {
+  opacity: 1 !important;
+  pointer-events: auto !important;
+}
+
+/* 버튼 내부 스타일 및 아이콘 크기 (아까와 동일) */
+.device-actions .ant-btn {
+  padding: 0 4px !important;
+  height: 26px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.device-actions .ant-btn :deep(.anticon) {
+  font-size: 16px !important;
+  color: #ffffff !important;
+  text-shadow: 0 0 1px rgba(255, 255, 255, 0.6);
+  transition: all 0.2s ease;
+}
+
+.device-actions .ant-btn:hover :deep(.anticon) {
+  color: #40a9ff !important;
+  transform: scale(1.15);
+}
+
+.device-actions .ant-btn:disabled :deep(.anticon) {
+  color: rgba(255, 255, 255, 0.25) !important;
+  text-shadow: none;
+}
+
+.device-actions .ant-btn {
+  color: white;
+}
+
+.device-content:hover .device-actions {
+  opacity: 1;
+}
+</style>
diff --git a/ui/src/views/plugins/IFrameRack.vue b/ui/src/views/plugins/IFrameRack.vue
deleted file mode 100644
index 364017e74953..000000000000
--- a/ui/src/views/plugins/IFrameRack.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-// Licensed to the Apache Software Foundation (ASF) under one
-// or more contributor license agreements.  See the NOTICE file
-// distributed with this work for additional information
-// regarding copyright ownership.  The ASF licenses this file
-// to you under the Apache License, Version 2.0 (the
-// "License"); you may not use this file except in compliance
-// with the License.  You may obtain a copy of the License at
-//
-//   http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing,
-// software distributed under the License is distributed on an
-// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-// KIND, either express or implied.  See the License for the
-// specific language governing permissions and limitations
-// under the License.
-
-<template>
-  <div>
-    <iframe :src="uriInfo" width="100%" frameBorder="0" style="height: 90vh">
-    </iframe>
-  </div>
-</template>
-
-<script>
-import { api } from '@/api'
-export default {
-  name: 'IFrameWall',
-  props: {
-    resource: {
-      type: Object,
-      required: true
-    }
-  },
-  data () {
-    return {
-      uriInfo: ''
-    }
-  },
-  created () {
-    this.urlAction()
-  },
-  methods: {
-    urlAction () {
-      const port = 7077
-      const zoneId = this.resource.id
-
-      api('listCapabilities').then(json => {
-        const host = json.listcapabilitiesresponse.capability.host || []
-        this.uriInfo = `http://${host}:${port}/index.html?zone_id=${zoneId}`
-        this.uriCreateOk = true
-      }).catch(err => {
-        console.error('capabilities API 실패:', err)
-        this.uriInfo = ''
-      })
-    }
-  }
-}
-</script>
diff --git a/ui/vue.config.js b/ui/vue.config.js
index e63f7095f0c2..318ef86aefe8 100644
--- a/ui/vue.config.js
+++ b/ui/vue.config.js
@@ -138,7 +138,7 @@ const vueConfig = {
     port: 5050,
     proxy: {
       '/client': {
-        target: process.env.CS_URL || 'http://10.10.253.29:8080',
+        target: process.env.CS_URL || 'http://10.10.218.29:8080',
         secure: false,
         ws: false,
         changeOrigin: true,

From 761b17d25b866425eb02d40e7bc012a37755d5c4 Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Thu, 19 Mar 2026 10:15:22 +0900
Subject: [PATCH 04/17] =?UTF-8?q?=EB=A1=A4=EB=B0=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wrapper/LibvirtRestoreBackupCommandWrapper.java    | 10 ++++++++++
 tools/marvin/setup.py                                  |  2 +-
 ui/vue.config.js                                       |  2 +-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/plugins/hypervisors/kvm/src/main/java/com/cloud/hypervisor/kvm/resource/wrapper/LibvirtRestoreBackupCommandWrapper.java b/plugins/hypervisors/kvm/src/main/java/com/cloud/hypervisor/kvm/resource/wrapper/LibvirtRestoreBackupCommandWrapper.java
index ff32d9c95e82..de867432cc1e 100644
--- a/plugins/hypervisors/kvm/src/main/java/com/cloud/hypervisor/kvm/resource/wrapper/LibvirtRestoreBackupCommandWrapper.java
+++ b/plugins/hypervisors/kvm/src/main/java/com/cloud/hypervisor/kvm/resource/wrapper/LibvirtRestoreBackupCommandWrapper.java
@@ -154,6 +154,16 @@ private String mountBackupDirectory(String backupRepoAddress, String backupRepoT
         try {
             mountDirectory = Files.createTempDirectory(mountDirectory).toString();
             String mount = String.format(MOUNT_COMMAND, backupRepoType, backupRepoAddress, mountDirectory);
+            if ("cifs".equals(backupRepoType)) {
+                if (Objects.isNull(mountOptions) || mountOptions.trim().isEmpty()) {
+                    mountOptions = "nobrl";
+                } else {
+                    mountOptions += ",nobrl";
+                }
+            }
+            if (Objects.nonNull(mountOptions) && !mountOptions.trim().isEmpty()) {
+                mount += " -o " + mountOptions;
+            }
             Script.runSimpleBashScript(mount);
         } catch (Exception e) {
             throw new CloudRuntimeException(String.format("Failed to mount %s to %s", backupRepoType, backupRepoAddress), e);
diff --git a/tools/marvin/setup.py b/tools/marvin/setup.py
index 803829736892..11a63a96aced 100644
--- a/tools/marvin/setup.py
+++ b/tools/marvin/setup.py
@@ -27,7 +27,7 @@
         raise RuntimeError("python setuptools is required to build Marvin")
 
 
-VERSION = "4.21.0.0"
+VERSION = "4.21.0.0-SNAPSHOT"
 
 setup(name="Marvin",
       version=VERSION,
diff --git a/ui/vue.config.js b/ui/vue.config.js
index 318ef86aefe8..9cae2ff66fb1 100644
--- a/ui/vue.config.js
+++ b/ui/vue.config.js
@@ -138,7 +138,7 @@ const vueConfig = {
     port: 5050,
     proxy: {
       '/client': {
-        target: process.env.CS_URL || 'http://10.10.218.29:8080',
+        target: process.env.CS_URL || 'http://localhost:8080',
         secure: false,
         ws: false,
         changeOrigin: true,

From 434fbe13c27b5014bda10351be5e6c0183afcbbf Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Wed, 6 May 2026 10:40:48 +0900
Subject: [PATCH 05/17] =?UTF-8?q?[=EB=9E=99=20=EC=8B=9C=EA=B0=81=ED=99=94]?=
 =?UTF-8?q?=20=EB=93=9C=EB=9E=98=EA=B7=B8=EB=A1=9C=20=EC=9E=A5=EC=B9=98?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=99=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD.=20=EC=9E=A5=EC=B9=98=EB=A7=88=EB=8B=A4=20=EC=BB=A4?=
 =?UTF-8?q?=EC=8A=A4=ED=85=80=20=EB=A7=81=ED=81=AC=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EA=B0=80=EB=8A=A5.=20=ED=98=B8=EC=8A=A4=ED=8A=B8=EC=9D=98=20?=
 =?UTF-8?q?=EA=B2=BD=EC=9A=B0=20=EC=9A=B4=EC=98=81=EC=9E=A5=EB=B9=84?=
 =?UTF-8?q?=EC=99=80=20=EB=A7=A4=EC=B9=AD=ED=95=A0=20=EC=88=98=20=EC=9E=88?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80.?=
 =?UTF-8?q?=20=ED=98=B8=EC=8A=A4=ED=8A=B8=20=ED=8F=AC=ED=84=B8=20=EB=A7=81?=
 =?UTF-8?q?=ED=81=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/package-lock.json                       |  50 ++
 ui/src/config/section/infra/zones.js       |   3 -
 ui/src/views/infra/InfraSummary.vue        | 116 ++-
 ui/src/views/infra/zone/RackDiagramTab.vue | 883 +++++++++++++++++----
 ui/vue.config.js                           |   2 +-
 5 files changed, 865 insertions(+), 189 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 56534debe41f..22854acfafae 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -27,6 +27,7 @@
         "cronstrue": "^2.26.0",
         "dompurify": "^3.3.1",
         "enquire.js": "^2.1.6",
+        "html2canvas": "^1.4.1",
         "js-cookie": "^2.2.1",
         "lodash": "^4.17.15",
         "markdown-it": "^14.1.1",
@@ -8330,6 +8331,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -10680,6 +10690,15 @@
         "node": ">4"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-loader": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz",
@@ -15606,6 +15625,19 @@
         "object.getownpropertydescriptors": "^2.0.3"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -27695,6 +27727,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -28807,6 +28848,15 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
diff --git a/ui/src/config/section/infra/zones.js b/ui/src/config/section/infra/zones.js
index 7e6f08d83286..a428b3618dc7 100644
--- a/ui/src/config/section/infra/zones.js
+++ b/ui/src/config/section/infra/zones.js
@@ -72,9 +72,6 @@ export default {
   }, {
     name: 'physical.network',
     component: shallowRef(defineAsyncComponent(() => import('@/views/infra/zone/PhysicalNetworksTab.vue')))
-  }, {
-    name: 'zone.rack',
-    component: shallowRef(defineAsyncComponent(() => import('@/views/infra/zone/RackDiagramTab.vue')))
   }, {
     name: 'ipv4.subnets',
     component: shallowRef(defineAsyncComponent(() => import('@/views/infra/zone/Ipv4GuestSubnetsTab.vue'))),
diff --git a/ui/src/views/infra/InfraSummary.vue b/ui/src/views/infra/InfraSummary.vue
index a35db46f7608..27a3e8c0e6fa 100644
--- a/ui/src/views/infra/InfraSummary.vue
+++ b/ui/src/views/infra/InfraSummary.vue
@@ -147,23 +147,37 @@
         </a-col>
       </a-card>
     </a-col>
-    <template v-for="(section, index) in sections" :key="index">
-      <a-col
-        :xs="12"
-        :sm="8"
-        :md="6"
-        :style="{ marginBottom: '12px' }"
-        v-if="routes[section]">
-        <chart-card :loading="loading">
-          <div class="chart-card-inner">
-            <router-link :to="{ name: section.substring(0, section.length - 1) }">
-              <h2>{{ $t(routes[section].title) }}</h2>
-              <h2><render-icon :icon="routes[section].icon" /> {{ stats[section] }}</h2>
-            </router-link>
-          </div>
-        </chart-card>
-      </a-col>
-    </template>
+    <a-col :xs="24">
+      <div class="infra-summary-layout">
+        <div class="summary-cards-pane">
+          <a-row :gutter="12">
+            <template v-for="(section, index) in sections" :key="index">
+              <a-col
+                :xs="12"
+                :sm="8"
+                :md="8"
+                :style="{ marginBottom: '12px' }"
+                v-if="routes[section]">
+                <chart-card :loading="loading" class="summary-mini-card">
+                  <div class="chart-card-inner">
+                    <router-link :to="{ name: section.substring(0, section.length - 1) }">
+                      <h2>{{ $t(routes[section].title) }}</h2>
+                      <h2><render-icon :icon="routes[section].icon" /> {{ stats[section] }}</h2>
+                    </router-link>
+                  </div>
+                </chart-card>
+              </a-col>
+            </template>
+          </a-row>
+        </div>
+        <div class="rack-visualization-pane">
+          <a-card :bordered="false" class="rack-visualization-card">
+            <template #title>랙 시각화</template>
+            <rack-diagram-tab />
+          </a-card>
+        </div>
+      </div>
+    </a-col>
   </a-row>
 </template>
 
@@ -175,13 +189,15 @@ import router from '@/router'
 import Breadcrumb from '@/components/widgets/Breadcrumb'
 import ChartCard from '@/components/widgets/ChartCard'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
+import RackDiagramTab from '@/views/infra/zone/RackDiagramTab.vue'
 
 export default {
   name: 'InfraSummary',
   components: {
     Breadcrumb,
     ChartCard,
-    TooltipLabel
+    TooltipLabel,
+    RackDiagramTab
   },
   data () {
     return {
@@ -351,6 +367,70 @@ export default {
     white-space: nowrap;
     overflow: hidden;
   }
+  .infra-summary-layout {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+  }
+  .summary-cards-pane {
+    width: 30%;
+    flex: 0 0 30%;
+    padding: 10px;
+    border-radius: 12px;
+    border: 1px solid #dfe3e8;
+    background: linear-gradient(180deg, #f8f9fb 0%, #f3f5f8 100%);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
+  }
+  .rack-visualization-pane {
+    width: 70%;
+    flex: 0 0 70%;
+    min-width: 320px;
+  }
+  .summary-mini-card :deep(.ant-card-body) {
+    padding: 12px 14px 6px !important;
+  }
+  .summary-mini-card :deep(.chart-card-content) {
+    margin-top: -28px;
+    margin-bottom: 4px;
+  }
+  .summary-mini-card :deep(.chart-card-total) {
+    margin-top: 2px;
+    font-size: 22px;
+    line-height: 26px;
+    height: 26px;
+  }
+  .summary-mini-card .chart-card-inner h2 {
+    margin: 0;
+    line-height: 1.2;
+  }
+  .summary-mini-card .chart-card-inner h2:first-child {
+    font-size: 20px;
+  }
+  .summary-mini-card .chart-card-inner h2:last-child {
+    margin-top: 4px;
+    font-size: 28px;
+  }
+  .rack-visualization-card :deep(.ant-card-body) {
+    padding: 10px 12px 12px;
+    background: #f6f8fb;
+    border-radius: 10px;
+  }
+  .rack-visualization-card {
+    border: 1px solid #dfe3e8;
+    border-radius: 12px;
+    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
+  }
+  @media (max-width: 1200px) {
+    .infra-summary-layout {
+      flex-direction: column;
+    }
+    .summary-cards-pane,
+    .rack-visualization-pane {
+      width: 100%;
+      flex: 1 1 100%;
+      min-width: 0;
+    }
+  }
   .intermediate-certificate {
     opacity: 1;
     transform: none;
diff --git a/ui/src/views/infra/zone/RackDiagramTab.vue b/ui/src/views/infra/zone/RackDiagramTab.vue
index ca0877316467..b7f13774db1e 100644
--- a/ui/src/views/infra/zone/RackDiagramTab.vue
+++ b/ui/src/views/infra/zone/RackDiagramTab.vue
@@ -62,7 +62,7 @@
     </div>
     <a-spin :spinning="loading || saving">
       <div class="rack-canvas" style="overflow: auto; min-height: 600px; padding: 20px; background: #eef0f4;">
-        <div class="rack-zoom-wrapper" :style="{ transform: `scale(${zoomLevel})`, transformOrigin: 'top left' }">
+        <div class="rack-zoom-wrapper" :style="{ zoom: zoomLevel }">
 
           <a-empty v-if="!parsedRacks.length" :description="'등록된 랙이 없습니다. 상단의 [새 랙 추가] 버튼을 눌러주세요.'" style="margin-top: 50px;" />
 
@@ -102,7 +102,7 @@
                 </div>
               </div>
 
-              <div class="rack-body" style="display: flex; margin: 0 auto; width: 310px;">
+              <div class="rack-body" style="display: flex; margin: 0 auto; width: 372px;">
 
                 <div class="rack-ruler">
                   <div
@@ -119,11 +119,12 @@
                   </div>
                 </div>
 
-                <div class="rack-frame">
+                <div class="rack-frame" @dragover.prevent @drop.stop="onDropRackFrame(rIndex, $event)">
                   <div
                     v-for="(item, iIndex) in rack.items"
                     :key="iIndex"
                     class="rack-item"
+                    @dragover.prevent
                     :style="{ height: (item.height * 32) + 'px' }"
                   >
                     <div v-if="item.type === 'gap'" class="gap-content" @click="openDeviceModal(rIndex, iIndex)">
@@ -133,6 +134,8 @@
                     <div
                       v-else
                       class="device-content"
+                      draggable="true"
+                      @dragstart="onDragStart(rIndex, iIndex)"
                       :style="{ opacity: isMatched(item) ? 1 : 0.2, filter: isMatched(item) ? 'none' : 'grayscale(100%)' }"
                     >
 
@@ -179,36 +182,32 @@
                           </a-button>
                         </a-tooltip>
 
-                        <a-tooltip title="위쪽 여백 끝으로 이동" :mouseEnterDelay="0.1">
-                          <a-button size="small" type="text" @click.stop="moveItem(rIndex, iIndex, -1, true)" :disabled="iIndex === 0">
-                            <VerticalAlignTopOutlined />
-                          </a-button>
-                        </a-tooltip>
-
-                        <a-tooltip title="한 칸 위로" :mouseEnterDelay="0.1">
-                          <a-button size="small" type="text" @click.stop="moveItem(rIndex, iIndex, -1, false)" :disabled="iIndex === 0">
-                            <UpOutlined />
-                          </a-button>
-                        </a-tooltip>
-
-                        <a-tooltip title="한 칸 아래로" :mouseEnterDelay="0.1">
-                          <a-button size="small" type="text" @click.stop="moveItem(rIndex, iIndex, 1, false)" :disabled="iIndex === rack.items.length - 1">
-                            <DownOutlined />
-                          </a-button>
-                        </a-tooltip>
-
-                        <a-tooltip title="아래쪽 여백 끝으로 이동" :mouseEnterDelay="0.1">
-                          <a-button size="small" type="text" @click.stop="moveItem(rIndex, iIndex, 1, true)" :disabled="iIndex === rack.items.length - 1">
-                            <VerticalAlignBottomOutlined />
-                          </a-button>
-                        </a-tooltip>
-
                         <a-tooltip title="설정" :mouseEnterDelay="0.1">
                           <a-button size="small" type="text" @click.stop="openDeviceModal(rIndex, iIndex)">
                             <SettingOutlined />
                           </a-button>
                         </a-tooltip>
 
+                        <a-dropdown v-if="hasActionMenu(item)" :trigger="['click']">
+                          <a-tooltip title="장치 작업" :mouseEnterDelay="0.1">
+                            <a-button size="small" type="text" class="device-more-btn" @click.stop>
+                              <MoreOutlined />
+                            </a-button>
+                          </a-tooltip>
+                          <template #overlay>
+                            <a-menu @click="({ key }) => handleHostActionMenu(key, item)">
+                              <a-menu-item v-if="isHostLinked(item)" key="host-detail"><LinkOutlined /> 호스트 상세</a-menu-item>
+                              <a-menu-item v-if="isHostLinked(item)" key="host-vms"><UnorderedListOutlined /> 호스트 VM 목록</a-menu-item>
+                              <a-menu-item v-if="isHostLinked(item)" key="host-oobm"><LaptopOutlined /> OOBM 포털 접속</a-menu-item>
+                              <a-menu-item v-if="isHostLinked(item)" key="host-cube"><AppstoreOutlined /> Cube 포털 접속</a-menu-item>
+                              <a-menu-divider v-if="isHostLinked(item) && hasQuickLinks(item)" />
+                              <a-menu-item v-for="(link, lIdx) in getQuickLinks(item)" :key="`quick-${lIdx}`">
+                                <LinkOutlined /> {{ link.label || link.url }}
+                              </a-menu-item>
+                            </a-menu>
+                          </template>
+                        </a-dropdown>
+
                         <a-popconfirm title="삭제하시겠습니까?" @confirm="deleteItem(rIndex, iIndex)" placement="topRight">
                           <a-tooltip title="삭제" :mouseEnterDelay="0.1">
                             <a-button size="small" type="text" danger @click.stop>
@@ -241,7 +240,14 @@
           <a-input v-model:value="rackForm.name" placeholder="예: Server Rack 1" />
         </a-form-item>
         <a-form-item label="총 높이 (U)">
-          <a-input-number v-model:value="rackForm.totalHeight" :min="10" :max="50" style="width: 100%" />
+          <a-input-number
+            v-model:value="rackForm.totalHeight"
+            :min="10"
+            :max="50"
+            :step="1"
+            :precision="0"
+            style="width: 100%"
+          />
         </a-form-item>
       </a-form>
     </a-modal>
@@ -301,6 +307,20 @@
           />
         </a-form-item>
 
+        <a-form-item label="인프라 자산 선택" v-if="deviceForm.type !== 'blank'">
+          <a-select
+            v-model:value="deviceForm.sourceRef"
+            :loading="inventoryLoading"
+            :options="inventoryOptions"
+            :show-search="true"
+            option-filter-prop="label"
+            placeholder="Host를 선택하세요."
+            allow-clear
+            style="width: 100%"
+            @change="handleSourceChange"
+          />
+        </a-form-item>
+
         <a-form-item label="커스텀 타입명" v-if="deviceForm.type === 'custom'">
           <a-input v-model:value="deviceForm.customType" placeholder="예: Router" />
         </a-form-item>
@@ -326,8 +346,64 @@
             placeholder="IP 주소, 용도, 담당자 등을 입력하세요"
           />
         </a-form-item>
+        <a-form-item
+          label="커스텀 바로가기 링크 (한 줄에 하나, 형식: 이름|URL)"
+          :validateStatus="quickLinksError ? 'error' : ''"
+          :help="quickLinksError"
+        >
+          <a-textarea
+            v-model:value="deviceForm.quickLinksText"
+            :rows="3"
+            placeholder="예: iDRAC|https://10.0.0.10&#10;NAS|https://nas.local"
+            @change="quickLinksError = ''"
+          />
+        </a-form-item>
       </a-form>
     </a-modal>
+    <a-modal
+      v-model:visible="hostVmModalVisible"
+      :title="hostVmModalTitle"
+      :footer="null"
+      width="760px"
+      destroyOnClose
+    >
+      <a-spin :spinning="hostVmLoading">
+        <div class="host-vm-scroll-area">
+        <div v-if="!hostVmLoading && !filteredHostVmList.length" class="host-vm-empty-wrap">
+          <div class="ant-empty ant-empty-normal">
+            <div class="ant-empty-image">
+              <svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
+                <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
+                  <ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+                  <g class="ant-empty-img-simple-g" fill-rule="nonzero" stroke="#D9D9D9">
+                    <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
+                    <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-simple-path"></path>
+                  </g>
+                </g>
+              </svg>
+            </div>
+            <p class="ant-empty-description">{{ $t('label.no.data') || 'No Data' }}</p>
+          </div>
+        </div>
+        <div v-else-if="!hostVmLoading" class="host-vm-grid">
+          <div
+            v-for="vm in filteredHostVmList"
+            :key="vm.id"
+            class="host-vm-card"
+            :class="{ 'host-vm-card-inactive': !isRunningVm(vm) }"
+          >
+            <div class="host-vm-icon">
+              <font-awesome-icon :icon="['fab', getVmOsLogo(vm)]" size="lg" />
+            </div>
+            <a-tooltip :title="vm.displayname || vm.name || vm.id">
+              <div class="host-vm-name">{{ vm.displayname || vm.name || vm.id }}</div>
+            </a-tooltip>
+            <div class="host-vm-meta">{{ vm.state || '-' }} / {{ vm.ostypename || vm.hypervisor || '-' }}</div>
+          </div>
+        </div>
+        </div>
+      </a-spin>
+    </a-modal>
 
   </div>
 </template>
@@ -337,6 +413,7 @@ import { ref, reactive, onMounted, computed, watch, onBeforeUnmount, nextTick }
 import { message } from 'ant-design-vue'
 import html2canvas from 'html2canvas'
 import { api } from '@/api'
+import { useRouter } from 'vue-router'
 import {
   CopyOutlined,
   SettingOutlined,
@@ -344,22 +421,24 @@ import {
   InfoCircleOutlined,
   LeftOutlined,
   RightOutlined,
-  UpOutlined,
-  DownOutlined,
-  VerticalAlignTopOutlined,
-  VerticalAlignBottomOutlined,
   PlusOutlined,
   FileTextOutlined,
   UploadOutlined,
   CameraOutlined,
   SaveOutlined,
-  ExportOutlined
+  ExportOutlined,
+  LinkOutlined,
+  LaptopOutlined,
+  AppstoreOutlined,
+  MoreOutlined,
+  UnorderedListOutlined
 } from '@ant-design/icons-vue'
 
 // 전역 상태
 const loading = ref(false)
 const saving = ref(false)
 const zoomLevel = ref(1)
+const router = useRouter()
 
 // 슬라이더 및 입력창과 연동할 퍼센트 단위 변수
 const zoomPercent = computed({
@@ -515,10 +594,27 @@ const exportToImage = async () => {
 
   try {
     message.loading({ content: '이미지 변환 중...', key: 'exporting' })
-    // 배율(zoomLevel)에 영향받지 않도록 원본 크기로 캡처
+    const fullWidth = element.scrollWidth
+    const fullHeight = element.scrollHeight
+
+    // 가로 스크롤 영역 전체를 포함해 캡처
     const canvas = await html2canvas(element, {
       backgroundColor: '#eef0f4',
-      scale: 2 // 고화질 저장
+      scale: 2,
+      width: fullWidth,
+      height: fullHeight,
+      windowWidth: fullWidth,
+      windowHeight: fullHeight,
+      scrollX: 0,
+      scrollY: 0,
+      onclone: (doc) => {
+        const cloned = doc.querySelector('.rack-container')
+        if (cloned) {
+          cloned.style.overflow = 'visible'
+          cloned.style.width = `${fullWidth}px`
+          cloned.style.height = `${fullHeight}px`
+        }
+      }
     })
 
     const link = document.createElement('a')
@@ -624,14 +720,33 @@ const moveRack = (rIndex, direction) => {
 
 // 랙 모달 저장 로직
 const submitRackModal = () => {
-  if (!rackForm.name) {
+  const rackName = String(rackForm.name || '').trim()
+  if (!rackName) {
     message.warning('랙 이름을 입력해주세요.')
     return
   }
+  if (rackName.length > 60) {
+    message.warning('랙 이름은 60자 이하로 입력해주세요.')
+    return
+  }
+
+  if (!Number.isInteger(rackForm.totalHeight) || rackForm.totalHeight < 10 || rackForm.totalHeight > 50) {
+    message.warning('총 높이(U)는 10~50 사이의 정수만 입력할 수 있습니다.')
+    return
+  }
+
+  const duplicateName = parsedRacks.value.some((rack, idx) => {
+    if (rackModalMode.value === 'edit' && idx === targetRackIndex.value) return false
+    return String(rack.name || '').trim().toLowerCase() === rackName.toLowerCase()
+  })
+  if (duplicateName) {
+    message.warning('동일한 랙 이름이 이미 존재합니다.')
+    return
+  }
 
   if (rackModalMode.value === 'add') {
     parsedRacks.value.push({
-      name: rackForm.name,
+      name: rackName,
       totalHeight: rackForm.totalHeight,
       items: [{ type: 'gap', height: rackForm.totalHeight }]
     })
@@ -643,7 +758,7 @@ const submitRackModal = () => {
     if (diff > 0) {
       // 랙 크기가 커졌으면 맨 아래에 그만큼 여백(Gap) 추가
       targetRack.items.push({ type: 'gap', height: diff })
-      targetRack.name = rackForm.name
+      targetRack.name = rackName
       targetRack.totalHeight = rackForm.totalHeight
     } else if (diff < 0) {
       // 랙 크기가 줄어들었을 때의 스마트 처리 로직
@@ -680,11 +795,11 @@ const submitRackModal = () => {
       }
 
       targetRack.items = tempItems
-      targetRack.name = rackForm.name
+      targetRack.name = rackName
       targetRack.totalHeight = rackForm.totalHeight
     } else {
       // 높이는 그대로고 이름만 변경된 경우
-      targetRack.name = rackForm.name
+      targetRack.name = rackName
     }
   }
   closeRackModal()
@@ -703,9 +818,405 @@ const deviceForm = reactive({
   label: '',
   height: 1,
   customType: '',
-  memo: ''
+  memo: '',
+  sourceRef: undefined,
+  quickLinksText: ''
 })
 
+const inventoryLoading = ref(false)
+const inventoryOptions = ref([])
+const hostCache = ref({})
+const hostVmModalVisible = ref(false)
+const hostVmModalTitle = ref('호스트 VM 목록')
+const hostVmLoading = ref(false)
+const hostVmList = ref([])
+const hostVmFallbackList = ref([])
+const dragSource = ref({ rIndex: -1, iIndex: -1 })
+const quickLinksError = ref('')
+const ENABLE_VM_FALLBACK_MOCK = false
+const HOST_ACTIVE_VM_STATES = new Set(['running', 'starting', 'stopping', 'migrating'])
+
+const buildVmMockList = (hostId, hostName = 'sample') => {
+  const osPool = [
+    'CentOS Linux (Sample)',
+    'Rocky Linux (Sample)',
+    'Ubuntu Linux (Sample)',
+    'Windows Server (Sample)',
+    'Windows 11 Pro (Sample)'
+  ]
+  const list = []
+  for (let i = 1; i <= 20; i++) {
+    const idx = i - 1
+    const no = String(i).padStart(2, '0')
+    list.push({
+      id: `sample-${hostId}-${no}`,
+      name: `${hostName}-vm-${no}`,
+      displayname: `${hostName}-vm-${no}`,
+      state: 'Running',
+      ostypename: osPool[idx % osPool.length]
+    })
+  }
+  return list
+}
+
+const filteredHostVmList = computed(() => {
+  const merged = hostVmList.value.length ? hostVmList.value : hostVmFallbackList.value
+  return merged.filter(vm => HOST_ACTIVE_VM_STATES.has(String(vm?.state || '').toLowerCase()))
+})
+
+const mergeAssetMemo = (existingMemo, linesToAdd) => {
+  const memo = existingMemo || ''
+  const marker = '[LinkedAsset]'
+  const cleaned = memo
+    .split('\n')
+    .filter(line => !line.startsWith(marker))
+    .join('\n')
+    .trim()
+  const linked = linesToAdd.map(line => `${marker} ${line}`).join('\n')
+  return [cleaned, linked].filter(Boolean).join('\n')
+}
+
+const buildInventoryOptions = async () => {
+  if (!currentZoneId.value) return
+  inventoryLoading.value = true
+  const options = []
+
+  try {
+    const hostJson = await api('listHosts', { zoneid: currentZoneId.value, listall: true })
+    const hosts = hostJson?.listhostsresponse?.host || []
+    hosts.forEach(h => {
+      const name = h.name || h.hostname || h.id
+      const ip = h.ipaddress ? ` / ${h.ipaddress}` : ''
+      options.push({
+        label: `[Host] ${name}${ip}`,
+        value: `host:${h.id}`,
+        meta: { kind: 'host', id: h.id, name, ip: h.ipaddress || '' }
+      })
+      hostCache.value[h.id] = h
+    })
+  } catch (e) {
+    console.warn('listHosts failed:', e)
+  }
+
+  inventoryOptions.value = options
+  inventoryLoading.value = false
+}
+
+const handleSourceChange = (value) => {
+  if (!value) return
+  const selected = inventoryOptions.value.find(o => o.value === value)
+  if (!selected) return
+
+  if (!deviceForm.label || Object.values(defaultLabels).includes(deviceForm.label)) {
+    deviceForm.label = selected.meta.name
+  }
+
+  const lines = [
+    `Type=${selected.meta.kind}`,
+    `Name=${selected.meta.name}`,
+    `Id=${selected.meta.id}`
+  ]
+  if (selected.meta.ip) lines.push(`IP=${selected.meta.ip}`)
+  deviceForm.memo = mergeAssetMemo(deviceForm.memo, lines)
+}
+
+const getLinkedHostId = (item) => {
+  if (!item?.sourceRef || typeof item.sourceRef !== 'string') return null
+  if (!item.sourceRef.startsWith('host:')) return null
+  return item.sourceRef.split(':')[1] || null
+}
+
+const isHostLinked = (item) => {
+  return !!getLinkedHostId(item)
+}
+
+const parseQuickLinksTextWithValidation = (text) => {
+  if (!text) return { links: [], errors: [] }
+  const lines = text.split('\n')
+  const links = []
+  const errors = []
+
+  lines.forEach((raw, idx) => {
+    const line = raw.trim()
+    if (!line) return
+
+    let label = ''
+    let url = ''
+    if (line.includes('|')) {
+      const parts = line.split('|')
+      label = (parts[0] || '').trim()
+      url = (parts.slice(1).join('|') || '').trim()
+    } else {
+      url = line
+    }
+
+    if (!url) {
+      errors.push(`${idx + 1}행: URL이 비어 있습니다. (형식: 이름|URL)`)
+      return
+    }
+    if (!/^https?:\/\//i.test(url)) {
+      errors.push(`${idx + 1}행: URL은 http:// 또는 https:// 로 시작해야 합니다.`)
+      return
+    }
+
+    links.push({ label, url })
+  })
+
+  return { links, errors }
+}
+
+const getQuickLinks = (item) => {
+  if (!item?.quickLinks || !Array.isArray(item.quickLinks)) return []
+  return item.quickLinks.filter(link => link?.url)
+}
+
+const hasQuickLinks = (item) => getQuickLinks(item).length > 0
+const hasActionMenu = (item) => isHostLinked(item) || hasQuickLinks(item)
+
+const compactGaps = (rack) => {
+  for (let i = rack.items.length - 1; i > 0; i--) {
+    if (rack.items[i].type === 'gap' && rack.items[i - 1].type === 'gap') {
+      rack.items[i - 1].height += rack.items[i].height
+      rack.items.splice(i, 1)
+    }
+  }
+}
+
+const onDragStart = (rIndex, iIndex) => {
+  dragSource.value = { rIndex, iIndex }
+}
+
+const getDesiredStartUFromRackEvent = (event, rack) => {
+  if (!event?.currentTarget) return 0
+  const rect = event.currentTarget.getBoundingClientRect()
+  const y = Math.max(0, Math.min(rect.height - 1, event.clientY - rect.top))
+  const raw = Math.floor(y / 32)
+  const rackHeight = rack?.totalHeight || rack.items.reduce((s, i) => s + i.height, 0)
+  return Math.max(0, Math.min(rackHeight - 1, raw))
+}
+
+const findBestStartUInRack = (rack, deviceHeight, desiredStartU) => {
+  compactGaps(rack)
+  let cursor = 0
+  let best = null
+  for (let i = 0; i < rack.items.length; i++) {
+    const item = rack.items[i]
+    if (item.type === 'gap') {
+      const minStart = cursor
+      const maxStart = cursor + item.height - deviceHeight
+      if (maxStart >= minStart) {
+        const candidate = Math.max(minStart, Math.min(desiredStartU, maxStart))
+        const dist = Math.abs(candidate - desiredStartU)
+        if (!best || dist < best.dist) {
+          best = { index: i, startU: candidate, dist }
+        }
+      }
+    }
+    cursor += item.height
+  }
+  return best
+}
+
+const placeDeviceAtStartU = (rack, gapIndex, startU, device) => {
+  let cursor = 0
+  for (let i = 0; i < gapIndex; i++) cursor += rack.items[i].height
+  const gap = rack.items[gapIndex]
+  if (!gap || gap.type !== 'gap') return false
+
+  const localStart = startU - cursor
+  const localEnd = localStart + device.height
+  if (localStart < 0 || localEnd > gap.height) return false
+
+  const before = localStart
+  const after = gap.height - localEnd
+  const insert = []
+  if (before > 0) insert.push({ type: 'gap', height: before })
+  insert.push({ ...device })
+  if (after > 0) insert.push({ type: 'gap', height: after })
+  rack.items.splice(gapIndex, 1, ...insert)
+  compactGaps(rack)
+  return true
+}
+
+const onDropRackFrame = (targetRIndex, event) => {
+  const { rIndex: sourceRIndex, iIndex: sourceIIndex } = dragSource.value
+  dragSource.value = { rIndex: -1, iIndex: -1 }
+
+  if (sourceRIndex < 0 || sourceIIndex < 0) return
+  const sourceRack = parsedRacks.value[sourceRIndex]
+  const targetRack = parsedRacks.value[targetRIndex]
+  const sourceItem = sourceRack?.items?.[sourceIIndex]
+  if (!sourceRack || !targetRack || !sourceItem || sourceItem.type === 'gap') return
+
+  const moving = { ...sourceItem }
+  const sameRack = sourceRIndex === targetRIndex
+
+  // 원본 위치 비우기
+  sourceRack.items.splice(sourceIIndex, 1, { type: 'gap', height: moving.height })
+  compactGaps(sourceRack)
+
+  const desiredStartU = getDesiredStartUFromRackEvent(event, targetRack)
+  const best = findBestStartUInRack(targetRack, moving.height, desiredStartU)
+  if (!best) {
+    message.warning(`대상 랙의 연속 여백이 부족합니다. (필요 ${moving.height}U)`)
+    // 복구
+    const restore = findBestStartUInRack(sourceRack, moving.height, 0)
+    if (restore) placeDeviceAtStartU(sourceRack, restore.index, restore.startU, moving)
+    return
+  }
+
+  const placed = placeDeviceAtStartU(targetRack, best.index, best.startU, moving)
+  if (!placed) {
+    message.warning('드롭 위치 계산에 실패했습니다. 다시 시도해주세요.')
+    const restore = findBestStartUInRack(sourceRack, moving.height, 0)
+    if (restore) placeDeviceAtStartU(sourceRack, restore.index, restore.startU, moving)
+    return
+  }
+
+  if (sameRack) compactGaps(targetRack)
+}
+
+const fetchHostById = async (hostId) => {
+  if (!hostId) return null
+  if (hostCache.value[hostId]) return hostCache.value[hostId]
+  const json = await api('listHosts', { id: hostId })
+  const host = json?.listhostsresponse?.host?.[0] || null
+  if (host) hostCache.value[hostId] = host
+  return host
+}
+
+const goToLinkedHost = (item) => {
+  const hostId = getLinkedHostId(item)
+  if (!hostId) return
+  router.push({ path: `/host/${hostId}` })
+}
+
+const openLinkedHostOobm = async (item) => {
+  const hostId = getLinkedHostId(item)
+  if (!hostId) return
+  try {
+    const host = await fetchHostById(hostId)
+    const protocol = host?.details?.manageconsoleprotocol || 'http'
+    const address = host?.outofbandmanagement?.address || ''
+    const port = host?.details?.manageconsoleport
+    if (!address || !port) {
+      message.warning('선택한 호스트의 OOBM 포털 정보를 찾을 수 없습니다.')
+      return
+    }
+    window.open(`${protocol}://${address}:${port}`, '_blank')
+  } catch (e) {
+    message.error('OOBM 포털 정보를 불러오지 못했습니다.')
+  }
+}
+
+const openLinkedHostCube = async (item) => {
+  const hostId = getLinkedHostId(item)
+  if (!hostId) return
+  try {
+    const host = await fetchHostById(hostId)
+    const ip = host?.ipaddress
+    if (!ip) {
+      message.warning('선택한 호스트의 IP 정보를 찾을 수 없습니다.')
+      return
+    }
+    window.open(`https://${ip}:9090`, '_blank')
+  } catch (e) {
+    message.error('Cube 포털 정보를 불러오지 못했습니다.')
+  }
+}
+
+const openLinkedHostVmModal = async (item) => {
+  const hostId = getLinkedHostId(item)
+  if (!hostId) return
+  hostVmLoading.value = true
+  hostVmModalVisible.value = true
+  hostVmList.value = []
+  hostVmFallbackList.value = []
+
+  try {
+    const host = await fetchHostById(hostId)
+    hostVmModalTitle.value = `호스트 VM 목록 - ${host?.name || host?.hostname || hostId}`
+    const hostIdStr = String(hostId)
+    const isVmAssignedToHost = (vm) => {
+      const vmHostId = String(vm?.hostid || '')
+      const vmState = String(vm?.state || '').toLowerCase()
+      // 정책: 현재 host_id가 해당 호스트 + 활성 상태 VM만 표시
+      return vmHostId === hostIdStr && HOST_ACTIVE_VM_STATES.has(vmState)
+    }
+
+    // 1) hostid 직접 조회
+    const directJson = await api('listVirtualMachines', {
+      hostid: hostId,
+      listall: true,
+      projectid: '-1',
+      details: 'min',
+      pagesize: 500
+    })
+    let vms = (directJson?.listvirtualmachinesresponse?.virtualmachine || []).filter(isVmAssignedToHost)
+
+    // 2) hostid 조회가 비면 전체에서 host 매핑 기준으로 재탐색
+    if (!vms.length) {
+      const allJson = await api('listVirtualMachines', {
+        listall: true,
+        projectid: '-1',
+        details: 'min',
+        pagesize: 500
+      })
+      const allVms = allJson?.listvirtualmachinesresponse?.virtualmachine || []
+      vms = allVms.filter(isVmAssignedToHost)
+    }
+
+    hostVmList.value = vms
+
+    // 개발환경 fallback: host 매핑 샘플 제공
+    if (ENABLE_VM_FALLBACK_MOCK && !hostVmList.value.length) {
+      const hostName = host?.name || host?.hostname || hostId
+      hostVmFallbackList.value = buildVmMockList(hostId, hostName)
+    }
+  } catch (e) {
+    // 통일된 UI 정책: 실패 시 토스트 없이 No Data 표시
+    hostVmList.value = []
+    hostVmFallbackList.value = ENABLE_VM_FALLBACK_MOCK
+      ? buildVmMockList(hostId, 'sample')
+      : []
+  } finally {
+    hostVmLoading.value = false
+  }
+}
+
+const getVmOsLogo = (vm) => {
+  const osname = String(vm?.ostypename || vm?.name || '').toLowerCase()
+  if (osname.includes('centos')) return 'centos'
+  if (osname.includes('debian')) return 'debian'
+  if (osname.includes('ubuntu')) return 'ubuntu'
+  if (osname.includes('suse')) return 'suse'
+  if (osname.includes('redhat')) return 'redhat'
+  if (osname.includes('fedora')) return 'fedora'
+  if (osname.includes('windows') || osname.includes('dos')) return 'windows'
+  // Rocky는 전용 브랜드 아이콘이 없어서 Linux 계열로 표현
+  if (osname.includes('rocky') || osname.includes('linux')) return 'linux'
+  if (osname.includes('bsd')) return 'freebsd'
+  if (osname.includes('apple') || osname.includes('mac')) return 'apple'
+  return 'linux'
+}
+
+const isRunningVm = (vm) => {
+  return String(vm?.state || '').toLowerCase() === 'running'
+}
+
+const handleHostActionMenu = (key, item) => {
+  if (typeof key === 'string' && key.startsWith('quick-')) {
+    const idx = Number(key.replace('quick-', ''))
+    const link = getQuickLinks(item)[idx]
+    if (link?.url) window.open(link.url, '_blank')
+    return
+  }
+  if (key === 'host-detail') goToLinkedHost(item)
+  if (key === 'host-vms') openLinkedHostVmModal(item)
+  if (key === 'host-oobm') openLinkedHostOobm(item)
+  if (key === 'host-cube') openLinkedHostCube(item)
+}
+
 // 입력 가능한 최대 높이 사전 계산 (물리적 한계)
 const maxAllowedHeight = computed(() => {
   if (targetRackIndex.value === -1 || targetItemIndex.value === -1) return 42
@@ -751,6 +1262,9 @@ const openDeviceModal = (rIndex, iIndex) => {
     deviceForm.height = 1
     deviceForm.customType = ''
     deviceForm.memo = ''
+    deviceForm.sourceRef = undefined
+    deviceForm.quickLinksText = ''
+    quickLinksError.value = ''
   } else {
     // 수정 모드일 때는 기존 데이터 로드
     deviceForm.type = item.type
@@ -758,6 +1272,12 @@ const openDeviceModal = (rIndex, iIndex) => {
     deviceForm.height = item.height
     deviceForm.customType = item.customType || ''
     deviceForm.memo = item.memo || ''
+    deviceForm.sourceRef = item.sourceRef || undefined
+    deviceForm.quickLinksText = getQuickLinks(item).map(link => `${link.label || ''}|${link.url || ''}`.replace(/^\|/, '')).join('\n')
+    quickLinksError.value = ''
+  }
+  if (!inventoryOptions.value.length) {
+    buildInventoryOptions()
   }
   deviceModalVisible.value = true
 }
@@ -783,15 +1303,46 @@ const submitDeviceModal = () => {
   const rack = parsedRacks.value[rIndex]
   const oldItem = rack.items[iIndex]
 
-  const finalLabel = deviceForm.label || defaultLabels[deviceForm.type] || 'New Device'
-  const finalCustomType = deviceForm.customType || (deviceForm.type === 'custom' ? 'Custom Unit' : '')
+  const rawLabel = String(deviceForm.label || '').trim()
+  const rawCustomType = String(deviceForm.customType || '').trim()
+  const finalLabel = rawLabel || defaultLabels[deviceForm.type] || 'New Device'
+  const finalCustomType = rawCustomType || (deviceForm.type === 'custom' ? 'Custom Unit' : '')
+
+  if (deviceForm.type !== 'blank' && !finalLabel) {
+    message.warning('장비명을 입력해주세요.')
+    return
+  }
+  if (finalLabel.length > 60) {
+    message.warning('장비명은 60자 이하로 입력해주세요.')
+    return
+  }
+  if (deviceForm.type === 'custom' && !rawCustomType) {
+    message.warning('커스텀 타입명을 입력해주세요.')
+    return
+  }
+  if (deviceForm.type === 'custom' && rawCustomType.length > 60) {
+    message.warning('커스텀 타입명은 60자 이하로 입력해주세요.')
+    return
+  }
+  if (!Number.isInteger(deviceForm.height) || deviceForm.height <= 0) {
+    message.warning('장비 높이(U)는 1 이상의 정수만 입력할 수 있습니다.')
+    return
+  }
+  const quickLinkParsed = parseQuickLinksTextWithValidation(deviceForm.quickLinksText)
+  if (quickLinkParsed.errors.length > 0) {
+    quickLinksError.value = quickLinkParsed.errors[0]
+    return
+  }
+  quickLinksError.value = ''
 
   const newItem = {
     type: deviceForm.type,
     label: finalLabel,
     height: deviceForm.height,
     customType: finalCustomType,
-    memo: deviceForm.memo
+    memo: deviceForm.memo,
+    sourceRef: deviceForm.sourceRef || null,
+    quickLinks: quickLinkParsed.links
   }
 
   // 여백(Gap)에 새 장비 추가 시
@@ -843,132 +1394,40 @@ const cloneItem = (rIndex, iIndex) => {
   const rack = parsedRacks.value[rIndex]
   const itemToClone = rack.items[iIndex]
   const neededHeight = itemToClone.height
-
-  // 1. 아래쪽 여백 확인
-  let availableGapBelow = 0
-  let gapsToRemoveBelowCount = 0
-
-  for (let i = iIndex + 1; i < rack.items.length; i++) {
-    if (rack.items[i].type === 'gap') {
-      availableGapBelow += rack.items[i].height
-      gapsToRemoveBelowCount++
-      if (availableGapBelow >= neededHeight) break
+  const newItem = { ...itemToClone }
+
+  const placeIntoGap = (gapIndex, placeAtBottom = false) => {
+    const gap = rack.items[gapIndex]
+    if (!gap || gap.type !== 'gap' || gap.height < neededHeight) return false
+    const remain = gap.height - neededHeight
+    if (placeAtBottom) {
+      const insert = []
+      if (remain > 0) insert.push({ type: 'gap', height: remain })
+      insert.push(newItem)
+      rack.items.splice(gapIndex, 1, ...insert)
     } else {
-      break
+      rack.items.splice(gapIndex, 1, newItem)
+      if (remain > 0) rack.items.splice(gapIndex + 1, 0, { type: 'gap', height: remain })
     }
+    return true
   }
 
-  // 아래쪽으로 복제 가능한 경우
-  if (availableGapBelow >= neededHeight) {
-    const remainingGap = availableGapBelow - neededHeight
-    const newItem = { ...itemToClone }
-
-    // 기존 아래쪽 여백 제거
-    rack.items.splice(iIndex + 1, gapsToRemoveBelowCount)
-    // 복제된 장비 삽입
-    rack.items.splice(iIndex + 1, 0, newItem)
-    // 남은 여백이 있다면 삽입
-    if (remainingGap > 0) {
-      rack.items.splice(iIndex + 2, 0, { type: 'gap', height: remainingGap })
-    }
-    return
+  // 1) 아래쪽 어디든 충분한 gap 우선
+  for (let i = iIndex + 1; i < rack.items.length; i++) {
+    if (rack.items[i].type === 'gap' && placeIntoGap(i, false)) return
   }
 
-  // 2. 아래쪽이 부족하면 위쪽 여백 확인
-  let availableGapAbove = 0
-  let gapsToRemoveAboveCount = 0
-
+  // 2) 위쪽 어디든 충분한 gap (원본 근처에 붙도록 아래쪽 정렬)
   for (let i = iIndex - 1; i >= 0; i--) {
-    if (rack.items[i].type === 'gap') {
-      availableGapAbove += rack.items[i].height
-      gapsToRemoveAboveCount++
-      if (availableGapAbove >= neededHeight) break
-    } else {
-      break
-    }
+    if (rack.items[i].type === 'gap' && placeIntoGap(i, true)) return
   }
 
-  // 위쪽으로 복제 가능한 경우
-  if (availableGapAbove >= neededHeight) {
-    const remainingGap = availableGapAbove - neededHeight
-    const newItem = { ...itemToClone }
-
-    // 위쪽 여백이 시작되는 인덱스 계산
-    const startGapIndex = iIndex - gapsToRemoveAboveCount
-
-    // 기존 위쪽 여백 제거
-    rack.items.splice(startGapIndex, gapsToRemoveAboveCount)
-
-    // 삽입할 아이템 배열 준비 (남은 여백 먼저, 그다음 복제된 장비)
-    const insertItems = []
-    if (remainingGap > 0) {
-      insertItems.push({ type: 'gap', height: remainingGap })
-    }
-    insertItems.push(newItem)
-
-    // 해당 위치에 일괄 삽입
-    rack.items.splice(startGapIndex, 0, ...insertItems)
-    return
+  // 3) 그래도 없으면 랙 전체 검사(방어)
+  for (let i = 0; i < rack.items.length; i++) {
+    if (rack.items[i].type === 'gap' && placeIntoGap(i, false)) return
   }
 
-  // 3. 위/아래 모두 연속된 빈 공간이 부족한 경우
-  message.error(`위/아래 모두 여백이 부족합니다. (필요 공간: ${neededHeight}U)`)
-}
-
-const moveItem = (rIndex, iIndex, direction, isJump = false) => {
-  const rack = parsedRacks.value[rIndex]
-  const items = rack.items
-
-  // 🔼 위로 이동 (direction: -1)
-  if (direction === -1 && iIndex > 0) {
-    const itemAbove = items[iIndex - 1]
-
-    if (itemAbove.type === 'gap') {
-      const moveU = isJump ? itemAbove.height : 1
-
-      itemAbove.height -= moveU
-
-      if (iIndex + 1 < items.length && items[iIndex + 1].type === 'gap') {
-        items[iIndex + 1].height += moveU
-      } else {
-        items.splice(iIndex + 1, 0, { type: 'gap', height: moveU })
-      }
-
-      if (itemAbove.height <= 0) {
-        items.splice(iIndex - 1, 1)
-      }
-    } else {
-      const temp = items[iIndex]
-      items[iIndex] = items[iIndex - 1]
-      items[iIndex - 1] = temp
-    }
-  } else if (direction === 1 && iIndex < items.length - 1) {
-    // 🔽 아래로 이동 (direction: 1) - 주석을 괄호 안으로 넣어서 에러 원천 차단!
-    const itemBelow = items[iIndex + 1]
-
-    if (itemBelow.type === 'gap') {
-      const moveU = isJump ? itemBelow.height : 1
-
-      itemBelow.height -= moveU
-
-      let gapInserted = false
-      if (iIndex > 0 && items[iIndex - 1].type === 'gap') {
-        items[iIndex - 1].height += moveU
-      } else {
-        items.splice(iIndex, 0, { type: 'gap', height: moveU })
-        gapInserted = true
-      }
-
-      const bottomGapIndex = gapInserted ? iIndex + 2 : iIndex + 1
-      if (items[bottomGapIndex].height <= 0) {
-        items.splice(bottomGapIndex, 1)
-      }
-    } else {
-      const temp = items[iIndex]
-      items[iIndex] = items[iIndex + 1]
-      items[iIndex + 1] = temp
-    }
-  }
+  message.error(`랙 내에 여유 공간이 부족합니다. (필요 공간: ${neededHeight}U)`)
 }
 
 const deleteItem = (rIndex, iIndex) => {
@@ -1175,10 +1634,15 @@ onBeforeUnmount(() => {
   display: flex;
   gap: 30px;
   align-items: flex-start;
-  overflow-x: auto;
+  width: max-content;
   padding-bottom: 20px; /* 가로 스크롤바와 랙 사이 여백 */
 }
 
+.rack-zoom-wrapper {
+  display: inline-block;
+  width: max-content;
+}
+
 /* 개별 랙 래퍼 */
 .rack-wrapper {
   background: #36393f;
@@ -1186,8 +1650,8 @@ onBeforeUnmount(() => {
   padding: 15px;
   box-shadow: 0 4px 10px rgba(0,0,0,0.3);
   flex-shrink: 0;
-  width: 345px; /* 기존 UI 규격에 맞춰 넓이 조정 */
-  flex: 0 0 345px
+  width: 414px; /* 기존 폭 대비 20% 확장 */
+  flex: 0 0 414px
 }
 
 /* 랙 헤더 */
@@ -1228,7 +1692,7 @@ onBeforeUnmount(() => {
 
 /* 눈금자 기둥 영역 */
 .rack-ruler {
-  width: 24px; /* 눈금자 너비 */
+  width: 29px; /* 기존 폭 대비 20% 확장 */
   background: #232428; /* 프레임보다 아주 살짝 어두운 색 */
   border-right: 2px solid #111; /* 장비 영역과의 경계선 */
   display: flex;
@@ -1257,7 +1721,7 @@ onBeforeUnmount(() => {
 
 /* 랙 내부 프레임 */
 .rack-frame {
-  width: 280px;
+  width: 336px; /* 기존 폭 대비 20% 확장 */
   background: #2c2f35;
   border: 4px solid #3f434b;
   /* 프레임 자체 모서리를 둥글게 */
@@ -1484,8 +1948,9 @@ onBeforeUnmount(() => {
 .device-name-tag {
   position: absolute;
   top: 50%;
-  left: 60%;
-  transform: translate(-50%, -50%);
+  left: 56px;
+  right: 56px;
+  transform: translateY(-50%);
   color: #ffffff;
   font-size: 15px;
   font-weight: bold;
@@ -1493,12 +1958,21 @@ onBeforeUnmount(() => {
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 1);
   pointer-events: none;
   display: flex;
+  justify-content: center;
   align-items: center;
-  white-space: nowrap;
   z-index: 5;
   letter-spacing: -0.2px;
 }
 
+.tag-text {
+  display: inline-block;
+  max-width: calc(100% - 44px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+}
+
 .tag-badge {
   background: rgba(0,0,0,0.5);
   padding: 2px 6px;
@@ -1573,7 +2047,82 @@ onBeforeUnmount(() => {
   color: white;
 }
 
+.device-more-btn {
+  width: 30px !important;
+  height: 30px !important;
+  border-radius: 8px !important;
+  background: rgba(64, 169, 255, 0.2) !important;
+}
+
+.device-more-btn :deep(.anticon) {
+  font-size: 18px !important;
+}
+
 .device-content:hover .device-actions {
   opacity: 1;
 }
+
+.host-vm-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 12px;
+}
+
+.host-vm-scroll-area {
+  max-height: 52vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 4px;
+}
+
+.host-vm-empty-wrap {
+  min-height: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.host-vm-card {
+  border: 1px solid #d9e2ec;
+  border-radius: 10px;
+  background: #f9fbff;
+  padding: 10px 12px;
+}
+
+.host-vm-card-inactive {
+  background: #f3f4f6;
+  border-color: #d1d5db;
+}
+
+.host-vm-card-inactive .host-vm-icon {
+  color: #9ca3af;
+}
+
+.host-vm-card-inactive .host-vm-name {
+  color: #6b7280;
+}
+
+.host-vm-card-inactive .host-vm-meta {
+  color: #9ca3af;
+}
+
+.host-vm-icon {
+  font-size: 22px;
+  color: #3b82f6;
+  margin-bottom: 6px;
+}
+
+.host-vm-name {
+  font-weight: 700;
+  color: #1f2937;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.host-vm-meta {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #6b7280;
+}
 </style>
diff --git a/ui/vue.config.js b/ui/vue.config.js
index 9cae2ff66fb1..318ef86aefe8 100644
--- a/ui/vue.config.js
+++ b/ui/vue.config.js
@@ -138,7 +138,7 @@ const vueConfig = {
     port: 5050,
     proxy: {
       '/client': {
-        target: process.env.CS_URL || 'http://localhost:8080',
+        target: process.env.CS_URL || 'http://10.10.218.29:8080',
         secure: false,
         ws: false,
         changeOrigin: true,

From f6aec2675923b3764680debbb256b47d1d6a09fd Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Wed, 6 May 2026 11:00:08 +0900
Subject: [PATCH 06/17] =?UTF-8?q?[=EB=9E=99=20=EC=8B=9C=EA=B0=81=ED=99=94]?=
 =?UTF-8?q?=20=EB=93=9C=EB=9E=98=EA=B7=B8=EB=A1=9C=20=EC=9E=A5=EC=B9=98?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=99=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD.=20=EC=9E=A5=EC=B9=98=EB=A7=88=EB=8B=A4=20=EC=BB=A4?=
 =?UTF-8?q?=EC=8A=A4=ED=85=80=20=EB=A7=81=ED=81=AC=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EA=B0=80=EB=8A=A5.=20=ED=98=B8=EC=8A=A4=ED=8A=B8=EC=9D=98=20?=
 =?UTF-8?q?=EA=B2=BD=EC=9A=B0=20=EC=9A=B4=EC=98=81=EC=9E=A5=EB=B9=84?=
 =?UTF-8?q?=EC=99=80=20=EB=A7=A4=EC=B9=AD=ED=95=A0=20=EC=88=98=20=EC=9E=88?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80.?=
 =?UTF-8?q?=20=ED=98=B8=EC=8A=A4=ED=8A=B8=20=ED=8F=AC=ED=84=B8=20=EB=A7=81?=
 =?UTF-8?q?=ED=81=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/views/infra/zone/RackDiagramTab.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/views/infra/zone/RackDiagramTab.vue b/ui/src/views/infra/zone/RackDiagramTab.vue
index b7f13774db1e..e3d47357c972 100644
--- a/ui/src/views/infra/zone/RackDiagramTab.vue
+++ b/ui/src/views/infra/zone/RackDiagramTab.vue
@@ -833,7 +833,7 @@ const hostVmList = ref([])
 const hostVmFallbackList = ref([])
 const dragSource = ref({ rIndex: -1, iIndex: -1 })
 const quickLinksError = ref('')
-const ENABLE_VM_FALLBACK_MOCK = false
+const ENABLE_VM_FALLBACK_MOCK = true
 const HOST_ACTIVE_VM_STATES = new Set(['running', 'starting', 'stopping', 'migrating'])
 
 const buildVmMockList = (hostId, hostName = 'sample') => {

From 77ea1b699c8e2a48d690b5c0029f83f3a03b4886 Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Fri, 8 May 2026 16:59:38 +0900
Subject: [PATCH 07/17] =?UTF-8?q?[=EB=9E=99=20=EC=8B=9C=EA=B0=81=ED=99=94]?=
 =?UTF-8?q?=20(1)=EB=8B=A4=EA=B5=AD=EC=96=B4=20=EC=88=98=EC=A0=95=20(2)VM?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99=20=EA=B8=B0=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/public/locales/en.json                  | 115 ++++++++-
 ui/public/locales/ko_KR.json               | 115 ++++++++-
 ui/src/views/infra/zone/RackDiagramTab.vue | 258 +++++++++++----------
 3 files changed, 366 insertions(+), 122 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 7aabda3d9fb8..3df858a0214e 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -5057,5 +5057,118 @@
 "message.no.alerts": "There are no alerts to display right now.",
 "message.solution.description.placeholder": "Enter the solution in Markdown format.",
 "message.solution.preview.empty": "There is no content to preview.",
-"message.solution.summary.placeholder": "Enter a brief summary of the solution."
+"message.solution.summary.placeholder": "Enter a brief summary of the solution.",
+"rackDiagram.save": "Save",
+"rackDiagram.searchPlaceholder": "Search device name, IP, memo...",
+"rackDiagram.addRack": "Add Rack",
+"rackDiagram.backupJson": "Backup to JSON",
+"rackDiagram.backup": "Backup",
+"rackDiagram.restoreJson": "Import JSON file",
+"rackDiagram.restore": "Restore",
+"rackDiagram.capturePng": "Capture PNG image",
+"rackDiagram.capture": "Capture",
+"rackDiagram.zoom": "Zoom",
+"rackDiagram.emptyRack": "No rack is registered. Click [Add Rack] above.",
+"rackDiagram.moveLeft": "Move left",
+"rackDiagram.moveRight": "Move right",
+"rackDiagram.cloneRack": "Clone rack",
+"rackDiagram.edit": "Edit",
+"rackDiagram.deleteConfirm": "Are you sure you want to delete?",
+"rackDiagram.gapAddDevice": "Gap (click to add device)",
+"rackDiagram.cloneDevice": "Clone device",
+"rackDiagram.moveToOtherRack": "Move to another rack",
+"rackDiagram.settings": "Settings",
+"rackDiagram.deviceActions": "Device actions",
+"rackDiagram.hostDetail": "Host details",
+"rackDiagram.hostVmList": "Host VM list",
+"rackDiagram.hostOobmPortal": "Open OOBM portal",
+"rackDiagram.hostCubePortal": "Open Cube portal",
+"rackDiagram.delete": "Delete",
+"rackDiagram.editRack": "Edit rack settings",
+"rackDiagram.rackName": "Rack name",
+"rackDiagram.rackNamePlaceholder": "e.g. Server Rack 1",
+"rackDiagram.totalHeight": "Total height (U)",
+"rackDiagram.moveDeviceTitle": "Move Device (to another rack)",
+"rackDiagram.moveDeviceDesc1": "When you select a target rack, ",
+"rackDiagram.moveDeviceDesc2": "it is automatically placed into available gap",
+"rackDiagram.moveDeviceDesc3": ".",
+"rackDiagram.targetRack": "Target rack",
+"rackDiagram.selectRack": "Select a rack",
+"rackDiagram.needGapCheck": "remaining gap check needed",
+"rackDiagram.deviceConfig": "Device settings",
+"rackDiagram.deviceType": "Device type",
+"rackDiagram.deviceTypeServer": "Server",
+"rackDiagram.deviceTypeSwitch": "Switch",
+"rackDiagram.deviceTypeStorage": "Storage",
+"rackDiagram.deviceTypeFirewall": "Firewall",
+"rackDiagram.deviceTypePatch": "Patch Panel",
+"rackDiagram.deviceTypeBlank": "Blank Panel",
+"rackDiagram.deviceTypeCustom": "Custom",
+"rackDiagram.deviceName": "Device name",
+"rackDiagram.deviceNamePlaceholder": "Enter device name.",
+"rackDiagram.selectInfraAsset": "Select infra asset",
+"rackDiagram.selectHost": "Select host.",
+"rackDiagram.customTypeName": "Custom type name",
+"rackDiagram.customTypePlaceholder": "e.g. Router",
+"rackDiagram.height": "Height (U)",
+"rackDiagram.maxAllowedHeightPrefix": "Maximum allowed height at this position is",
+"rackDiagram.maxAllowedHeightSuffix": ".",
+"rackDiagram.deviceMemo": "Device memo / details",
+"rackDiagram.deviceMemoPlaceholder": "Enter IP, purpose, owner, etc.",
+"rackDiagram.quickLinks": "Custom shortcut links (one per line, format: Name|URL)",
+"rackDiagram.quickLinksPlaceholder": "e.g. iDRAC|https://10.0.0.10\nNAS|https://nas.local",
+"rackDiagram.defaultRackName": "Main Rack",
+"rackDiagram.copySuffix": "Copy",
+"rackDiagram.newDevice": "New Device",
+"rackDiagram.customUnit": "Custom Unit",
+"rackDiagram.defaultLabelServer": "Server",
+"rackDiagram.defaultLabelSwitch": "Switch",
+"rackDiagram.defaultLabelStorage": "Storage",
+"rackDiagram.defaultLabelFirewall": "Firewall",
+"rackDiagram.defaultLabelPatch": "Patch Panel",
+"rackDiagram.defaultLabelPdu": "PDU",
+"rackDiagram.defaultLabelUps": "UPS",
+"rackDiagram.defaultLabelBlank": "Blank Panel",
+"rackDiagram.defaultLabelCustom": "Custom Device",
+"rackDiagram.msg.noAvailableZone": "No available zone.",
+"rackDiagram.msg.zoneLoadFailed": "Failed to load zone information.",
+"rackDiagram.msg.rackLoaded": "Rack layout loaded.",
+"rackDiagram.msg.rackLoadFailed": "Failed to load rack layout.",
+"rackDiagram.msg.noZoneToSave": "No zone information to save.",
+"rackDiagram.msg.rackSaved": "Rack layout saved to DB.",
+"rackDiagram.msg.rackSaveFailed": "Failed to save rack layout.",
+"rackDiagram.msg.noRackToSaveImage": "No rack layout to save.",
+"rackDiagram.msg.exportingImage": "Converting image...",
+"rackDiagram.msg.imageSaved": "Image saved.",
+"rackDiagram.msg.imageSaveFailed": "Failed to save image.",
+"rackDiagram.msg.noRackToExport": "No rack data to export.",
+"rackDiagram.msg.jsonDownloaded": "JSON file downloaded.",
+"rackDiagram.msg.importSuccess": "Data imported successfully.",
+"rackDiagram.msg.invalidFileFormat": "Invalid file format (not an array).",
+"rackDiagram.msg.jsonParseFailed": "Failed to parse JSON file. It may be corrupted.",
+"rackDiagram.msg.rackCloned": "Rack cloned.",
+"rackDiagram.msg.enterRackName": "Please enter rack name.",
+"rackDiagram.msg.rackNameMax": "Rack name must be 60 characters or less.",
+"rackDiagram.msg.rackHeightRange": "Total height must be an integer between 10 and 50.",
+"rackDiagram.msg.duplicateRackName": "A rack with the same name already exists.",
+"rackDiagram.msg.notEnoughGapOnTarget": "Not enough contiguous gap in target rack. ({height}U needed)",
+"rackDiagram.msg.dropCalcFailed": "Failed to calculate drop position. Try again.",
+"rackDiagram.msg.oobmNotFound": "OOBM portal info not found for selected host.",
+"rackDiagram.msg.oobmLoadFailed": "Failed to load OOBM portal info.",
+"rackDiagram.msg.hostIpNotFound": "IP info not found for selected host.",
+"rackDiagram.msg.cubeLoadFailed": "Failed to load Cube portal info.",
+"rackDiagram.msg.quickLinkUrlEmpty": "Line {line}: URL is empty. (format: Name|URL)",
+"rackDiagram.msg.quickLinkUrlInvalid": "Line {line}: URL must start with http:// or https://.",
+"rackDiagram.msg.enterDeviceName": "Please enter device name.",
+"rackDiagram.msg.deviceNameMax": "Device name must be 60 characters or less.",
+"rackDiagram.msg.enterCustomType": "Please enter custom type name.",
+"rackDiagram.msg.customTypeMax": "Custom type name must be 60 characters or less.",
+"rackDiagram.msg.deviceHeightInteger": "Device height must be an integer of 1 or more.",
+"rackDiagram.msg.deviceLargerThanGap": "Cannot add a device larger than selected gap.",
+"rackDiagram.msg.notEnoughGapBelow": "Not enough gap below to increase size.",
+"rackDiagram.msg.notEnoughSpaceInRack": "Not enough free space in rack. ({height}U needed)",
+"rackDiagram.msg.noOtherRackToMove": "No other rack to move to. Add a new rack first.",
+"rackDiagram.msg.selectTargetRack": "Select target rack.",
+"rackDiagram.msg.targetRackNoSpace": "Cannot move. '{rack}' has no {height}U space.",
+"rackDiagram.msg.deviceMoved": "'{label}' moved to '{rack}'."
 }
diff --git a/ui/public/locales/ko_KR.json b/ui/public/locales/ko_KR.json
index 88fa690b0336..76eceee45c68 100644
--- a/ui/public/locales/ko_KR.json
+++ b/ui/public/locales/ko_KR.json
@@ -5059,5 +5059,118 @@
 "message.no.alerts": "\ud604\uc7ac \ud45c\uc2dc\ud560 \uacbd\ubcf4\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.",
 "message.solution.description.placeholder": "\ub9c8\ud06c\ub2e4\uc6b4 \ud615\uc2dd\uc73c\ub85c \ud574\uacb0 \ubc29\uc548\uc744 \uc785\ub825\ud569\ub2c8\ub2e4.",
 "message.solution.preview.empty": "\ubbf8\ub9ac\ubcf4\uae30\ud560 \ub0b4\uc6a9\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.",
-"message.solution.summary.placeholder": "\ud574\uacb0 \ubc29\uc548\uc758 \uac04\ub2e8\ud55c \uc694\uc57d\uc744 \uc785\ub825\ud569\ub2c8\ub2e4."
+"message.solution.summary.placeholder": "\ud574\uacb0 \ubc29\uc548\uc758 \uac04\ub2e8\ud55c \uc694\uc57d\uc744 \uc785\ub825\ud569\ub2c8\ub2e4.",
+"rackDiagram.save": "\uc800\uc7a5",
+"rackDiagram.searchPlaceholder": "\uc7a5\ube44\uba85, IP, \uba54\ubaa8 \uac80\uc0c9...",
+"rackDiagram.addRack": "\uc0c8 \ub799 \ucd94\uac00",
+"rackDiagram.backupJson": "JSON \ud30c\uc77c\ub85c \ubc31\uc5c5",
+"rackDiagram.backup": "\ubc31\uc5c5",
+"rackDiagram.restoreJson": "JSON \ud30c\uc77c \ubd88\ub7ec\uc624\uae30",
+"rackDiagram.restore": "\ubcf5\uc6d0",
+"rackDiagram.capturePng": "PNG \uc774\ubbf8\uc9c0 \ucea1\ucc98",
+"rackDiagram.capture": "\ucea1\ucc98",
+"rackDiagram.zoom": "Zoom",
+"rackDiagram.emptyRack": "\ub4f1\ub85d\ub41c \ub799\uc774 \uc5c6\uc2b5\ub2c8\ub2e4. \uc0c1\ub2e8\uc758 [\uc0c8 \ub799 \ucd94\uac00] \ubc84\ud2bc\uc744 \ub20c\ub7ec\uc8fc\uc138\uc694.",
+"rackDiagram.moveLeft": "\uc67c\ucabd \uc774\ub3d9",
+"rackDiagram.moveRight": "\uc624\ub978\ucabd \uc774\ub3d9",
+"rackDiagram.cloneRack": "\ub799 \ubcf5\uc81c",
+"rackDiagram.edit": "\uc218\uc815",
+"rackDiagram.deleteConfirm": "\uc0ad\uc81c\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?",
+"rackDiagram.gapAddDevice": "\uc5ec\ubc31 (\ud074\ub9ad\ud558\uc5ec \uc7a5\ube44 \ucd94\uac00)",
+"rackDiagram.cloneDevice": "\uc7a5\ube44 \ubcf5\uc81c",
+"rackDiagram.moveToOtherRack": "\ub2e4\ub978 \ub799\uc73c\ub85c \uc774\ub3d9",
+"rackDiagram.settings": "\uc124\uc815",
+"rackDiagram.deviceActions": "\uc7a5\uce58 \uc791\uc5c5",
+"rackDiagram.hostDetail": "\ud638\uc2a4\ud2b8 \uc0c1\uc138",
+"rackDiagram.hostVmList": "\ud638\uc2a4\ud2b8 VM \ubaa9\ub85d",
+"rackDiagram.hostOobmPortal": "OOBM \ud3ec\ud138 \uc811\uc18d",
+"rackDiagram.hostCubePortal": "Cube \ud3ec\ud138 \uc811\uc18d",
+"rackDiagram.delete": "\uc0ad\uc81c",
+"rackDiagram.editRack": "\ub799 \uc124\uc815 \uc218\uc815",
+"rackDiagram.rackName": "\ub799 \uc774\ub984 (Name)",
+"rackDiagram.rackNamePlaceholder": "\uc608: Server Rack 1",
+"rackDiagram.totalHeight": "\ucd1d \ub192\uc774 (U)",
+"rackDiagram.moveDeviceTitle": "\uc7a5\ube44 \uc774\ub3d9 (\ub2e4\ub978 \ub799\uc73c\ub85c \ubcf4\ub0b4\uae30)",
+"rackDiagram.moveDeviceDesc1": "\uc774\ub3d9\ud560 \ub300\uc0c1 \ub799\uc744 \uc120\ud0dd\ud558\uba74, ",
+"rackDiagram.moveDeviceDesc2": "\ube48 \uacf5\uac04(Gap)\uc744 \ucc3e\uc544 \uc790\ub3d9\uc73c\ub85c \ubc30\uce58",
+"rackDiagram.moveDeviceDesc3": "\ub429\ub2c8\ub2e4.",
+"rackDiagram.targetRack": "\ub300\uc0c1 \ub799 \uc120\ud0dd",
+"rackDiagram.selectRack": "\ub799\uc744 \uc120\ud0dd\ud558\uc138\uc694",
+"rackDiagram.needGapCheck": "\uc794\uc5ec \uc5ec\ubc31 \ud655\uc778 \ud544\uc694",
+"rackDiagram.deviceConfig": "\uc7a5\ube44 \uc124\uc815",
+"rackDiagram.deviceType": "\uc7a5\ube44 \uc885\ub958",
+"rackDiagram.deviceTypeServer": "\uc11c\ubc84 (Server)",
+"rackDiagram.deviceTypeSwitch": "\uc2a4\uc704\uce58 (Switch)",
+"rackDiagram.deviceTypeStorage": "\uc2a4\ud1a0\ub9ac\uc9c0 (Storage)",
+"rackDiagram.deviceTypeFirewall": "\ubc29\ud654\ubcbd (Firewall)",
+"rackDiagram.deviceTypePatch": "\ud328\uce58\ud328\ub110 (Patch Panel)",
+"rackDiagram.deviceTypeBlank": "\ube14\ub7ad\ud06c \ud328\ub110 (Blank)",
+"rackDiagram.deviceTypeCustom": "\ucee4\uc2a4\ud140 (Custom)",
+"rackDiagram.deviceName": "\uc7a5\ube44\uba85 (Label)",
+"rackDiagram.deviceNamePlaceholder": "\uc7a5\ube44\uba85\uc744 \uc785\ub825\ud558\uc138\uc694.",
+"rackDiagram.selectInfraAsset": "\uc778\ud504\ub77c \uc790\uc0b0 \uc120\ud0dd",
+"rackDiagram.selectHost": "Host\ub97c \uc120\ud0dd\ud558\uc138\uc694.",
+"rackDiagram.customTypeName": "\ucee4\uc2a4\ud140 \ud0c0\uc785\uba85",
+"rackDiagram.customTypePlaceholder": "\uc608: Router",
+"rackDiagram.height": "\ub192\uc774 (U)",
+"rackDiagram.maxAllowedHeightPrefix": "\ud604\uc7ac \uc774 \uc704\uce58\uc758 \ucd5c\ub300 \ud5c8\uc6a9 \ub192\uc774\ub294",
+"rackDiagram.maxAllowedHeightSuffix": "\uc785\ub2c8\ub2e4.",
+"rackDiagram.deviceMemo": "\uc7a5\ube44 \uba54\ubaa8 / \uc0c1\uc138 \uc124\uba85",
+"rackDiagram.deviceMemoPlaceholder": "IP \uc8fc\uc18c, \uc6a9\ub3c4, \ub2f4\ub2f9\uc790 \ub4f1\uc744 \uc785\ub825\ud558\uc138\uc694",
+"rackDiagram.quickLinks": "\ucee4\uc2a4\ud140 \ubc14\ub85c\uac00\uae30 \ub9c1\ud06c (\ud55c \uc904\uc5d0 \ud558\ub098, \ud615\uc2dd: \uc774\ub984|URL)",
+"rackDiagram.quickLinksPlaceholder": "\uc608: iDRAC|https://10.0.0.10\nNAS|https://nas.local",
+"rackDiagram.defaultRackName": "Main Rack",
+"rackDiagram.copySuffix": "\ubcf5\uc0ac\ubcf8",
+"rackDiagram.newDevice": "\uc0c8 \uc7a5\ube44",
+"rackDiagram.customUnit": "\ucee4\uc2a4\ud140 \uc720\ub2db",
+"rackDiagram.defaultLabelServer": "Server",
+"rackDiagram.defaultLabelSwitch": "Switch",
+"rackDiagram.defaultLabelStorage": "Storage",
+"rackDiagram.defaultLabelFirewall": "Firewall",
+"rackDiagram.defaultLabelPatch": "Patch Panel",
+"rackDiagram.defaultLabelPdu": "PDU",
+"rackDiagram.defaultLabelUps": "UPS",
+"rackDiagram.defaultLabelBlank": "Blank Panel",
+"rackDiagram.defaultLabelCustom": "Custom Device",
+"rackDiagram.msg.noAvailableZone": "\uc0ac\uc6a9 \uac00\ub2a5\ud55c Zone\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.zoneLoadFailed": "Zone \uc815\ubcf4\ub97c \ubd88\ub7ec\uc624\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.rackLoaded": "\ub799 \uad6c\uc131\uc744 \ubd88\ub7ec\uc654\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.rackLoadFailed": "\ub799 \uad6c\uc131\uc744 \ubd88\ub7ec\uc624\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.noZoneToSave": "\uc800\uc7a5\ud560 Zone \uc815\ubcf4\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.rackSaved": "\ub799 \uad6c\uc131\uc774 DB\uc5d0 \uc548\uc804\ud558\uac8c \uc800\uc7a5\ub418\uc5c8\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.rackSaveFailed": "\ub799 \uad6c\uc131 \uc800\uc7a5\uc5d0 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.noRackToSaveImage": "\uc800\uc7a5\ud560 \ub799 \uad6c\uc131\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.exportingImage": "\uc774\ubbf8\uc9c0 \ubcc0\ud658 \uc911...",
+"rackDiagram.msg.imageSaved": "\uc774\ubbf8\uc9c0 \uc800\uc7a5\uc774 \uc644\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.imageSaveFailed": "\uc774\ubbf8\uc9c0 \uc800\uc7a5\uc5d0 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.noRackToExport": "\ub0b4\ubcf4\ub0bc \ub799 \ub370\uc774\ud130\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.jsonDownloaded": "JSON \ud30c\uc77c\uc774 \ub2e4\uc6b4\ub85c\ub4dc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.importSuccess": "\uc131\uacf5\uc801\uc73c\ub85c \ub370\uc774\ud130\ub97c \ubd88\ub7ec\uc654\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.invalidFileFormat": "\uc720\ud6a8\ud558\uc9c0 \uc54a\uc740 \ud30c\uc77c \ud615\uc2dd\uc785\ub2c8\ub2e4. (\ubc30\uc5f4\uc774 \uc544\ub2d8)",
+"rackDiagram.msg.jsonParseFailed": "JSON \ud30c\uc77c \ud30c\uc2f1\uc5d0 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4. \ud30c\uc77c\uc774 \uc190\uc0c1\ub418\uc5c8\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.rackCloned": "\ub799\uc774 \ubcf5\uc81c\ub418\uc5c8\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.enterRackName": "\ub799 \uc774\ub984\uc744 \uc785\ub825\ud574\uc8fc\uc138\uc694.",
+"rackDiagram.msg.rackNameMax": "\ub799 \uc774\ub984\uc740 60\uc790 \uc774\ud558\ub85c \uc785\ub825\ud574\uc8fc\uc138\uc694.",
+"rackDiagram.msg.rackHeightRange": "\ucd1d \ub192\uc774(U)\ub294 10~50 \uc0ac\uc774\uc758 \uc815\uc218\ub9cc \uc785\ub825\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.duplicateRackName": "\ub3d9\uc77c\ud55c \ub799 \uc774\ub984\uc774 \uc774\ubbf8 \uc874\uc7ac\ud569\ub2c8\ub2e4.",
+"rackDiagram.msg.notEnoughGapOnTarget": "\ub300\uc0c1 \ub799\uc758 \uc5f0\uc18d \uc5ec\ubc31\uc774 \ubd80\uc871\ud569\ub2c8\ub2e4. (\ud544\uc694 {height}U)",
+"rackDiagram.msg.dropCalcFailed": "\ub4dc\ub86d \uc704\uce58 \uacc4\uc0b0\uc5d0 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4. \ub2e4\uc2dc \uc2dc\ub3c4\ud574\uc8fc\uc138\uc694.",
+"rackDiagram.msg.oobmNotFound": "\uc120\ud0dd\ud55c \ud638\uc2a4\ud2b8\uc758 OOBM \ud3ec\ud138 \uc815\ubcf4\ub97c \ucc3e\uc744 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.oobmLoadFailed": "OOBM \ud3ec\ud138 \uc815\ubcf4\ub97c \ubd88\ub7ec\uc624\uc9c0 \ubabb\ud588\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.hostIpNotFound": "\uc120\ud0dd\ud55c \ud638\uc2a4\ud2b8\uc758 IP \uc815\ubcf4\ub97c \ucc3e\uc744 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.cubeLoadFailed": "Cube \ud3ec\ud138 \uc815\ubcf4\ub97c \ubd88\ub7ec\uc624\uc9c0 \ubabb\ud588\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.quickLinkUrlEmpty": "{line}\ud589: URL\uc774 \ube44\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. (\ud615\uc2dd: \uc774\ub984|URL)",
+"rackDiagram.msg.quickLinkUrlInvalid": "{line}\ud589: URL\uc740 http:// \ub610\ub294 https:// \ub85c \uc2dc\uc791\ud574\uc57c \ud569\ub2c8\ub2e4.",
+"rackDiagram.msg.enterDeviceName": "\uc7a5\ube44\uba85\uc744 \uc785\ub825\ud574\uc8fc\uc138\uc694.",
+"rackDiagram.msg.deviceNameMax": "\uc7a5\ube44\uba85\uc740 60\uc790 \uc774\ud558\ub85c \uc785\ub825\ud574\uc8fc\uc138\uc694.",
+"rackDiagram.msg.enterCustomType": "\ucee4\uc2a4\ud140 \ud0c0\uc785\uba85\uc744 \uc785\ub825\ud574\uc8fc\uc138\uc694.",
+"rackDiagram.msg.customTypeMax": "\ucee4\uc2a4\ud140 \ud0c0\uc785\uba85\uc740 60\uc790 \uc774\ud558\ub85c \uc785\ub825\ud574\uc8fc\uc138\uc694.",
+"rackDiagram.msg.deviceHeightInteger": "\uc7a5\ube44 \ub192\uc774(U)\ub294 1 \uc774\uc0c1\uc758 \uc815\uc218\ub9cc \uc785\ub825\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.deviceLargerThanGap": "\uc120\ud0dd\ud55c \uc5ec\ubc31\ubcf4\ub2e4 \ud070 \uc7a5\ube44\ub294 \ucd94\uac00\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.notEnoughGapBelow": "\uc544\ub798\ucabd \uc5ec\ubc31\uc774 \ubd80\uc871\ud558\uc5ec \ud06c\uae30\ub97c \ub298\ub9b4 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.notEnoughSpaceInRack": "\ub799 \ub0b4\uc5d0 \uc5ec\uc720 \uacf5\uac04\uc774 \ubd80\uc871\ud569\ub2c8\ub2e4. (\ud544\uc694 \uacf5\uac04: {height}U)",
+"rackDiagram.msg.noOtherRackToMove": "\uc774\ub3d9\ud560 \ub2e4\ub978 \ub799\uc774 \uc5c6\uc2b5\ub2c8\ub2e4. [\uc0c8 \ub799 \ucd94\uac00]\ub97c \uba3c\uc800 \ud574\uc8fc\uc138\uc694.",
+"rackDiagram.msg.selectTargetRack": "\uc774\ub3d9\ud560 \ub300\uc0c1 \ub799\uc744 \uc120\ud0dd\ud574\uc8fc\uc138\uc694.",
+"rackDiagram.msg.targetRackNoSpace": "'{rack}'\uc5d0 {height}U \uacf5\uac04\uc774 \ubd80\uc871\ud558\uc5ec \uc774\ub3d9\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.deviceMoved": "'{label}' \uc7a5\ube44\uac00 '{rack}'(\uc73c)\ub85c \uc774\ub3d9\ub418\uc5c8\uc2b5\ub2c8\ub2e4."
 }
diff --git a/ui/src/views/infra/zone/RackDiagramTab.vue b/ui/src/views/infra/zone/RackDiagramTab.vue
index e3d47357c972..0b9793ef87d7 100644
--- a/ui/src/views/infra/zone/RackDiagramTab.vue
+++ b/ui/src/views/infra/zone/RackDiagramTab.vue
@@ -5,32 +5,32 @@
       <div class="toolbar-left">
         <a-space wrap>
           <a-button type="primary" @click="saveRackData" :loading="saving" :disabled="!isDirty">
-            <SaveOutlined /> 저장
+            <SaveOutlined /> {{ t('rackDiagram.save') }}
           </a-button>
 
           <a-divider type="vertical" class="toolbar-divider" />
 
           <a-input-search
             v-model:value="searchQuery"
-            placeholder="장비명, IP, 메모 검색..."
+            :placeholder="t('rackDiagram.searchPlaceholder')"
             style="width: 200px;"
             allow-clear
           />
 
           <a-button type="dashed" @click="openRackModal('add')">
-            <PlusOutlined /> 새 랙 추가
+            <PlusOutlined /> {{ t('rackDiagram.addRack') }}
           </a-button>
 
           <a-divider type="vertical" class="toolbar-divider" />
 
-          <a-button @click="exportToJson" title="JSON 파일로 백업">
-            <FileTextOutlined /> 백업
+          <a-button @click="exportToJson" :title="t('rackDiagram.backupJson')">
+            <FileTextOutlined /> {{ t('rackDiagram.backup') }}
           </a-button>
-          <a-button @click="triggerImport" title="JSON 파일 불러오기">
-            <UploadOutlined /> 복원
+          <a-button @click="triggerImport" :title="t('rackDiagram.restoreJson')">
+            <UploadOutlined /> {{ t('rackDiagram.restore') }}
           </a-button>
-          <a-button @click="exportToImage" title="PNG 이미지 캡처">
-            <CameraOutlined /> 캡처
+          <a-button @click="exportToImage" :title="t('rackDiagram.capturePng')">
+            <CameraOutlined /> {{ t('rackDiagram.capture') }}
           </a-button>
         </a-space>
 
@@ -38,7 +38,7 @@
       </div>
 
       <div class="toolbar-right" style="display: flex; align-items: center;">
-        <span class="zoom-label" style="margin-right: 8px;">Zoom:</span>
+        <span class="zoom-label" style="margin-right: 8px;">{{ t('rackDiagram.zoom') }}:</span>
 
         <a-input-number
           v-model:value="zoomPercent"
@@ -64,7 +64,7 @@
       <div class="rack-canvas" style="overflow: auto; min-height: 600px; padding: 20px; background: #eef0f4;">
         <div class="rack-zoom-wrapper" :style="{ zoom: zoomLevel }">
 
-          <a-empty v-if="!parsedRacks.length" :description="'등록된 랙이 없습니다. 상단의 [새 랙 추가] 버튼을 눌러주세요.'" style="margin-top: 50px;" />
+          <a-empty v-if="!parsedRacks.length" :description="t('rackDiagram.emptyRack')" style="margin-top: 50px;" />
 
           <div class="rack-container" v-else>
             <div class="rack-wrapper" v-for="(rack, rIndex) in parsedRacks" :key="rIndex">
@@ -81,19 +81,19 @@
                   </a-tooltip>
 
                   <div class="rack-header-actions">
-                    <a-button size="small" type="text" @click="moveRack(rIndex, -1)" :disabled="rIndex === 0" title="왼쪽 이동">
+                    <a-button size="small" type="text" @click="moveRack(rIndex, -1)" :disabled="rIndex === 0" :title="t('rackDiagram.moveLeft')">
                       <LeftOutlined />
                     </a-button>
-                    <a-button size="small" type="text" @click="moveRack(rIndex, 1)" :disabled="rIndex === parsedRacks.length - 1" title="오른쪽 이동">
+                    <a-button size="small" type="text" @click="moveRack(rIndex, 1)" :disabled="rIndex === parsedRacks.length - 1" :title="t('rackDiagram.moveRight')">
                       <RightOutlined />
                     </a-button>
-                    <a-button size="small" type="text" @click="cloneRack(rIndex)" title="랙 복제">
+                    <a-button size="small" type="text" @click="cloneRack(rIndex)" :title="t('rackDiagram.cloneRack')">
                       <CopyOutlined />
                     </a-button>
-                    <a-button size="small" type="text" @click="openRackModal('edit', rIndex)" title="수정">
+                    <a-button size="small" type="text" @click="openRackModal('edit', rIndex)" :title="t('rackDiagram.edit')">
                       <SettingOutlined />
                     </a-button>
-                    <a-popconfirm title="삭제하시겠습니까?" @confirm="deleteRack(rIndex)">
+                    <a-popconfirm :title="t('rackDiagram.deleteConfirm')" @confirm="deleteRack(rIndex)">
                       <a-button size="small" type="text" danger>
                         <DeleteOutlined />
                       </a-button>
@@ -128,7 +128,7 @@
                     :style="{ height: (item.height * 32) + 'px' }"
                   >
                     <div v-if="item.type === 'gap'" class="gap-content" @click="openDeviceModal(rIndex, iIndex)">
-                      <span>+ {{ item.height }}U 여백 (클릭하여 장비 추가)</span>
+                      <span>+ {{ item.height }}U {{ t('rackDiagram.gapAddDevice') }}</span>
                     </div>
 
                     <div
@@ -170,36 +170,36 @@
                           </a-button>
                         </a-tooltip>
 
-                        <a-tooltip title="장비 복제" :mouseEnterDelay="0.1">
+                        <a-tooltip :title="t('rackDiagram.cloneDevice')" :mouseEnterDelay="0.1">
                           <a-button size="small" type="text" @click.stop="cloneItem(rIndex, iIndex)">
                             <CopyOutlined />
                           </a-button>
                         </a-tooltip>
 
-                        <a-tooltip title="다른 랙으로 이동" :mouseEnterDelay="0.1">
+                        <a-tooltip :title="t('rackDiagram.moveToOtherRack')" :mouseEnterDelay="0.1">
                           <a-button size="small" type="text" @click.stop="openMoveDeviceModal(rIndex, iIndex)">
                             <ExportOutlined />
                           </a-button>
                         </a-tooltip>
 
-                        <a-tooltip title="설정" :mouseEnterDelay="0.1">
+                        <a-tooltip :title="t('rackDiagram.settings')" :mouseEnterDelay="0.1">
                           <a-button size="small" type="text" @click.stop="openDeviceModal(rIndex, iIndex)">
                             <SettingOutlined />
                           </a-button>
                         </a-tooltip>
 
                         <a-dropdown v-if="hasActionMenu(item)" :trigger="['click']">
-                          <a-tooltip title="장치 작업" :mouseEnterDelay="0.1">
+                          <a-tooltip :title="t('rackDiagram.deviceActions')" :mouseEnterDelay="0.1">
                             <a-button size="small" type="text" class="device-more-btn" @click.stop>
                               <MoreOutlined />
                             </a-button>
                           </a-tooltip>
                           <template #overlay>
                             <a-menu @click="({ key }) => handleHostActionMenu(key, item)">
-                              <a-menu-item v-if="isHostLinked(item)" key="host-detail"><LinkOutlined /> 호스트 상세</a-menu-item>
-                              <a-menu-item v-if="isHostLinked(item)" key="host-vms"><UnorderedListOutlined /> 호스트 VM 목록</a-menu-item>
-                              <a-menu-item v-if="isHostLinked(item)" key="host-oobm"><LaptopOutlined /> OOBM 포털 접속</a-menu-item>
-                              <a-menu-item v-if="isHostLinked(item)" key="host-cube"><AppstoreOutlined /> Cube 포털 접속</a-menu-item>
+                              <a-menu-item v-if="isHostLinked(item)" key="host-detail"><LinkOutlined /> {{ t('rackDiagram.hostDetail') }}</a-menu-item>
+                              <a-menu-item v-if="isHostLinked(item)" key="host-vms"><UnorderedListOutlined /> {{ t('rackDiagram.hostVmList') }}</a-menu-item>
+                              <a-menu-item v-if="isHostLinked(item)" key="host-oobm"><LaptopOutlined /> {{ t('rackDiagram.hostOobmPortal') }}</a-menu-item>
+                              <a-menu-item v-if="isHostLinked(item)" key="host-cube"><AppstoreOutlined /> {{ t('rackDiagram.hostCubePortal') }}</a-menu-item>
                               <a-menu-divider v-if="isHostLinked(item) && hasQuickLinks(item)" />
                               <a-menu-item v-for="(link, lIdx) in getQuickLinks(item)" :key="`quick-${lIdx}`">
                                 <LinkOutlined /> {{ link.label || link.url }}
@@ -208,8 +208,8 @@
                           </template>
                         </a-dropdown>
 
-                        <a-popconfirm title="삭제하시겠습니까?" @confirm="deleteItem(rIndex, iIndex)" placement="topRight">
-                          <a-tooltip title="삭제" :mouseEnterDelay="0.1">
+                        <a-popconfirm :title="t('rackDiagram.deleteConfirm')" @confirm="deleteItem(rIndex, iIndex)" placement="topRight">
+                          <a-tooltip :title="t('rackDiagram.delete')" :mouseEnterDelay="0.1">
                             <a-button size="small" type="text" danger @click.stop>
                               <DeleteOutlined />
                             </a-button>
@@ -230,16 +230,16 @@
 
     <a-modal
       v-model:visible="rackModalVisible"
-      :title="rackModalMode === 'add' ? '새 랙 추가' : '랙 설정 수정'"
+      :title="rackModalMode === 'add' ? t('rackDiagram.addRack') : t('rackDiagram.editRack')"
       @ok="submitRackModal"
       @cancel="closeRackModal"
       destroyOnClose
     >
       <a-form layout="vertical">
-        <a-form-item label="랙 이름 (Name)">
-          <a-input v-model:value="rackForm.name" placeholder="예: Server Rack 1" />
+        <a-form-item :label="t('rackDiagram.rackName')">
+          <a-input v-model:value="rackForm.name" :placeholder="t('rackDiagram.rackNamePlaceholder')" />
         </a-form-item>
-        <a-form-item label="총 높이 (U)">
+        <a-form-item :label="t('rackDiagram.totalHeight')">
           <a-input-number
             v-model:value="rackForm.totalHeight"
             :min="10"
@@ -253,25 +253,25 @@
     </a-modal>
     <a-modal
       v-model:visible="moveModalVisible"
-      title="장비 이동 (다른 랙으로 보내기)"
+      :title="t('rackDiagram.moveDeviceTitle')"
       @ok="submitMoveDevice"
       destroyOnClose
     >
       <div style="margin-bottom: 16px;">
         <InfoCircleOutlined style="color: #1890ff; margin-right: 8px;" />
-        <span>이동할 대상 랙을 선택하면, <strong>빈 공간(Gap)을 찾아 자동으로 배치</strong>됩니다.</span>
+        <span>{{ t('rackDiagram.moveDeviceDesc1') }} <strong>{{ t('rackDiagram.moveDeviceDesc2') }}</strong>{{ t('rackDiagram.moveDeviceDesc3') }}</span>
       </div>
 
       <a-form layout="vertical">
-        <a-form-item label="대상 랙 선택">
-          <a-select v-model:value="moveTargetRackIndex" placeholder="랙을 선택하세요" style="width: 100%">
+        <a-form-item :label="t('rackDiagram.targetRack')">
+          <a-select v-model:value="moveTargetRackIndex" :placeholder="t('rackDiagram.selectRack')" style="width: 100%">
             <a-select-option
               v-for="(rack, idx) in parsedRacks"
               :key="idx"
               :value="idx"
               :disabled="idx === moveSourceInfo.rIndex"
             >
-              {{ rack.name }} (잔여 여백 확인 필요)
+              {{ rack.name }} ({{ t('rackDiagram.needGapCheck') }})
             </a-select-option>
           </a-select>
         </a-form-item>
@@ -279,53 +279,53 @@
     </a-modal>
     <a-modal
       v-model:visible="deviceModalVisible"
-      :title="'장비 설정'"
+      :title="t('rackDiagram.deviceConfig')"
       @ok="submitDeviceModal"
       @cancel="closeDeviceModal"
       destroyOnClose
     >
       <a-form layout="vertical">
-        <a-form-item label="장비 종류">
+        <a-form-item :label="t('rackDiagram.deviceType')">
           <a-select v-model:value="deviceForm.type" style="width: 100%" @change="handleTypeChange">
-            <a-select-option value="server">서버 (Server)</a-select-option>
-            <a-select-option value="switch">스위치 (Switch)</a-select-option>
-            <a-select-option value="storage">스토리지 (Storage)</a-select-option>
-            <a-select-option value="firewall">방화벽 (Firewall)</a-select-option>
+            <a-select-option value="server">{{ t('rackDiagram.deviceTypeServer') }}</a-select-option>
+            <a-select-option value="switch">{{ t('rackDiagram.deviceTypeSwitch') }}</a-select-option>
+            <a-select-option value="storage">{{ t('rackDiagram.deviceTypeStorage') }}</a-select-option>
+            <a-select-option value="firewall">{{ t('rackDiagram.deviceTypeFirewall') }}</a-select-option>
             <a-select-option value="ups">UPS</a-select-option>
-            <a-select-option value="patch">패치패널 (Patch Panel)</a-select-option>
+            <a-select-option value="patch">{{ t('rackDiagram.deviceTypePatch') }}</a-select-option>
             <a-select-option value="pdu">PDU</a-select-option>
-            <a-select-option value="blank">블랭크 패널 (Blank)</a-select-option>
-            <a-select-option value="custom">커스텀 (Custom)</a-select-option>
+            <a-select-option value="blank">{{ t('rackDiagram.deviceTypeBlank') }}</a-select-option>
+            <a-select-option value="custom">{{ t('rackDiagram.deviceTypeCustom') }}</a-select-option>
           </a-select>
         </a-form-item>
 
-        <a-form-item label="장비명 (Label)" v-if="deviceForm.type !== 'blank'">
+        <a-form-item :label="t('rackDiagram.deviceName')" v-if="deviceForm.type !== 'blank'">
           <a-input
             v-model:value="deviceForm.label"
-            placeholder="장비명을 입력하세요."
+            :placeholder="t('rackDiagram.deviceNamePlaceholder')"
             allow-clear
           />
         </a-form-item>
 
-        <a-form-item label="인프라 자산 선택" v-if="deviceForm.type !== 'blank'">
+        <a-form-item :label="t('rackDiagram.selectInfraAsset')" v-if="deviceForm.type !== 'blank'">
           <a-select
             v-model:value="deviceForm.sourceRef"
             :loading="inventoryLoading"
             :options="inventoryOptions"
             :show-search="true"
             option-filter-prop="label"
-            placeholder="Host를 선택하세요."
+            :placeholder="t('rackDiagram.selectHost')"
             allow-clear
             style="width: 100%"
             @change="handleSourceChange"
           />
         </a-form-item>
 
-        <a-form-item label="커스텀 타입명" v-if="deviceForm.type === 'custom'">
-          <a-input v-model:value="deviceForm.customType" placeholder="예: Router" />
+        <a-form-item :label="t('rackDiagram.customTypeName')" v-if="deviceForm.type === 'custom'">
+          <a-input v-model:value="deviceForm.customType" :placeholder="t('rackDiagram.customTypePlaceholder')" />
         </a-form-item>
 
-        <a-form-item label="높이 (U)">
+        <a-form-item :label="t('rackDiagram.height')">
         <a-input-number
           v-model:value="deviceForm.height"
           :min="1"
@@ -335,26 +335,26 @@
         />
         <div style="font-size: 12px; color: #888; margin-top: 4px;">
           <InfoCircleOutlined style="margin-right: 4px;" />
-          현재 이 위치의 최대 허용 높이는 <strong>{{ maxAllowedHeight }}U</strong> 입니다.
+          {{ t('rackDiagram.maxAllowedHeightPrefix') }} <strong>{{ maxAllowedHeight }}U</strong> {{ t('rackDiagram.maxAllowedHeightSuffix') }}
         </div>
       </a-form-item>
 
-        <a-form-item label="장비 메모 / 상세 설명">
+        <a-form-item :label="t('rackDiagram.deviceMemo')">
           <a-textarea
             v-model:value="deviceForm.memo"
             :rows="3"
-            placeholder="IP 주소, 용도, 담당자 등을 입력하세요"
+            :placeholder="t('rackDiagram.deviceMemoPlaceholder')"
           />
         </a-form-item>
         <a-form-item
-          label="커스텀 바로가기 링크 (한 줄에 하나, 형식: 이름|URL)"
+          :label="t('rackDiagram.quickLinks')"
           :validateStatus="quickLinksError ? 'error' : ''"
           :help="quickLinksError"
         >
           <a-textarea
             v-model:value="deviceForm.quickLinksText"
             :rows="3"
-            placeholder="예: iDRAC|https://10.0.0.10&#10;NAS|https://nas.local"
+            :placeholder="t('rackDiagram.quickLinksPlaceholder')"
             @change="quickLinksError = ''"
           />
         </a-form-item>
@@ -382,7 +382,7 @@
                 </g>
               </svg>
             </div>
-            <p class="ant-empty-description">{{ $t('label.no.data') || 'No Data' }}</p>
+            <p class="ant-empty-description">{{ t('label.no.data') }}</p>
           </div>
         </div>
         <div v-else-if="!hostVmLoading" class="host-vm-grid">
@@ -391,6 +391,7 @@
             :key="vm.id"
             class="host-vm-card"
             :class="{ 'host-vm-card-inactive': !isRunningVm(vm) }"
+            @click="goToVmDetail(vm)"
           >
             <div class="host-vm-icon">
               <font-awesome-icon :icon="['fab', getVmOsLogo(vm)]" size="lg" />
@@ -409,7 +410,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, computed, watch, onBeforeUnmount, nextTick } from 'vue'
+import { ref, reactive, onMounted, computed, watch, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
 import { message } from 'ant-design-vue'
 import html2canvas from 'html2canvas'
 import { api } from '@/api'
@@ -439,6 +440,8 @@ const loading = ref(false)
 const saving = ref(false)
 const zoomLevel = ref(1)
 const router = useRouter()
+const { proxy } = getCurrentInstance()
+const t = (key, args) => proxy?.$t ? proxy.$t(key, args) : key
 
 // 슬라이더 및 입력창과 연동할 퍼센트 단위 변수
 const zoomPercent = computed({
@@ -489,12 +492,12 @@ const fetchZonesAndRackData = () => {
         // Zone ID를 성공적으로 가져왔으므로 DB에서 랙 구성 조회 시작
         fetchRackData()
       } else {
-        message.warning('사용 가능한 Zone이 없습니다.')
+        message.warning(t('rackDiagram.msg.noAvailableZone'))
       }
     }
   }).catch(error => {
     console.error('Zone 목록 조회 실패:', error)
-    message.error('Zone 정보를 불러오는데 실패했습니다.')
+    message.error(t('rackDiagram.msg.zoneLoadFailed'))
   }).finally(() => {
     zoneLoading.value = false
   })
@@ -517,11 +520,11 @@ const fetchRackData = () => {
     // DB에 저장된 데이터가 있고, 내용(content)이 존재하는 경우
     if (layouts && layouts.length > 0 && layouts[0].content) {
       parsedRacks.value = JSON.parse(layouts[0].content)
-      message.success('랙 구성을 불러왔습니다.')
+      message.success(t('rackDiagram.msg.rackLoaded'))
     } else {
       // DB에 데이터가 전혀 없는 경우 (최초 접속) -> 기본 빈 랙 생성
       parsedRacks.value = [{
-        name: 'Main Rack',
+        name: t('rackDiagram.defaultRackName'),
         totalHeight: 42,
         items: [{ type: 'gap', height: 42 }]
       }]
@@ -530,7 +533,7 @@ const fetchRackData = () => {
     nextTick(() => { isDirty.value = false })
   }).catch(error => {
     console.error('랙 데이터 불러오기 실패:', error)
-    message.error('랙 구성을 불러오는데 실패했습니다.')
+    message.error(t('rackDiagram.msg.rackLoadFailed'))
   }).finally(() => {
     loading.value = false
   })
@@ -538,7 +541,7 @@ const fetchRackData = () => {
 
 const saveRackData = () => {
   if (!currentZoneId.value) {
-    message.error('저장할 Zone 정보가 없습니다.')
+    message.error(t('rackDiagram.msg.noZoneToSave'))
     return
   }
 
@@ -550,11 +553,11 @@ const saveRackData = () => {
     name: 'default',
     content: jsonContent
   }).then(json => {
-    message.success('랙 구성이 DB에 안전하게 저장되었습니다.')
+    message.success(t('rackDiagram.msg.rackSaved'))
     isDirty.value = false // 저장 성공 시 변경 상태 뱃지 숨김
   }).catch(error => {
     console.error('랙 데이터 저장 실패:', error)
-    message.error('랙 구성 저장에 실패했습니다.')
+    message.error(t('rackDiagram.msg.rackSaveFailed'))
   }).finally(() => {
     saving.value = false
   })
@@ -588,12 +591,12 @@ const closeRackModal = () => {
 const exportToImage = async () => {
   const element = document.querySelector('.rack-container')
   if (!element) {
-    message.warning('저장할 랙 구성이 없습니다.')
+    message.warning(t('rackDiagram.msg.noRackToSaveImage'))
     return
   }
 
   try {
-    message.loading({ content: '이미지 변환 중...', key: 'exporting' })
+    message.loading({ content: t('rackDiagram.msg.exportingImage'), key: 'exporting' })
     const fullWidth = element.scrollWidth
     const fullHeight = element.scrollHeight
 
@@ -622,10 +625,10 @@ const exportToImage = async () => {
     link.href = canvas.toDataURL('image/png')
     link.click()
 
-    message.success({ content: '이미지 저장이 완료되었습니다.', key: 'exporting' })
+    message.success({ content: t('rackDiagram.msg.imageSaved'), key: 'exporting' })
   } catch (error) {
     console.error(error)
-    message.error({ content: '이미지 저장에 실패했습니다.', key: 'exporting' })
+    message.error({ content: t('rackDiagram.msg.imageSaveFailed'), key: 'exporting' })
   }
 }
 
@@ -635,7 +638,7 @@ const fileInput = ref(null)
 // JSON으로 내보내기 (Export)
 const exportToJson = () => {
   if (!parsedRacks.value || parsedRacks.value.length === 0) {
-    message.warning('내보낼 랙 데이터가 없습니다.')
+    message.warning(t('rackDiagram.msg.noRackToExport'))
     return
   }
 
@@ -656,7 +659,7 @@ const exportToJson = () => {
 
   // 4. 메모리 정리
   URL.revokeObjectURL(url)
-  message.success('JSON 파일이 다운로드되었습니다.')
+  message.success(t('rackDiagram.msg.jsonDownloaded'))
 }
 
 // JSON 불러오기 버튼 클릭 시 숨겨진 input 실행
@@ -680,13 +683,13 @@ const handleImport = (event) => {
       // 2. 간단한 유효성 검사 (배열 형태인지 확인)
       if (Array.isArray(importedData)) {
         parsedRacks.value = importedData // 화면 갱신
-        message.success('성공적으로 데이터를 불러왔습니다.')
+        message.success(t('rackDiagram.msg.importSuccess'))
       } else {
-        message.error('유효하지 않은 파일 형식입니다. (배열이 아님)')
+        message.error(t('rackDiagram.msg.invalidFileFormat'))
       }
     } catch (error) {
       console.error(error)
-      message.error('JSON 파일 파싱에 실패했습니다. 파일이 손상되었을 수 있습니다.')
+      message.error(t('rackDiagram.msg.jsonParseFailed'))
     } finally {
       // 3. 같은 파일을 다시 선택할 수 있도록 input 초기화
       event.target.value = ''
@@ -701,11 +704,11 @@ const cloneRack = (rIndex) => {
   const targetRack = parsedRacks.value[rIndex]
   const newRack = {
     ...targetRack,
-    name: `${targetRack.name} (Copy)`,
+    name: `${targetRack.name} (${t('rackDiagram.copySuffix')})`,
     items: targetRack.items.map(item => ({ ...item }))
   }
   parsedRacks.value.push(newRack)
-  message.success('랙이 복제되었습니다.')
+  message.success(t('rackDiagram.msg.rackCloned'))
 }
 
 // 랙 순서 좌우 이동 함수
@@ -722,16 +725,16 @@ const moveRack = (rIndex, direction) => {
 const submitRackModal = () => {
   const rackName = String(rackForm.name || '').trim()
   if (!rackName) {
-    message.warning('랙 이름을 입력해주세요.')
+    message.warning(t('rackDiagram.msg.enterRackName'))
     return
   }
   if (rackName.length > 60) {
-    message.warning('랙 이름은 60자 이하로 입력해주세요.')
+    message.warning(t('rackDiagram.msg.rackNameMax'))
     return
   }
 
   if (!Number.isInteger(rackForm.totalHeight) || rackForm.totalHeight < 10 || rackForm.totalHeight > 50) {
-    message.warning('총 높이(U)는 10~50 사이의 정수만 입력할 수 있습니다.')
+    message.warning(t('rackDiagram.msg.rackHeightRange'))
     return
   }
 
@@ -740,7 +743,7 @@ const submitRackModal = () => {
     return String(rack.name || '').trim().toLowerCase() === rackName.toLowerCase()
   })
   if (duplicateName) {
-    message.warning('동일한 랙 이름이 이미 존재합니다.')
+    message.warning(t('rackDiagram.msg.duplicateRackName'))
     return
   }
 
@@ -827,7 +830,7 @@ const inventoryLoading = ref(false)
 const inventoryOptions = ref([])
 const hostCache = ref({})
 const hostVmModalVisible = ref(false)
-const hostVmModalTitle = ref('호스트 VM 목록')
+const hostVmModalTitle = ref(t('rackDiagram.hostVmList'))
 const hostVmLoading = ref(false)
 const hostVmList = ref([])
 const hostVmFallbackList = ref([])
@@ -907,7 +910,7 @@ const handleSourceChange = (value) => {
   const selected = inventoryOptions.value.find(o => o.value === value)
   if (!selected) return
 
-  if (!deviceForm.label || Object.values(defaultLabels).includes(deviceForm.label)) {
+  if (!deviceForm.label || Object.values(defaultLabelKeys).map(key => t(key)).includes(deviceForm.label)) {
     deviceForm.label = selected.meta.name
   }
 
@@ -951,11 +954,11 @@ const parseQuickLinksTextWithValidation = (text) => {
     }
 
     if (!url) {
-      errors.push(`${idx + 1}행: URL이 비어 있습니다. (형식: 이름|URL)`)
+      errors.push(t('rackDiagram.msg.quickLinkUrlEmpty', { line: idx + 1 }))
       return
     }
     if (!/^https?:\/\//i.test(url)) {
-      errors.push(`${idx + 1}행: URL은 http:// 또는 https:// 로 시작해야 합니다.`)
+      errors.push(t('rackDiagram.msg.quickLinkUrlInvalid', { line: idx + 1 }))
       return
     }
 
@@ -1058,7 +1061,7 @@ const onDropRackFrame = (targetRIndex, event) => {
   const desiredStartU = getDesiredStartUFromRackEvent(event, targetRack)
   const best = findBestStartUInRack(targetRack, moving.height, desiredStartU)
   if (!best) {
-    message.warning(`대상 랙의 연속 여백이 부족합니다. (필요 ${moving.height}U)`)
+    message.warning(t('rackDiagram.msg.notEnoughGapOnTarget', { height: moving.height }))
     // 복구
     const restore = findBestStartUInRack(sourceRack, moving.height, 0)
     if (restore) placeDeviceAtStartU(sourceRack, restore.index, restore.startU, moving)
@@ -1067,7 +1070,7 @@ const onDropRackFrame = (targetRIndex, event) => {
 
   const placed = placeDeviceAtStartU(targetRack, best.index, best.startU, moving)
   if (!placed) {
-    message.warning('드롭 위치 계산에 실패했습니다. 다시 시도해주세요.')
+    message.warning(t('rackDiagram.msg.dropCalcFailed'))
     const restore = findBestStartUInRack(sourceRack, moving.height, 0)
     if (restore) placeDeviceAtStartU(sourceRack, restore.index, restore.startU, moving)
     return
@@ -1100,12 +1103,12 @@ const openLinkedHostOobm = async (item) => {
     const address = host?.outofbandmanagement?.address || ''
     const port = host?.details?.manageconsoleport
     if (!address || !port) {
-      message.warning('선택한 호스트의 OOBM 포털 정보를 찾을 수 없습니다.')
+      message.warning(t('rackDiagram.msg.oobmNotFound'))
       return
     }
     window.open(`${protocol}://${address}:${port}`, '_blank')
   } catch (e) {
-    message.error('OOBM 포털 정보를 불러오지 못했습니다.')
+    message.error(t('rackDiagram.msg.oobmLoadFailed'))
   }
 }
 
@@ -1116,12 +1119,12 @@ const openLinkedHostCube = async (item) => {
     const host = await fetchHostById(hostId)
     const ip = host?.ipaddress
     if (!ip) {
-      message.warning('선택한 호스트의 IP 정보를 찾을 수 없습니다.')
+      message.warning(t('rackDiagram.msg.hostIpNotFound'))
       return
     }
     window.open(`https://${ip}:9090`, '_blank')
   } catch (e) {
-    message.error('Cube 포털 정보를 불러오지 못했습니다.')
+    message.error(t('rackDiagram.msg.cubeLoadFailed'))
   }
 }
 
@@ -1135,7 +1138,7 @@ const openLinkedHostVmModal = async (item) => {
 
   try {
     const host = await fetchHostById(hostId)
-    hostVmModalTitle.value = `호스트 VM 목록 - ${host?.name || host?.hostname || hostId}`
+    hostVmModalTitle.value = `${t('rackDiagram.hostVmList')} - ${host?.name || host?.hostname || hostId}`
     const hostIdStr = String(hostId)
     const isVmAssignedToHost = (vm) => {
       const vmHostId = String(vm?.hostid || '')
@@ -1204,6 +1207,13 @@ const isRunningVm = (vm) => {
   return String(vm?.state || '').toLowerCase() === 'running'
 }
 
+const goToVmDetail = (vm) => {
+  const vmId = vm?.id
+  if (!vmId) return
+  hostVmModalVisible.value = false
+  router.push({ path: `/vm/${vmId}` })
+}
+
 const handleHostActionMenu = (key, item) => {
   if (typeof key === 'string' && key.startsWith('quick-')) {
     const idx = Number(key.replace('quick-', ''))
@@ -1238,17 +1248,18 @@ const maxAllowedHeight = computed(() => {
 })
 
 // 각 장비별 기본 라벨명 매핑
-const defaultLabels = {
-  server: 'Server',
-  switch: 'Switch',
-  storage: 'Storage',
-  firewall: 'Firewall',
-  patch: 'Patch Panel',
-  pdu: 'PDU',
-  ups: 'UPS',
-  blank: 'Blank Panel',
-  custom: 'Custom Device'
-}
+const defaultLabelKeys = {
+  server: 'rackDiagram.defaultLabelServer',
+  switch: 'rackDiagram.defaultLabelSwitch',
+  storage: 'rackDiagram.defaultLabelStorage',
+  firewall: 'rackDiagram.defaultLabelFirewall',
+  patch: 'rackDiagram.defaultLabelPatch',
+  pdu: 'rackDiagram.defaultLabelPdu',
+  ups: 'rackDiagram.defaultLabelUps',
+  blank: 'rackDiagram.defaultLabelBlank',
+  custom: 'rackDiagram.defaultLabelCustom'
+}
+const getDefaultLabel = (type) => t(defaultLabelKeys[type] || 'rackDiagram.defaultLabelCustom')
 
 // 모달 열기 로직 수정
 const openDeviceModal = (rIndex, iIndex) => {
@@ -1286,10 +1297,10 @@ const openDeviceModal = (rIndex, iIndex) => {
 const handleTypeChange = (newType) => {
   // 사용자가 직접 입력한 라벨이 없거나, 기존 기본 라벨명과 똑같을 때만 새 기본명으로 교체
   const isLabelEmpty = !deviceForm.label
-  const isLabelDefault = Object.values(defaultLabels).includes(deviceForm.label)
+  const isLabelDefault = Object.values(defaultLabelKeys).map(key => t(key)).includes(deviceForm.label)
 
   if (isLabelEmpty || isLabelDefault) {
-    deviceForm.label = defaultLabels[newType] || ''
+    deviceForm.label = getDefaultLabel(newType) || ''
   }
 }
 
@@ -1305,27 +1316,27 @@ const submitDeviceModal = () => {
 
   const rawLabel = String(deviceForm.label || '').trim()
   const rawCustomType = String(deviceForm.customType || '').trim()
-  const finalLabel = rawLabel || defaultLabels[deviceForm.type] || 'New Device'
-  const finalCustomType = rawCustomType || (deviceForm.type === 'custom' ? 'Custom Unit' : '')
+  const finalLabel = rawLabel || getDefaultLabel(deviceForm.type) || t('rackDiagram.newDevice')
+  const finalCustomType = rawCustomType || (deviceForm.type === 'custom' ? t('rackDiagram.customUnit') : '')
 
   if (deviceForm.type !== 'blank' && !finalLabel) {
-    message.warning('장비명을 입력해주세요.')
+    message.warning(t('rackDiagram.msg.enterDeviceName'))
     return
   }
   if (finalLabel.length > 60) {
-    message.warning('장비명은 60자 이하로 입력해주세요.')
+    message.warning(t('rackDiagram.msg.deviceNameMax'))
     return
   }
   if (deviceForm.type === 'custom' && !rawCustomType) {
-    message.warning('커스텀 타입명을 입력해주세요.')
+    message.warning(t('rackDiagram.msg.enterCustomType'))
     return
   }
   if (deviceForm.type === 'custom' && rawCustomType.length > 60) {
-    message.warning('커스텀 타입명은 60자 이하로 입력해주세요.')
+    message.warning(t('rackDiagram.msg.customTypeMax'))
     return
   }
   if (!Number.isInteger(deviceForm.height) || deviceForm.height <= 0) {
-    message.warning('장비 높이(U)는 1 이상의 정수만 입력할 수 있습니다.')
+    message.warning(t('rackDiagram.msg.deviceHeightInteger'))
     return
   }
   const quickLinkParsed = parseQuickLinksTextWithValidation(deviceForm.quickLinksText)
@@ -1348,7 +1359,7 @@ const submitDeviceModal = () => {
   // 여백(Gap)에 새 장비 추가 시
   if (oldItem.type === 'gap') {
     if (oldItem.height < newItem.height) {
-      message.error('선택한 여백보다 큰 장비는 추가할 수 없습니다.')
+      message.error(t('rackDiagram.msg.deviceLargerThanGap'))
       return
     }
     const remainingHeight = oldItem.height - newItem.height
@@ -1371,7 +1382,7 @@ const submitDeviceModal = () => {
         nextItem.height -= heightDiff
         if (nextItem.height === 0) rack.items.splice(iIndex + 1, 1) // 여백이 0이 되면 삭제
       } else {
-        message.error('아래쪽 여백이 부족하여 크기를 늘릴 수 없습니다.')
+        message.error(t('rackDiagram.msg.notEnoughGapBelow'))
         return
       }
     } else {
@@ -1427,7 +1438,7 @@ const cloneItem = (rIndex, iIndex) => {
     if (rack.items[i].type === 'gap' && placeIntoGap(i, false)) return
   }
 
-  message.error(`랙 내에 여유 공간이 부족합니다. (필요 공간: ${neededHeight}U)`)
+  message.error(t('rackDiagram.msg.notEnoughSpaceInRack', { height: neededHeight }))
 }
 
 const deleteItem = (rIndex, iIndex) => {
@@ -1455,7 +1466,7 @@ const moveSourceInfo = reactive({ rIndex: -1, iIndex: -1 }) // 이사 갈 장비
 const openMoveDeviceModal = (rIndex, iIndex) => {
   // 랙이 하나밖에 없으면 이사 불가
   if (parsedRacks.value.length <= 1) {
-    message.warning('이동할 다른 랙이 없습니다. [새 랙 추가]를 먼저 해주세요.')
+    message.warning(t('rackDiagram.msg.noOtherRackToMove'))
     return
   }
 
@@ -1468,7 +1479,7 @@ const openMoveDeviceModal = (rIndex, iIndex) => {
 // 이사 실행 (확인 버튼 클릭 시)
 const submitMoveDevice = () => {
   if (moveTargetRackIndex.value === null) {
-    message.warning('이동할 대상 랙을 선택해주세요.')
+    message.warning(t('rackDiagram.msg.selectTargetRack'))
     return
   }
 
@@ -1487,7 +1498,7 @@ const submitMoveDevice = () => {
   )
 
   if (targetGapIndex === -1) {
-    message.error(`'${targetRack.name}'에 ${deviceToMove.height}U 공간이 부족하여 이동할 수 없습니다.`)
+    message.error(t('rackDiagram.msg.targetRackNoSpace', { rack: targetRack.name, height: deviceToMove.height }))
     return
   }
 
@@ -1519,7 +1530,7 @@ const submitMoveDevice = () => {
     }
   }
 
-  message.success(`'${deviceToMove.label}' 장비가 '${targetRack.name}'(으)로 이동되었습니다.`)
+  message.success(t('rackDiagram.msg.deviceMoved', { label: deviceToMove.label, rack: targetRack.name }))
   moveModalVisible.value = false
 }
 
@@ -2087,6 +2098,13 @@ onBeforeUnmount(() => {
   border-radius: 10px;
   background: #f9fbff;
   padding: 10px 12px;
+  cursor: pointer;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.host-vm-card:hover {
+  border-color: #91caff;
+  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
 }
 
 .host-vm-card-inactive {

From 718f5708be6b878ce0b1ea238191a686c82abd72 Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Thu, 14 May 2026 15:14:26 +0900
Subject: [PATCH 08/17] =?UTF-8?q?[=EB=9E=99=20=EC=8B=9C=EA=B0=81=ED=99=94]?=
 =?UTF-8?q?=20antdesign=20=EC=A0=81=EC=9A=A9=ED=95=98=EC=97=AC=20=ED=99=94?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8=20=ED=86=A4=EC=9C=BC=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=ED=95=98=EA=B3=A0=20=EB=9E=99=20=EB=A6=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=EB=A5=BC=20=EB=A7=8C=EB=93=A4=EC=96=B4=20=EB=8B=A8?=
 =?UTF-8?q?=EA=B3=84=EB=B3=84=EB=A1=9C=20=EB=9E=99=EC=9D=84=20=ED=95=98?=
 =?UTF-8?q?=EB=82=98=EC=94=A9=20=ED=99=95=EC=9D=B8=ED=95=A0=20=EC=88=98=20?=
 =?UTF-8?q?=EC=9E=88=EB=8F=84=EB=A1=9D=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/public/locales/en.json                  |   29 +-
 ui/public/locales/ko_KR.json               |   33 +-
 ui/src/views/infra/InfraSummary.vue        |    8 +-
 ui/src/views/infra/zone/RackDiagramTab.vue | 1703 +++++++++++++++++---
 4 files changed, 1561 insertions(+), 212 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 3df858a0214e..e37f9159b499 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -5098,9 +5098,16 @@
 "rackDiagram.deviceConfig": "Device settings",
 "rackDiagram.deviceType": "Device type",
 "rackDiagram.deviceTypeServer": "Server",
+"rackDiagram.deviceTypeBlade": "Blade Chassis",
 "rackDiagram.deviceTypeSwitch": "Switch",
+"rackDiagram.deviceTypeRouter": "Router",
+"rackDiagram.deviceTypeLoadBalancer": "Load Balancer",
 "rackDiagram.deviceTypeStorage": "Storage",
+"rackDiagram.deviceTypeNas": "NAS",
 "rackDiagram.deviceTypeFirewall": "Firewall",
+"rackDiagram.deviceTypeMonitoring": "Monitoring",
+"rackDiagram.deviceTypeKvm": "KVM / Console",
+"rackDiagram.deviceTypeCooling": "Cooling Fan Unit",
 "rackDiagram.deviceTypePatch": "Patch Panel",
 "rackDiagram.deviceTypeBlank": "Blank Panel",
 "rackDiagram.deviceTypeCustom": "Custom",
@@ -5122,9 +5129,16 @@
 "rackDiagram.newDevice": "New Device",
 "rackDiagram.customUnit": "Custom Unit",
 "rackDiagram.defaultLabelServer": "Server",
+"rackDiagram.defaultLabelBlade": "Blade Chassis",
 "rackDiagram.defaultLabelSwitch": "Switch",
+"rackDiagram.defaultLabelRouter": "Router",
+"rackDiagram.defaultLabelLoadBalancer": "Load Balancer",
 "rackDiagram.defaultLabelStorage": "Storage",
+"rackDiagram.defaultLabelNas": "NAS",
 "rackDiagram.defaultLabelFirewall": "Firewall",
+"rackDiagram.defaultLabelMonitoring": "Monitoring",
+"rackDiagram.defaultLabelKvm": "KVM / Console",
+"rackDiagram.defaultLabelCooling": "Cooling Fan Unit",
 "rackDiagram.defaultLabelPatch": "Patch Panel",
 "rackDiagram.defaultLabelPdu": "PDU",
 "rackDiagram.defaultLabelUps": "UPS",
@@ -5170,5 +5184,18 @@
 "rackDiagram.msg.noOtherRackToMove": "No other rack to move to. Add a new rack first.",
 "rackDiagram.msg.selectTargetRack": "Select target rack.",
 "rackDiagram.msg.targetRackNoSpace": "Cannot move. '{rack}' has no {height}U space.",
-"rackDiagram.msg.deviceMoved": "'{label}' moved to '{rack}'."
+"rackDiagram.msg.deviceMoved": "'{label}' moved to '{rack}'.",
+"rackDiagram.title": "Rack Visualization",
+"rackDiagram.deviceInfo": "Device Information",
+"rackDiagram.selectDevice": "Select a device",
+"rackDiagram.sourceRef": "Infra Asset",
+"rackDiagram.usage": "Usage",
+"rackDiagram.rackUnit": "Rack",
+"rackDiagram.used": "used",
+"rackDiagram.total": "total",
+"rackDiagram.free": "Free",
+"rackDiagram.searchMatched": "Matches {count}",
+"rackDiagram.freeSpace": "Free Space",
+"rackDiagram.deviceCount": "Devices",
+"rackDiagram.countSuffix": ""
 }
diff --git a/ui/public/locales/ko_KR.json b/ui/public/locales/ko_KR.json
index 76eceee45c68..aa147a8ec0de 100644
--- a/ui/public/locales/ko_KR.json
+++ b/ui/public/locales/ko_KR.json
@@ -5100,13 +5100,20 @@
 "rackDiagram.deviceConfig": "\uc7a5\ube44 \uc124\uc815",
 "rackDiagram.deviceType": "\uc7a5\ube44 \uc885\ub958",
 "rackDiagram.deviceTypeServer": "\uc11c\ubc84 (Server)",
+"rackDiagram.deviceTypeBlade": "\ube14\ub808\uc774\ub4dc \uc0e4\uc2dc (Blade Chassis)",
 "rackDiagram.deviceTypeSwitch": "\uc2a4\uc704\uce58 (Switch)",
+"rackDiagram.deviceTypeRouter": "\ub77c\uc6b0\ud130 (Router)",
+"rackDiagram.deviceTypeLoadBalancer": "\ub85c\ub4dc \ubc38\ub7f0\uc11c (Load Balancer)",
 "rackDiagram.deviceTypeStorage": "\uc2a4\ud1a0\ub9ac\uc9c0 (Storage)",
+"rackDiagram.deviceTypeNas": "NAS",
 "rackDiagram.deviceTypeFirewall": "\ubc29\ud654\ubcbd (Firewall)",
+"rackDiagram.deviceTypeMonitoring": "\ubaa8\ub2c8\ud130\ub9c1 (Monitoring)",
+"rackDiagram.deviceTypeKvm": "KVM / \ucf58\uc194",
+"rackDiagram.deviceTypeCooling": "\ucfe8\ub9c1 \ud32c \uc720\ub2db (Cooling Fan Unit)",
 "rackDiagram.deviceTypePatch": "\ud328\uce58\ud328\ub110 (Patch Panel)",
 "rackDiagram.deviceTypeBlank": "\ube14\ub7ad\ud06c \ud328\ub110 (Blank)",
 "rackDiagram.deviceTypeCustom": "\ucee4\uc2a4\ud140 (Custom)",
-"rackDiagram.deviceName": "\uc7a5\ube44\uba85 (Label)",
+"rackDiagram.deviceName": "\uc7a5\ube44\uba85",
 "rackDiagram.deviceNamePlaceholder": "\uc7a5\ube44\uba85\uc744 \uc785\ub825\ud558\uc138\uc694.",
 "rackDiagram.selectInfraAsset": "\uc778\ud504\ub77c \uc790\uc0b0 \uc120\ud0dd",
 "rackDiagram.selectHost": "Host\ub97c \uc120\ud0dd\ud558\uc138\uc694.",
@@ -5115,7 +5122,7 @@
 "rackDiagram.height": "\ub192\uc774 (U)",
 "rackDiagram.maxAllowedHeightPrefix": "\ud604\uc7ac \uc774 \uc704\uce58\uc758 \ucd5c\ub300 \ud5c8\uc6a9 \ub192\uc774\ub294",
 "rackDiagram.maxAllowedHeightSuffix": "\uc785\ub2c8\ub2e4.",
-"rackDiagram.deviceMemo": "\uc7a5\ube44 \uba54\ubaa8 / \uc0c1\uc138 \uc124\uba85",
+"rackDiagram.deviceMemo": "\uc7a5\ube44 \uba54\ubaa8",
 "rackDiagram.deviceMemoPlaceholder": "IP \uc8fc\uc18c, \uc6a9\ub3c4, \ub2f4\ub2f9\uc790 \ub4f1\uc744 \uc785\ub825\ud558\uc138\uc694",
 "rackDiagram.quickLinks": "\ucee4\uc2a4\ud140 \ubc14\ub85c\uac00\uae30 \ub9c1\ud06c (\ud55c \uc904\uc5d0 \ud558\ub098, \ud615\uc2dd: \uc774\ub984|URL)",
 "rackDiagram.quickLinksPlaceholder": "\uc608: iDRAC|https://10.0.0.10\nNAS|https://nas.local",
@@ -5124,9 +5131,16 @@
 "rackDiagram.newDevice": "\uc0c8 \uc7a5\ube44",
 "rackDiagram.customUnit": "\ucee4\uc2a4\ud140 \uc720\ub2db",
 "rackDiagram.defaultLabelServer": "Server",
+"rackDiagram.defaultLabelBlade": "Blade Chassis",
 "rackDiagram.defaultLabelSwitch": "Switch",
+"rackDiagram.defaultLabelRouter": "Router",
+"rackDiagram.defaultLabelLoadBalancer": "Load Balancer",
 "rackDiagram.defaultLabelStorage": "Storage",
+"rackDiagram.defaultLabelNas": "NAS",
 "rackDiagram.defaultLabelFirewall": "Firewall",
+"rackDiagram.defaultLabelMonitoring": "Monitoring",
+"rackDiagram.defaultLabelKvm": "KVM / Console",
+"rackDiagram.defaultLabelCooling": "Cooling Fan Unit",
 "rackDiagram.defaultLabelPatch": "Patch Panel",
 "rackDiagram.defaultLabelPdu": "PDU",
 "rackDiagram.defaultLabelUps": "UPS",
@@ -5172,5 +5186,18 @@
 "rackDiagram.msg.noOtherRackToMove": "\uc774\ub3d9\ud560 \ub2e4\ub978 \ub799\uc774 \uc5c6\uc2b5\ub2c8\ub2e4. [\uc0c8 \ub799 \ucd94\uac00]\ub97c \uba3c\uc800 \ud574\uc8fc\uc138\uc694.",
 "rackDiagram.msg.selectTargetRack": "\uc774\ub3d9\ud560 \ub300\uc0c1 \ub799\uc744 \uc120\ud0dd\ud574\uc8fc\uc138\uc694.",
 "rackDiagram.msg.targetRackNoSpace": "'{rack}'\uc5d0 {height}U \uacf5\uac04\uc774 \ubd80\uc871\ud558\uc5ec \uc774\ub3d9\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.",
-"rackDiagram.msg.deviceMoved": "'{label}' \uc7a5\ube44\uac00 '{rack}'(\uc73c)\ub85c \uc774\ub3d9\ub418\uc5c8\uc2b5\ub2c8\ub2e4."
+"rackDiagram.msg.deviceMoved": "'{label}' \uc7a5\ube44\uac00 '{rack}'(\uc73c)\ub85c \uc774\ub3d9\ub418\uc5c8\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.title": "\ub799 \uc2dc\uac01\ud654",
+"rackDiagram.deviceInfo": "\uc7a5\ube44 \uc815\ubcf4",
+"rackDiagram.selectDevice": "\uc7a5\ube44\ub97c \uc120\ud0dd\ud558\uc138\uc694",
+"rackDiagram.sourceRef": "\uc778\ud504\ub77c \uc790\uc0b0",
+"rackDiagram.usage": "\uc0ac\uc6a9\ub960",
+"rackDiagram.rackUnit": "\ub799",
+"rackDiagram.used": "\uc0ac\uc6a9",
+"rackDiagram.total": "\uc804\uccb4",
+"rackDiagram.free": "\uc5ec\uc720",
+"rackDiagram.searchMatched": "\uac80\uc0c9 \uc77c\uce58 {count}",
+"rackDiagram.freeSpace": "\uc5ec\uc720 \uacf5\uac04",
+"rackDiagram.deviceCount": "\uc7a5\ube44",
+"rackDiagram.countSuffix": "\uac1c"
 }
diff --git a/ui/src/views/infra/InfraSummary.vue b/ui/src/views/infra/InfraSummary.vue
index 27a3e8c0e6fa..8f62a039d70a 100644
--- a/ui/src/views/infra/InfraSummary.vue
+++ b/ui/src/views/infra/InfraSummary.vue
@@ -373,8 +373,8 @@ export default {
     gap: 12px;
   }
   .summary-cards-pane {
-    width: 30%;
-    flex: 0 0 30%;
+    width: 34%;
+    flex: 0 0 34%;
     padding: 10px;
     border-radius: 12px;
     border: 1px solid #dfe3e8;
@@ -382,8 +382,8 @@ export default {
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
   }
   .rack-visualization-pane {
-    width: 70%;
-    flex: 0 0 70%;
+    width: 66%;
+    flex: 0 0 66%;
     min-width: 320px;
   }
   .summary-mini-card :deep(.ant-card-body) {
diff --git a/ui/src/views/infra/zone/RackDiagramTab.vue b/ui/src/views/infra/zone/RackDiagramTab.vue
index 0b9793ef87d7..47f170c611b1 100644
--- a/ui/src/views/infra/zone/RackDiagramTab.vue
+++ b/ui/src/views/infra/zone/RackDiagramTab.vue
@@ -1,28 +1,27 @@
 <template>
-  <div class="p-2">
-    <div class="toolbar-container">
+  <div class="p-2 rack-diagram-root" :class="{ 'is-dark': isDarkMode }">
+    <div class="toolbar-container" :class="{ 'toolbar-detail': !showRackList }">
 
       <div class="toolbar-left">
-        <a-space wrap>
-          <a-button type="primary" @click="saveRackData" :loading="saving" :disabled="!isDirty">
-            <SaveOutlined /> {{ t('rackDiagram.save') }}
-          </a-button>
-
-          <a-divider type="vertical" class="toolbar-divider" />
-
+        <a-space :wrap="false" size="small">
           <a-input-search
             v-model:value="searchQuery"
             :placeholder="t('rackDiagram.searchPlaceholder')"
-            style="width: 200px;"
+            :style="{ width: showRackList ? '320px' : '240px' }"
             allow-clear
           />
+        </a-space>
+        <input type="file" ref="fileInput" accept=".json" style="display: none" @change="handleImport" />
+      </div>
 
-          <a-button type="dashed" @click="openRackModal('add')">
+      <div class="toolbar-right" style="display: flex; align-items: center;">
+        <a-space :wrap="false" size="small">
+          <a-button type="primary" class="add-rack-btn" @click="openRackModal('add')">
             <PlusOutlined /> {{ t('rackDiagram.addRack') }}
           </a-button>
-
-          <a-divider type="vertical" class="toolbar-divider" />
-
+          <a-button type="primary" @click="saveRackData" :loading="saving" :disabled="!isDirty">
+            <SaveOutlined /> {{ t('rackDiagram.save') }}
+          </a-button>
           <a-button @click="exportToJson" :title="t('rackDiagram.backupJson')">
             <FileTextOutlined /> {{ t('rackDiagram.backup') }}
           </a-button>
@@ -33,15 +32,16 @@
             <CameraOutlined /> {{ t('rackDiagram.capture') }}
           </a-button>
         </a-space>
-
-        <input type="file" ref="fileInput" accept=".json" style="display: none" @change="handleImport" />
       </div>
 
-      <div class="toolbar-right" style="display: flex; align-items: center;">
+      <div v-if="!showRackList" class="toolbar-right" style="display: flex; align-items: center; margin-left: 12px;">
         <span class="zoom-label" style="margin-right: 8px;">{{ t('rackDiagram.zoom') }}:</span>
 
         <a-input-number
-          v-model:value="zoomPercent"
+          :value="zoomPercentUi"
+          @change="onZoomInputChange"
+          @pressEnter="commitZoomUi"
+          @blur="commitZoomUi"
           :min="40"
           :max="150"
           :formatter="value => `${value}%`"
@@ -52,7 +52,9 @@
 
         <div style="width: 120px; flex-shrink: 0; padding-top: 4px;">
           <a-slider
-            v-model:value="zoomPercent"
+            :value="zoomPercentUi"
+            @change="onZoomSliderChange"
+            @afterChange="commitZoomUi"
             :min="40"
             :max="150"
             :tip-formatter="null"
@@ -61,32 +63,70 @@
       </div>
     </div>
     <a-spin :spinning="loading || saving">
-      <div class="rack-canvas" style="overflow: auto; min-height: 600px; padding: 20px; background: #eef0f4;">
-        <div class="rack-zoom-wrapper" :style="{ zoom: zoomLevel }">
+      <div v-if="showRackList" class="rack-list-view">
+        <a-empty v-if="!parsedRacks.length" :description="t('rackDiagram.emptyRack')" style="margin-top: 50px;" />
+        <div v-else class="rack-list-grid">
+          <a-card
+            v-for="(rack, idx) in parsedRacks"
+            :key="`rack-list-${idx}`"
+            hoverable
+            :class="[
+              'rack-list-card',
+              { 'rack-list-card--matched': hasSearchQuery && isRackMatched(rack), 'rack-list-card--dimmed': hasSearchQuery && !isRackMatched(rack) }
+            ]"
+            @click="openRackDetail(idx)"
+          >
+            <div v-if="hasSearchQuery && getRackMatchCount(rack) > 0" class="rack-list-card-match">
+              <a-tag color="blue">{{ t('rackDiagram.searchMatched', { count: getRackMatchCount(rack) }) }}</a-tag>
+            </div>
+            <div class="rack-list-card-title">{{ rack.name }}</div>
+            <div class="rack-list-card-sub">{{ rack.totalHeight }}U {{ t('rackDiagram.rackUnit') }}</div>
+            <div class="rack-list-card-usage">{{ t('rackDiagram.usage') }} {{ getRackUsagePercent(rack) }}%</div>
+            <a-progress
+              class="rack-list-progress"
+              :percent="getRackUsagePercent(rack)"
+              :show-info="false"
+              size="small"
+              :stroke-width="6"
+            />
+            <div class="rack-list-card-usage-detail">
+              {{ getRackUsedU(rack) }}U {{ t('rackDiagram.used') }} / {{ rack.totalHeight }}U {{ t('rackDiagram.total') }}
+            </div>
+            <div class="rack-list-card-extra">
+              {{ t('rackDiagram.free') }} {{ getRackFreeU(rack) }}U · {{ t('rackDiagram.deviceCount') }} {{ getRackDeviceCount(rack) }}{{ t('rackDiagram.countSuffix') }}
+            </div>
+          </a-card>
+        </div>
+      </div>
+      <div v-else class="rack-canvas">
+        <div class="rack-detail-layout" ref="rackDetailLayoutRef">
+        <div class="rack-main-pane" ref="rackMainPaneRef">
+        <div class="rack-zoom-wrapper" :style="zoomWrapperStyle">
 
           <a-empty v-if="!parsedRacks.length" :description="t('rackDiagram.emptyRack')" style="margin-top: 50px;" />
 
           <div class="rack-container" v-else>
-            <div class="rack-wrapper" v-for="(rack, rIndex) in parsedRacks" :key="rIndex">
+            <div class="rack-wrapper" v-for="{ rack, index: rIndex } in visibleRackEntries" :key="`rack-${rIndex}`">
 
               <div class="rack-header">
                 <div class="rack-header-inner">
-                  <a-tooltip placement="top">
-                    <template #title>
-                      {{ rack.name }} ({{ rack.totalHeight }}U)
-                    </template>
-                    <span class="rack-name-text">
-                      {{ rack.name }} ({{ rack.totalHeight }}U)
-                    </span>
-                  </a-tooltip>
+                  <div class="rack-header-left">
+                    <a-tooltip title="목록으로">
+                      <a-button size="small" shape="circle" class="rack-back-inline-btn" @click="backToRackList">
+                        <template #icon><LeftOutlined /></template>
+                      </a-button>
+                    </a-tooltip>
+                    <a-tooltip placement="top">
+                      <template #title>
+                        {{ rack.name }} ({{ rack.totalHeight }}U)
+                      </template>
+                      <span class="rack-name-text">
+                        {{ rack.name }} ({{ rack.totalHeight }}U)
+                      </span>
+                    </a-tooltip>
+                  </div>
 
                   <div class="rack-header-actions">
-                    <a-button size="small" type="text" @click="moveRack(rIndex, -1)" :disabled="rIndex === 0" :title="t('rackDiagram.moveLeft')">
-                      <LeftOutlined />
-                    </a-button>
-                    <a-button size="small" type="text" @click="moveRack(rIndex, 1)" :disabled="rIndex === parsedRacks.length - 1" :title="t('rackDiagram.moveRight')">
-                      <RightOutlined />
-                    </a-button>
                     <a-button size="small" type="text" @click="cloneRack(rIndex)" :title="t('rackDiagram.cloneRack')">
                       <CopyOutlined />
                     </a-button>
@@ -102,7 +142,7 @@
                 </div>
               </div>
 
-              <div class="rack-body" style="display: flex; margin: 0 auto; width: 372px;">
+              <div class="rack-body">
 
                 <div class="rack-ruler">
                   <div
@@ -114,18 +154,18 @@
                   </div>
                 </div>
 
-                <div class="rack-frame" style="flex: 1; margin: 0;">
-                  <div v-for="(item, iIndex) in rack.items" :key="iIndex" class="rack-item" :style="{ height: (item.height * 32) + 'px' }">
-                  </div>
-                </div>
-
                 <div class="rack-frame" @dragover.prevent @drop.stop="onDropRackFrame(rIndex, $event)">
                   <div
                     v-for="(item, iIndex) in rack.items"
                     :key="iIndex"
                     class="rack-item"
                     @dragover.prevent
-                    :style="{ height: (item.height * 32) + 'px' }"
+                    :data-item-type="item.type"
+                    :style="{
+                      height: (item.height * RACK_UNIT_HEIGHT) + 'px',
+                      opacity: isMatched(item) ? 1 : 0.2,
+                      filter: isMatched(item) ? 'none' : 'grayscale(100%)'
+                    }"
                   >
                     <div v-if="item.type === 'gap'" class="gap-content" @click="openDeviceModal(rIndex, iIndex)">
                       <span>+ {{ item.height }}U {{ t('rackDiagram.gapAddDevice') }}</span>
@@ -134,14 +174,19 @@
                     <div
                       v-else
                       class="device-content"
+                      :class="`device-${item.type}`"
                       draggable="true"
                       @dragstart="onDragStart(rIndex, iIndex)"
-                      :style="{ opacity: isMatched(item) ? 1 : 0.2, filter: isMatched(item) ? 'none' : 'grayscale(100%)' }"
+                      @click="selectDevice(rIndex, iIndex)"
                     >
 
-                      <div class="device-top-line" :style="{ backgroundColor: item.type === 'blank' ? 'transparent' : getIconColor(item.type) }"></div>
+                      <div class="device-top-line" :style="{ backgroundColor: item.type === 'blank' ? 'transparent' : getIconColor(getDevicePanelType(item)) }"></div>
 
-                      <div class="device-pattern" :class="'pattern-' + item.type"></div>
+                      <div
+                        class="device-pattern"
+                        :class="`panel-${getDevicePanelType(item)}`"
+                        v-html="renderDevicePanel(item)"
+                      ></div>
 
                       <svg v-if="item.type === 'ups'" class="ups-watermark" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                         <path d="M13 2.05v9.45h4.5l-8.5 10.45v-9.45H4.5L13 2.05z" fill="rgba(255,255,255,0.03)" />
@@ -149,27 +194,19 @@
 
                       <div
                         class="device-icon-overlay"
-                        :style="{ color: getIconColor(item.type) }"
-                        v-html="getDeviceIcon(item.type)"
+                        :style="{ color: getIconColor(getDevicePanelType(item)) }"
+                        v-html="renderBadgeIcon(getDevicePanelType(item))"
                       ></div>
 
                       <div class="device-name-tag" v-if="item.type !== 'blank'">
-                        <span v-if="item.type !== 'custom'" class="tag-text">{{ item.label }}</span>
-                        <span v-else class="tag-text">{{ item.customType }}</span>
-                        <span class="tag-badge">{{ item.height }}U</span>
+                        <div class="tag-content">
+                          <span v-if="item.type !== 'custom'" class="tag-text">{{ item.label }}</span>
+                          <span v-else class="tag-text">{{ item.customType }}</span>
+                          <span class="tag-badge">{{ item.height }}U</span>
+                        </div>
                       </div>
 
                       <div class="device-actions">
-
-                        <a-tooltip v-if="item.memo" placement="top" color="#108ee9" :mouseEnterDelay="0.1">
-                          <template #title>
-                            <div style="white-space: pre-wrap; font-size: 13px;">{{ item.memo }}</div>
-                          </template>
-                          <a-button size="small" type="text" @click.stop>
-                            <InfoCircleOutlined style="color: #40a9ff !important;" />
-                          </a-button>
-                        </a-tooltip>
-
                         <a-tooltip :title="t('rackDiagram.cloneDevice')" :mouseEnterDelay="0.1">
                           <a-button size="small" type="text" @click.stop="cloneItem(rIndex, iIndex)">
                             <CopyOutlined />
@@ -225,6 +262,62 @@
             </div>
           </div>
         </div>
+        </div>
+        <div
+          v-if="selectedDevice"
+          ref="rackSidePaneSlotRef"
+          class="rack-side-pane-slot"
+        >
+          <div
+            ref="rackSidePaneRef"
+            class="rack-side-pane"
+            :class="{
+              'is-fixed': sidePaneMode === 'fixed',
+              'is-bottom': sidePaneMode === 'bottom'
+            }"
+            :style="sidePaneInlineStyle"
+          >
+          <a-card size="small" class="rack-side-pane-card">
+            <template #title>{{ t('rackDiagram.deviceInfo') }}</template>
+            <template #extra>
+              <a-button size="small" type="text" class="device-info-close-btn" @click="clearSelectedDevice">
+                <CloseOutlined />
+              </a-button>
+            </template>
+            <a-descriptions :column="1" size="small" bordered class="device-info-desc">
+              <a-descriptions-item :label="t('rackDiagram.deviceName')">{{ selectedDevice.label || '-' }}</a-descriptions-item>
+              <a-descriptions-item :label="t('rackDiagram.deviceType')">{{ selectedDevice.type || '-' }}</a-descriptions-item>
+              <a-descriptions-item :label="t('rackDiagram.height')">{{ selectedDevice.height }}U</a-descriptions-item>
+              <a-descriptions-item :label="t('rackDiagram.deviceMemo')">
+                <div v-if="selectedDeviceMemoPlain.length || selectedDeviceMemoLinked.length" class="device-memo-wrap">
+                  <div v-if="selectedDeviceMemoPlain.length" class="device-memo-plain">{{ selectedDeviceMemoPlain.join('\n') }}</div>
+                  <div v-if="selectedDeviceMemoLinked.length" class="device-memo-linked">
+                    <div class="device-memo-linked-list">
+                      <div v-for="(line, idx) in selectedDeviceMemoLinked" :key="`memo-linked-${idx}`">{{ line }}</div>
+                    </div>
+                  </div>
+                </div>
+                <span v-else>-</span>
+              </a-descriptions-item>
+              <a-descriptions-item :label="t('rackDiagram.sourceRef')">{{ selectedDeviceSourceRefLabel }}</a-descriptions-item>
+              <a-descriptions-item v-if="selectedDeviceHostInfo.length" :label="t('label.host')">
+                <div class="device-host-info-list">
+                  <div v-for="(row, idx) in selectedDeviceHostInfo" :key="`host-info-${idx}`">
+                    <strong>{{ row.label }}</strong>: {{ row.value }}
+                  </div>
+                </div>
+              </a-descriptions-item>
+            </a-descriptions>
+            <div class="device-info-actions">
+              <a-button size="small" @click="openDeviceModal(selectedDeviceRackIndex, selectedDeviceItemIndex)">{{ t('rackDiagram.settings') }}</a-button>
+              <a-popconfirm :title="t('rackDiagram.deleteConfirm')" @confirm="deleteItem(selectedDeviceRackIndex, selectedDeviceItemIndex)">
+                <a-button size="small" danger>{{ t('rackDiagram.delete') }}</a-button>
+              </a-popconfirm>
+            </div>
+          </a-card>
+          </div>
+        </div>
+        </div>
       </div>
     </a-spin>
 
@@ -288,9 +381,16 @@
         <a-form-item :label="t('rackDiagram.deviceType')">
           <a-select v-model:value="deviceForm.type" style="width: 100%" @change="handleTypeChange">
             <a-select-option value="server">{{ t('rackDiagram.deviceTypeServer') }}</a-select-option>
+            <a-select-option value="blade">{{ t('rackDiagram.deviceTypeBlade') }}</a-select-option>
             <a-select-option value="switch">{{ t('rackDiagram.deviceTypeSwitch') }}</a-select-option>
+            <a-select-option value="router">{{ t('rackDiagram.deviceTypeRouter') }}</a-select-option>
+            <a-select-option value="loadbalancer">{{ t('rackDiagram.deviceTypeLoadBalancer') }}</a-select-option>
             <a-select-option value="storage">{{ t('rackDiagram.deviceTypeStorage') }}</a-select-option>
+            <a-select-option value="nas">{{ t('rackDiagram.deviceTypeNas') }}</a-select-option>
             <a-select-option value="firewall">{{ t('rackDiagram.deviceTypeFirewall') }}</a-select-option>
+            <a-select-option value="monitoring">{{ t('rackDiagram.deviceTypeMonitoring') }}</a-select-option>
+            <a-select-option value="kvm">{{ t('rackDiagram.deviceTypeKvm') }}</a-select-option>
+            <a-select-option value="cooling">{{ t('rackDiagram.deviceTypeCooling') }}</a-select-option>
             <a-select-option value="ups">UPS</a-select-option>
             <a-select-option value="patch">{{ t('rackDiagram.deviceTypePatch') }}</a-select-option>
             <a-select-option value="pdu">PDU</a-select-option>
@@ -307,7 +407,7 @@
           />
         </a-form-item>
 
-        <a-form-item :label="t('rackDiagram.selectInfraAsset')" v-if="deviceForm.type !== 'blank'">
+        <a-form-item :label="t('rackDiagram.selectInfraAsset')" v-if="deviceForm.type === 'server'">
           <a-select
             v-model:value="deviceForm.sourceRef"
             :loading="inventoryLoading"
@@ -415,13 +515,13 @@ import { message } from 'ant-design-vue'
 import html2canvas from 'html2canvas'
 import { api } from '@/api'
 import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
 import {
   CopyOutlined,
   SettingOutlined,
   DeleteOutlined,
   InfoCircleOutlined,
   LeftOutlined,
-  RightOutlined,
   PlusOutlined,
   FileTextOutlined,
   UploadOutlined,
@@ -432,31 +532,213 @@ import {
   LaptopOutlined,
   AppstoreOutlined,
   MoreOutlined,
-  UnorderedListOutlined
+  UnorderedListOutlined,
+  CloseOutlined
 } from '@ant-design/icons-vue'
 
 // 전역 상태
 const loading = ref(false)
 const saving = ref(false)
-const zoomLevel = ref(1)
+const zoomLevel = ref(0.65)
+const AUTO_ZOOM_MIN = 0.65
+const AUTO_ZOOM_MAX = 1.0
+const isAutoZoomEnabled = ref(true)
+const rackMainPaneRef = ref(null)
+const rackDetailLayoutRef = ref(null)
+const rackSidePaneSlotRef = ref(null)
+const rackSidePaneRef = ref(null)
+const sidePaneMode = ref('static') // static | fixed | bottom
+const sidePaneLeft = ref(0)
+const sidePaneWidth = ref(0)
+const SIDE_PANE_TOP = 64
+let resizeDebounceTimer = null
+let zoomRafId = 0
+let zoomApplyRafId = 0
 const router = useRouter()
+const store = useStore()
 const { proxy } = getCurrentInstance()
 const t = (key, args) => proxy?.$t ? proxy.$t(key, args) : key
+const isDarkMode = computed(() => !!store.getters.darkMode)
+const RACK_UNIT_HEIGHT = 52
 
 // 슬라이더 및 입력창과 연동할 퍼센트 단위 변수
 const zoomPercent = computed({
   get: () => Math.round(zoomLevel.value * 100),
   set: (val) => {
+    isAutoZoomEnabled.value = false
     // 최소 40% ~ 최대 150% 범위 제한
     if (val < 40) val = 40
     if (val > 150) val = 150
     zoomLevel.value = val / 100
   }
 })
+const zoomPercentUi = ref(zoomPercent.value)
+
+const clampZoomPercent = (val) => {
+  let next = Number(val || 0)
+  if (!Number.isFinite(next)) next = zoomPercent.value
+  if (next < 40) next = 40
+  if (next > 150) next = 150
+  return Math.round(next)
+}
+
+const scheduleZoomApply = (percent) => {
+  if (zoomApplyRafId) cancelAnimationFrame(zoomApplyRafId)
+  zoomApplyRafId = requestAnimationFrame(() => {
+    zoomPercent.value = percent
+  })
+}
+
+const onZoomSliderChange = (val) => {
+  zoomPercentUi.value = clampZoomPercent(val)
+  scheduleZoomApply(zoomPercentUi.value)
+}
+
+const onZoomInputChange = (val) => {
+  zoomPercentUi.value = clampZoomPercent(val)
+}
+
+const commitZoomUi = () => {
+  zoomPercentUi.value = clampZoomPercent(zoomPercentUi.value)
+  zoomPercent.value = zoomPercentUi.value
+}
+
+const zoomWrapperStyle = computed(() => {
+  const z = Number(zoomLevel.value || 1)
+  return {
+    zoom: z
+  }
+})
+
+const sidePaneInlineStyle = computed(() => {
+  if (sidePaneMode.value === 'fixed') {
+    return {
+      left: `${Math.round(sidePaneLeft.value)}px`,
+      top: `${SIDE_PANE_TOP}px`,
+      width: `${Math.round(sidePaneWidth.value)}px`
+    }
+  }
+  if (sidePaneMode.value === 'bottom') {
+    return {
+      width: `${Math.round(sidePaneWidth.value)}px`
+    }
+  }
+  return {}
+})
 
 // 데이터 모델
 const parsedRacks = ref([])
+const showRackList = ref(true)
+const selectedRackIndex = ref(-1)
+const selectedDeviceRackIndex = ref(-1)
+const selectedDeviceItemIndex = ref(-1)
+const visibleRackEntries = computed(() => {
+  if (selectedRackIndex.value > -1 && parsedRacks.value[selectedRackIndex.value]) {
+    return [{ rack: parsedRacks.value[selectedRackIndex.value], index: selectedRackIndex.value }]
+  }
+  return parsedRacks.value.map((rack, index) => ({ rack, index }))
+})
+const selectedDevice = computed(() => {
+  if (selectedDeviceRackIndex.value < 0 || selectedDeviceItemIndex.value < 0) return null
+  const rack = parsedRacks.value[selectedDeviceRackIndex.value]
+  const item = rack?.items?.[selectedDeviceItemIndex.value]
+  if (!item || item.type === 'gap') return null
+  return item
+})
+const selectedDeviceHost = ref(null)
+const selectedDeviceMemoPlain = computed(() => {
+  const memo = String(selectedDevice.value?.memo || '')
+  const marker = '[LinkedAsset]'
+  return memo
+    .split('\n')
+    .map(line => line.trim())
+    .filter(line => line && !line.startsWith(marker))
+})
+const selectedDeviceMemoLinked = computed(() => {
+  const memo = String(selectedDevice.value?.memo || '')
+  const marker = '[LinkedAsset]'
+  return memo
+    .split('\n')
+    .map(line => line.trim())
+    .filter(line => line.startsWith(marker))
+    .map(line => line.replace(marker, '').trim())
+})
+const selectedDeviceSourceRefLabel = computed(() => {
+  const sourceRef = String(selectedDevice.value?.sourceRef || '')
+  if (!sourceRef) return '-'
+  if (!sourceRef.startsWith('host:')) return sourceRef
+  const hostId = sourceRef.split(':')[1] || ''
+  const host = selectedDeviceHost.value
+  if (host && String(host.id) === hostId) {
+    return host.name || host.hostname || hostId
+  }
+  return hostId || sourceRef
+})
+const selectedDeviceHostInfo = computed(() => {
+  const host = selectedDeviceHost.value
+  if (!host) return []
+  const toStateLabel = (state) => {
+    const s = String(state || '').toLowerCase()
+    if (s === 'up' || s === 'running') return t('label.running')
+    if (s === 'enabled' || s === 'normal') return t('label.enabled')
+    if (s === 'disabled') return t('label.disabled')
+    return state || '-'
+  }
+  const toPowerLabel = (state) => {
+    const s = String(state || '').toLowerCase()
+    if (!s) return '-'
+    if (s === 'disabled' || s === 'off' || s === 'inactive') return t('label.disabled')
+    if (s === 'enabled' || s === 'on' || s === 'active') return t('label.enabled')
+    return state
+  }
+  const toHaLabel = (v) => {
+    const s = String(v ?? '').toLowerCase()
+    if (s === 'true' || s === 'enabled' || s === 'yes' || s === '1') return t('label.enabled')
+    if (s === 'false' || s === 'disabled' || s === 'no' || s === '0') return t('label.disabled')
+    return '-'
+  }
+
+  const powerRaw = host?.powerstate || host?.outofbandmanagement?.powerstate || host?.details?.powerstate
+  const haRaw = host?.haenable ?? host?.haenabled ?? host?.hahost ?? host?.details?.haenable ?? host?.details?.haenabled ?? host?.details?.hahost
+  return [
+    { label: t('label.ip'), value: host.ipaddress || '-' },
+    { label: t('label.state'), value: toStateLabel(host.state) },
+    { label: t('label.resourcestate'), value: toStateLabel(host.resourcestate) },
+    { label: t('label.powerstate'), value: toPowerLabel(powerRaw) },
+    { label: t('label.ha'), value: toHaLabel(haRaw) },
+    { label: t('label.hypervisor'), value: host.hypervisor || '-' }
+  ]
+})
 
+const updateSidePanePosition = () => {
+  const layout = rackDetailLayoutRef.value
+  const slot = rackSidePaneSlotRef.value
+  const pane = rackSidePaneRef.value
+  if (!layout || !slot || !pane || showRackList.value || !selectedDevice.value) {
+    sidePaneMode.value = 'static'
+    return
+  }
+
+  const layoutRect = layout.getBoundingClientRect()
+  const slotRect = slot.getBoundingClientRect()
+  const paneHeight = pane.offsetHeight
+  const limitBottom = layoutRect.bottom - SIDE_PANE_TOP
+
+  sidePaneWidth.value = slotRect.width
+
+  if (layoutRect.top > SIDE_PANE_TOP) {
+    sidePaneMode.value = 'static'
+    return
+  }
+
+  if (limitBottom <= paneHeight) {
+    sidePaneMode.value = 'bottom'
+    return
+  }
+
+  sidePaneLeft.value = slotRect.left
+  sidePaneMode.value = 'fixed'
+}
 // 데이터 변경 여부 추적
 const isDirty = ref(false)
 
@@ -465,6 +747,27 @@ watch(parsedRacks, () => {
   isDirty.value = true
 }, { deep: true })
 
+watch(zoomPercent, (val) => {
+  zoomPercentUi.value = clampZoomPercent(val)
+})
+
+watch(selectedDevice, async (device) => {
+  nextTick(() => updateSidePanePosition())
+  selectedDeviceHost.value = null
+  const sourceRef = String(device?.sourceRef || '')
+  if (!sourceRef.startsWith('host:')) return
+  const hostId = sourceRef.split(':')[1] || ''
+  if (!hostId) return
+  try {
+    const host = await fetchHostById(hostId)
+    selectedDeviceHost.value = host || null
+  } catch (e) {
+    selectedDeviceHost.value = null
+  }
+})
+
+watch(showRackList, () => nextTick(() => updateSidePanePosition()))
+
 // 페이지 이탈 방지 이벤트 핸들러
 const handleBeforeUnload = (e) => {
   if (isDirty.value) {
@@ -711,16 +1014,6 @@ const cloneRack = (rIndex) => {
   message.success(t('rackDiagram.msg.rackCloned'))
 }
 
-// 랙 순서 좌우 이동 함수
-const moveRack = (rIndex, direction) => {
-  const targetIndex = rIndex + direction
-  if (targetIndex < 0 || targetIndex >= parsedRacks.value.length) return
-
-  const temp = parsedRacks.value[rIndex]
-  parsedRacks.value[rIndex] = parsedRacks.value[targetIndex]
-  parsedRacks.value[targetIndex] = temp
-}
-
 // 랙 모달 저장 로직
 const submitRackModal = () => {
   const rackName = String(rackForm.name || '').trim()
@@ -810,6 +1103,116 @@ const submitRackModal = () => {
 
 const deleteRack = (index) => {
   parsedRacks.value.splice(index, 1)
+  if (selectedRackIndex.value === index) {
+    selectedRackIndex.value = -1
+    showRackList.value = true
+  } else if (selectedRackIndex.value > index) {
+    selectedRackIndex.value -= 1
+  }
+  if (!parsedRacks.value.length) showRackList.value = true
+}
+
+const openRackDetail = (index) => {
+  if (index < 0 || index >= parsedRacks.value.length) return
+  selectedRackIndex.value = index
+  selectedDeviceRackIndex.value = -1
+  selectedDeviceItemIndex.value = -1
+  showRackList.value = false
+  isAutoZoomEnabled.value = true
+  nextTick(() => applyResponsiveZoom(true))
+}
+
+const backToRackList = () => {
+  selectedRackIndex.value = -1
+  selectedDeviceRackIndex.value = -1
+  selectedDeviceItemIndex.value = -1
+  showRackList.value = true
+}
+
+const applyResponsiveZoom = (force = false) => {
+  if (showRackList.value) return
+  if (!force && !isAutoZoomEnabled.value) return
+
+  const mainPaneWidth = rackMainPaneRef.value?.clientWidth || 0
+  if (!mainPaneWidth) return
+
+  // 랙 1개 상세 기준의 대략적 기준폭(헤더/스크롤 여유 포함)
+  const baseWidth = 1280
+  const ratio = mainPaneWidth / baseWidth
+  const nextZoom = Math.max(AUTO_ZOOM_MIN, Math.min(AUTO_ZOOM_MAX, Number(ratio.toFixed(2))))
+  zoomLevel.value = nextZoom
+}
+
+const handleResponsiveResize = () => {
+  if (resizeDebounceTimer) clearTimeout(resizeDebounceTimer)
+  resizeDebounceTimer = setTimeout(() => {
+    if (zoomRafId) cancelAnimationFrame(zoomRafId)
+    zoomRafId = requestAnimationFrame(() => {
+      applyResponsiveZoom(false)
+      updateSidePanePosition()
+    })
+  }, 120)
+}
+
+const selectDevice = (rIndex, iIndex) => {
+  selectedDeviceRackIndex.value = rIndex
+  selectedDeviceItemIndex.value = iIndex
+}
+
+const clearSelectedDevice = () => {
+  selectedDeviceRackIndex.value = -1
+  selectedDeviceItemIndex.value = -1
+}
+
+const getRackUsedU = (rack) => {
+  if (!rack?.items?.length) return 0
+  return rack.items
+    .filter(item => item.type !== 'gap')
+    .reduce((sum, item) => sum + Number(item.height || 0), 0)
+}
+const getRackFreeU = (rack) => Math.max(0, Number(rack?.totalHeight || 0) - getRackUsedU(rack))
+const getRackDeviceCount = (rack) => (rack?.items || []).filter(item => item.type !== 'gap').length
+const getRackUsagePercent = (rack) => {
+  const total = Number(rack?.totalHeight || 0)
+  if (!total) return 0
+  return Math.round((getRackUsedU(rack) / total) * 100)
+}
+const searchQuery = ref('')
+const hasSearchQuery = computed(() => !!searchQuery.value?.trim())
+
+const getRackMatchCount = (rack) => {
+  const query = searchQuery.value?.trim().toLowerCase()
+  if (!query) return 0
+
+  let count = 0
+  if ((rack?.name || '').toLowerCase().includes(query)) count += 1
+
+  for (const item of (rack?.items || [])) {
+    if (item?.type === 'gap') continue
+    const target = `${item?.label || ''} ${item?.memo || ''} ${item?.sourceRef || ''}`.toLowerCase()
+    if (target.includes(query)) count += 1
+  }
+  return count
+}
+
+const isRackMatched = (rack) => {
+  const query = searchQuery.value?.trim().toLowerCase()
+  if (!query) return true
+  if ((rack?.name || '').toLowerCase().includes(query)) return true
+
+  return (rack?.items || []).some((item) => {
+    if (item?.type === 'gap') return false
+    const target = `${item?.label || ''} ${item?.memo || ''} ${item?.sourceRef || ''}`.toLowerCase()
+    return target.includes(query)
+  })
+}
+
+const isMatched = (item) => {
+  const query = searchQuery.value?.trim().toLowerCase()
+  if (!query) return true
+  if (item?.type === 'gap') return true
+  const target = `${item?.label || ''} ${item?.memo || ''} ${item?.sourceRef || ''}`.toLowerCase()
+  return target.includes(query)
 }
 
 // ---------------- 장비 모달/관리 로직 ----------------
@@ -993,8 +1396,9 @@ const getDesiredStartUFromRackEvent = (event, rack) => {
   if (!event?.currentTarget) return 0
   const rect = event.currentTarget.getBoundingClientRect()
   const y = Math.max(0, Math.min(rect.height - 1, event.clientY - rect.top))
-  const raw = Math.floor(y / 32)
   const rackHeight = rack?.totalHeight || rack.items.reduce((s, i) => s + i.height, 0)
+  const unitHeight = rect.height / rackHeight
+  const raw = Math.floor(y / unitHeight)
   return Math.max(0, Math.min(rackHeight - 1, raw))
 }
 
@@ -1250,9 +1654,16 @@ const maxAllowedHeight = computed(() => {
 // 각 장비별 기본 라벨명 매핑
 const defaultLabelKeys = {
   server: 'rackDiagram.defaultLabelServer',
+  blade: 'rackDiagram.defaultLabelBlade',
   switch: 'rackDiagram.defaultLabelSwitch',
+  router: 'rackDiagram.defaultLabelRouter',
+  loadbalancer: 'rackDiagram.defaultLabelLoadBalancer',
   storage: 'rackDiagram.defaultLabelStorage',
+  nas: 'rackDiagram.defaultLabelNas',
   firewall: 'rackDiagram.defaultLabelFirewall',
+  monitoring: 'rackDiagram.defaultLabelMonitoring',
+  kvm: 'rackDiagram.defaultLabelKvm',
+  cooling: 'rackDiagram.defaultLabelCooling',
   patch: 'rackDiagram.defaultLabelPatch',
   pdu: 'rackDiagram.defaultLabelPdu',
   ups: 'rackDiagram.defaultLabelUps',
@@ -1302,6 +1713,9 @@ const handleTypeChange = (newType) => {
   if (isLabelEmpty || isLabelDefault) {
     deviceForm.label = getDefaultLabel(newType) || ''
   }
+  if (newType !== 'server') {
+    deviceForm.sourceRef = undefined
+  }
 }
 
 const closeDeviceModal = () => {
@@ -1455,6 +1869,11 @@ const deleteItem = (rIndex, iIndex) => {
       rack.items.splice(i, 1)
     }
   }
+
+  if (selectedDeviceRackIndex.value === rIndex && selectedDeviceItemIndex.value === iIndex) {
+    selectedDeviceRackIndex.value = -1
+    selectedDeviceItemIndex.value = -1
+  }
 }
 
 // ---------------- 장비 이동(이사) 로직 ----------------
@@ -1541,55 +1960,438 @@ const getDeviceIcon = (type) => {
     server: `<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M20 10H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2zm-10-5h2v2h-2V5zm6 0h2v2h-2V5zM20 22H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2zm-10-5h2v2h-2v-2zm6 0h2v2h-2v-2z"/></svg>`,
     switch: `<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><rect x="2" y="5" width="20" height="14" rx="2"/><circle cx="6" cy="12" r="1.5" fill="black"/><circle cx="12" cy="12" r="1.5" fill="black"/><circle cx="18" cy="12" r="1.5" fill="black"/></svg>`,
     storage: `<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 2C6.48 2 2 3.8 2 6v12c0 2.2 4.48 4 10 4s10-1.8 10-4V6c0-2.2-4.48-4-10-4zm0 18c-4.41 0-8-1.34-8-3s3.59-3 8-3 8 1.34 8 3-3.59 3-8 3zm0-10c-4.41 0-8-1.34-8-3s3.59-3 8-3 8 1.34 8 3-3.59 3-8 3z"/></svg>`,
+    blade: `<svg viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="4" width="4" height="16" rx="1"/><rect x="9" y="4" width="4" height="16" rx="1"/><rect x="15" y="4" width="4" height="16" rx="1"/></svg>`,
     firewall: `<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/></svg>`,
+    router: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l4 4h-3v4h-2V7H8l4-4zM5 13h14a2 2 0 012 2v3a2 2 0 01-2 2H5a2 2 0 01-2-2v-3a2 2 0 012-2zm2 3a1 1 0 100 2 1 1 0 000-2z"/></svg>`,
+    loadbalancer: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 5h4v4H5V5zm10 0h4v4h-4V5zM5 15h4v4H5v-4zm7-7l3 3h-2v2h2l-3 3-3-3h2v-2H9l3-3z"/></svg>`,
+    nas: `<svg viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="3" width="16" height="18" rx="2"/><rect x="7" y="6" width="10" height="3" fill="white" opacity=".45"/><circle cx="9" cy="16" r="1.3" fill="white" opacity=".55"/><circle cx="15" cy="16" r="1.3" fill="white" opacity=".55"/></svg>`,
+    monitoring: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 5h18v12H3V5zm3 7h3l2-4 3 7 2-3h2v-2h-3l-1 1.5L11 5 8 10H6v2zm3 7h6v2H9v-2z"/></svg>`,
+    kvm: `<svg viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="4" width="18" height="11" rx="1"/><rect x="6" y="17" width="12" height="2" rx="1"/><rect x="8" y="20" width="8" height="1"/></svg>`,
     ups: `<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M13 2.05v9.45h4.5l-8.5 10.45v-9.45H4.5L13 2.05z"/></svg>`,
     patch: `<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M22 7H2v10h20V7zm-14 6H4v-2h4v2zm6 0h-4v-2h4v2zm6 0h-4v-2h4v2z"/></svg>`,
     pdu: `<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><rect x="7" y="2" width="10" height="20" rx="2"/><circle cx="12" cy="6" r="1.5" fill="black"/><circle cx="12" cy="12" r="1.5" fill="black"/><circle cx="12" cy="18" r="1.5" fill="black"/></svg>`,
+    cooling: `<svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="3"/><path d="M12 2a5 5 0 014 8c-2 0-4-1-5-3-.6-1.4-.2-3.2 1-5zM22 12a5 5 0 01-8 4c0-2 1-4 3-5 1.4-.6 3.2-.2 5 1zM12 22a5 5 0 01-4-8c2 0 4 1 5 3 .6 1.4.2 3.2-1 5zM2 12a5 5 0 018-4c0 2-1 4-3 5-1.4.6-3.2.2-5-1z"/></svg>`,
+    blank: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="7" width="16" height="10" rx="2"/><line x1="7" y1="12" x2="17" y2="12"/></svg>`,
     custom: `<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 2L1 21h22L12 2zm0 4.19L19.53 19H4.47L12 6.19z"/></svg>`
   }
   return icons[type] || icons.custom
 }
 
+const renderBadgeIcon = (type) => getDeviceIcon(type)
+
+const getDevicePanelType = (item) => {
+  const text = `${item?.type || ''} ${item?.customType || ''} ${item?.label || ''}`.toLowerCase()
+  if (text.includes('blade') || text.includes('블레이드')) return 'blade'
+  if (text.includes('router') || text.includes('라우터')) return 'router'
+  if (text.includes('load') || text.includes('balance') || text.includes('로드')) return 'loadbalancer'
+  if (text.includes('nas')) return 'nas'
+  if (text.includes('monitor') || text.includes('모니터')) return 'monitoring'
+  if (text.includes('kvm') || text.includes('console') || text.includes('콘솔')) return 'kvm'
+  if (text.includes('cool') || text.includes('fan') || text.includes('쿨링')) return 'cooling'
+  if (text.includes('patch') || text.includes('패치')) return 'patch'
+  if (text.includes('firewall') || text.includes('방화벽')) return 'firewall'
+  if (text.includes('switch') || text.includes('스위치')) return 'switch'
+  if (text.includes('storage') || text.includes('스토리지')) return 'storage'
+  if (text.includes('pdu')) return 'pdu'
+  if (text.includes('ups')) return 'ups'
+  if (text.includes('server') || text.includes('서버') || text.includes('host') || text.includes('agent')) return 'server'
+  return item?.type || 'custom'
+}
+
+const PANEL_VIEW_WIDTH = 760
+const PANEL_UNIT_HEIGHT = RACK_UNIT_HEIGHT
+const PANEL_GAP = 8
+const PANEL_PAD_X = 12
+const PANEL_PAD_Y = 6
+const DETAIL = {
+  fill: 'detail-fill',
+  mid: 'detail-mid',
+  dark: 'detail-dark',
+  line: 'detail-line'
+}
+
+const n = (value) => Number(value.toFixed(2))
+const svgRect = (x, y, w, h, cls = DETAIL.mid, rx = 2) => `<rect x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" rx="${rx}" class="${cls}" />`
+const svgCircle = (cx, cy, r, cls = DETAIL.dark) => `<circle cx="${n(cx)}" cy="${n(cy)}" r="${n(r)}" class="${cls}" />`
+const svgLine = (x1, y1, x2, y2, cls = DETAIL.line) => `<line x1="${n(x1)}" y1="${n(y1)}" x2="${n(x2)}" y2="${n(y2)}" class="${cls}" />`
+const svgPolyline = (points, cls = DETAIL.line) => `<polyline points="${points.map(([x, y]) => `${n(x)},${n(y)}`).join(' ')}" class="${cls}" />`
+const repeat = (count, renderer) => Array.from({ length: count }, (_, index) => renderer(index)).join('')
+
+const svgPort = (x, y, w = 16, h = 12) => `${svgRect(x, y, w, h, 'port-shell', 1.5)}${svgRect(x + 3, y + 3, w - 6, h - 5, 'port-hole', 0.5)}`
+const svgOutlet = (x, y, w = 28, h = 22) => `<g>${svgRect(x, y, w, h, 'outlet-shell', 4)}${svgRect(x + w * 0.32, y + h * 0.28, 3, h * 0.44, 'port-hole', 1)}${svgRect(x + w * 0.58, y + h * 0.28, 3, h * 0.44, 'port-hole', 1)}</g>`
+const svgPlug = (x, y, w = 34, h = 28) => {
+  const cut = Math.min(4.5, w * 0.12)
+  const points = [
+    [x + cut, y],
+    [x + w - cut, y],
+    [x + w, y + cut],
+    [x + w, y + h - cut],
+    [x + w - cut, y + h],
+    [x + cut, y + h],
+    [x, y + h - cut],
+    [x, y + cut]
+  ].map(([px, py]) => `${n(px)},${n(py)}`).join(' ')
+  const slotW = Math.max(1.8, w * 0.08)
+  const slotH = Math.max(7, h * 0.3)
+  const slotY = y + h * 0.3
+  const slot1X = x + w * 0.36
+  const slot2X = x + w * 0.56
+  const groundDotX = x + w / 2
+  const groundDotY = y + h * 0.76
+  return `<g><polygon points="${points}" class="plug-shell" />${svgRect(slot1X, slotY, slotW, slotH, 'plug-slot', 0.8)}${svgRect(slot2X, slotY, slotW, slotH, 'plug-slot', 0.8)}${svgCircle(groundDotX, groundDotY, 1.2, 'plug-slot')}</g>`
+}
+
+const rowMetric = (item) => {
+  const rawRowSpan = Number(item?.height || item?.rowSpan || 1)
+  const rowSpan = Number.isFinite(rawRowSpan) ? Math.max(1, rawRowSpan) : 1
+  const viewHeight = rowSpan * PANEL_UNIT_HEIGHT
+  return {
+    rowSpan,
+    viewHeight,
+    panelX: PANEL_PAD_X,
+    panelY: PANEL_PAD_Y,
+    panelW: PANEL_VIEW_WIDTH - PANEL_PAD_X * 2,
+    panelH: viewHeight - PANEL_GAP
+  }
+}
+const sizeTier = (rowSpan) => (rowSpan >= 3 ? 'large' : (rowSpan >= 2 ? 'medium' : 'compact'))
+const centerY = (panelY, panelH, h) => Math.max(panelY + 2, panelY + (panelH - h) / 2)
+const centerX = (panelX, panelW, w) => panelX + (panelW - w) / 2
+const densityByHeight = (panelH, base, step = 32) => Math.max(base, base + Math.floor((panelH - 44) / step))
+const fitRange = (v, min, max) => Math.max(min, Math.min(max, v))
+
+const slots = (x, y, count, slotW, slotH, gap, led = true) => repeat(count, i => {
+  const sx = x + i * (slotW + gap)
+  return `${svgRect(sx, y, slotW, slotH, DETAIL.fill, 1.5)}${svgRect(sx + 2, y + 2, slotW - 4, Math.max(4, slotH * 0.2), 'detail-soft', 1)}${led ? svgCircle(sx + slotW / 2, y + slotH - 6, 2, DETAIL.dark) : ''}`
+})
+
+const vents = (x, y, count, h, gap = 9, w = 4) => repeat(count, i => svgRect(x + i * gap, y, w, h, DETAIL.mid, 1))
+const fan = (cx, cy, rX, rY) => `<g>${`<ellipse cx="${n(cx)}" cy="${n(cy)}" rx="${n(rX)}" ry="${n(rY)}" class="fan-ring" />`}${`<ellipse cx="${n(cx)}" cy="${n(cy)}" rx="${n(rX * 0.18)}" ry="${n(rY * 0.18)}" class="${DETAIL.mid}" />`}${svgLine(cx - rX * 0.82, cy, cx + rX * 0.82, cy, 'fan-line')}${svgLine(cx, cy - rY * 0.82, cx, cy + rY * 0.82, 'fan-line')}${svgLine(cx - rX * 0.58, cy - rY * 0.58, cx + rX * 0.58, cy + rY * 0.58, 'fan-line')}${svgLine(cx - rX * 0.58, cy + rY * 0.58, cx + rX * 0.58, cy - rY * 0.58, 'fan-line')}</g>`
+
+const renderStorageDetails = ({ panelX, panelY, panelW, panelH, rowSpan }) => {
+  const tier = sizeTier(rowSpan)
+  const count = fitRange(densityByHeight(panelH, 14, 34), 12, 22)
+  const slotH = tier === 'compact' ? 28 : (tier === 'medium' ? 44 : 62)
+  const slotW = tier === 'large' ? 18 : 20
+  const gap = fitRange((panelW - count * slotW) / Math.max(1, (count - 1)), 8, 14)
+  const totalW = count * slotW + (count - 1) * gap
+  const x = panelX + (panelW - totalW) / 2
+  const y = centerY(panelY, panelH, slotH)
+  return slots(x, y, count, slotW, slotH, gap, true)
+}
+
+const renderServerDetails = ({ panelX, panelY, panelW, panelH, rowSpan }) => {
+  const tier = sizeTier(rowSpan)
+  const bandH = tier === 'compact' ? 28 : (tier === 'medium' ? 40 : 56)
+  const y = centerY(panelY, panelH, bandH)
+  const cy = panelY + panelH / 2
+  const driveY = y + 2
+  const portY = y + bandH - 13
+  const ventCount = fitRange(densityByHeight(panelH, 8, 40), 8, 14)
+  const driveCount = tier === 'large' ? 4 : 3
+  return `${vents(panelX + 32, y + 4, ventCount, 32, 10, 5)}${svgCircle(panelX + 172, cy, 4, 'fan-ring')}${svgCircle(panelX + 198, cy, 2.3, DETAIL.dark)}${repeat(driveCount, i => svgRect(panelX + panelW - 205 + i * 52, driveY, 42, 14, 'drive'))}${repeat(driveCount, i => svgPort(panelX + panelW - 205 + i * 52, portY, 38, 11))}`
+}
+
+const renderBladeDetails = ({ panelX, panelY, panelW, panelH, rowSpan }) => {
+  const tier = sizeTier(rowSpan)
+  const count = fitRange(densityByHeight(panelH, 20, 26), 20, 34)
+  const slotW = 13
+  const gap = fitRange((panelW - count * slotW) / Math.max(1, (count - 1)), 5, 10)
+  const slotH = tier === 'compact' ? 28 : (tier === 'medium' ? 42 : 60)
+  const totalW = count * slotW + (count - 1) * gap
+  const x = panelX + (panelW - totalW) / 2
+  const y = centerY(panelY, panelH, slotH)
+  return repeat(count, i => {
+    const sx = x + i * (slotW + gap)
+    return `${svgRect(sx, y, slotW, slotH, 'blade-slot', 1)}${svgRect(sx + 2, y + 4, slotW - 4, 5, 'detail-soft', 0.5)}${svgCircle(sx + slotW / 2, y + slotH - 6, 1.8, DETAIL.dark)}`
+  })
+}
+
+const renderSwitchDetails = ({ panelX, panelY, panelW, panelH, rowSpan }) => {
+  const tier = sizeTier(rowSpan)
+  const portW = 16
+  const portH = tier === 'compact' ? 9 : 10
+  const rowGap = tier === 'compact' ? 5 : 6
+  const startY = centerY(panelY, panelH, portH * 2 + rowGap)
+  const cols = fitRange(densityByHeight(panelH, 10, 34), 10, 16)
+  const gapX = fitRange((panelW - 260 - cols * portW) / Math.max(1, cols - 1), 7, 13)
+  const row2cols = Math.max(8, cols - 2)
+  return `${repeat(cols, i => svgPort(panelX + 38 + i * (portW + gapX), startY, portW, portH))}${repeat(row2cols, i => svgPort(panelX + 38 + i * (portW + gapX), startY + portH + rowGap, portW, portH))}${repeat(tier === 'large' ? 4 : 3, i => svgPort(panelX + panelW - 122 + i * 28, panelY + panelH / 2 - 7, 20, 14))}`
+}
+
+const renderPatchPanelDetails = ({ panelX, panelY, panelW, panelH, rowSpan }) => {
+  const count = fitRange(densityByHeight(panelH, 18, 32), 18, 30)
+  const portW = 15
+  const gap = fitRange((panelW - count * portW) / Math.max(1, count - 1), 6, 11)
+  const totalW = count * portW + (count - 1) * gap
+  const x = panelX + (panelW - totalW) / 2
+  const y = panelY + panelH / 2 - 7
+  return repeat(count, i => svgPort(x + i * (portW + gap), y, portW, 14))
+}
+
+const renderRouterDetails = ({ panelX, panelY, panelW, panelH, rowSpan }) => {
+  const tier = sizeTier(rowSpan)
+  const portCount = tier === 'large' ? 7 : 6
+  return `${svgCircle(panelX + 38, panelY + panelH / 2, 3, DETAIL.dark)}${svgCircle(panelX + 60, panelY + panelH / 2, 3, DETAIL.dark)}${svgCircle(panelX + 82, panelY + panelH / 2, 3, DETAIL.dark)}${vents(panelX + 140, panelY + panelH / 2 - 16, tier === 'large' ? 8 : 7, 32, 14, 5)}${svgPolyline([[panelX + 255, panelY + panelH / 2], [panelX + 300, panelY + panelH / 2], [panelX + 322, panelY + panelH / 2 - 12]], 'detail-line')}${repeat(portCount, i => svgPort(panelX + panelW - 205 + i * 28, panelY + panelH / 2 - 7, 20, 14))}`
+}
+
+const renderFirewallDetails = ({ panelX, panelY, panelW, panelH, rowSpan }) => {
+  const tier = sizeTier(rowSpan)
+  const baseX = panelX + 165
+  const baseY = panelY + panelH / 2 - 20
+  const portCount = tier === 'large' ? 6 : 5
+  return `${svgCircle(panelX + 42, panelY + panelH / 2, 4, DETAIL.dark)}${repeat(6, i => svgRect(baseX + i * 18, baseY + (5 - i) * 3, 14, 26 - Math.abs(i - 3) * 3, DETAIL.mid, 1))}${repeat(5, i => svgRect(baseX + 130 + i * 18, baseY + i * 3, 14, 22 - i * 2, DETAIL.fill, 1))}${repeat(portCount, i => svgPort(panelX + panelW - 200 + i * 30, panelY + panelH / 2 - 7, 22, 14))}`
+}
+
+const renderLoadBalancerDetails = ({ panelX, panelY, panelW, panelH, rowSpan }) => {
+  const tier = sizeTier(rowSpan)
+  const cy = panelY + panelH / 2
+  const outputs = tier === 'large' ? 8 : 6
+  return `${repeat(5, i => svgCircle(panelX + 38 + i * 28, cy, 3, DETAIL.dark))}${svgPolyline([[panelX + 190, cy], [panelX + 255, cy], [panelX + 305, cy - 18]], 'detail-line')}${svgPolyline([[panelX + 255, cy], [panelX + 305, cy]], 'detail-line')}${svgPolyline([[panelX + 255, cy], [panelX + 305, cy + 18]], 'detail-line')}${repeat(outputs, i => svgCircle(panelX + panelW - 175 + i * 20, cy, 2.5, DETAIL.dark))}${svgCircle(panelX + panelW - 32, cy, 7, 'fan-ring')}`
+}
+
+const renderNasDetails = ({ panelX, panelY, panelW, panelH, rowSpan }) => {
+  const tier = sizeTier(rowSpan)
+  const driveH = tier === 'compact' ? 28 : (tier === 'medium' ? 36 : 52)
+  const y = centerY(panelY, panelH, driveH)
+  const bays = tier === 'large' ? 6 : 5
+  return `${repeat(bays, i => `${svgRect(panelX + 32 + i * 48, y, 34, driveH, 'drive')}${svgRect(panelX + 39 + i * 48, y + 8, 20, 6, 'detail-soft', 1)}${svgCircle(panelX + 49 + i * 48, y + driveH - 8, 2.2, DETAIL.dark)}`)}${vents(panelX + panelW - 205, panelY + panelH / 2 - 20, tier === 'large' ? 15 : 13, 40, 10, 4)}${svgCircle(panelX + panelW - 60, panelY + panelH / 2, 3, DETAIL.dark)}${svgCircle(panelX + panelW - 42, panelY + panelH / 2, 3, DETAIL.dark)}${svgPort(panelX + panelW - 22, panelY + panelH / 2 - 8, 16, 16)}`
+}
+
+const renderMonitoringDetails = ({ panelX, panelY, panelW, panelH, rowSpan }) => {
+  const tier = sizeTier(rowSpan)
+  const cy = panelY + panelH / 2
+  const screenX = panelX + 92
+  const indicators = tier === 'large' ? 6 : 5
+  return `${svgCircle(panelX + 38, cy, 3, DETAIL.dark)}${svgRect(screenX, cy - 16, 150, 32, 'screen')}${svgPolyline([[screenX + 14, cy + 2], [screenX + 32, cy + 2], [screenX + 42, cy - 8], [screenX + 54, cy + 12], [screenX + 70, cy - 13], [screenX + 86, cy + 8], [screenX + 100, cy - 4], [screenX + 118, cy + 2], [screenX + 138, cy + 2]], 'detail-line')}${repeat(indicators, i => svgCircle(panelX + panelW - 168 + i * 24, cy, 3, DETAIL.dark))}${svgPort(panelX + panelW - 30, cy - 9, 18, 18)}`
+}
+
+const renderKvmDetails = ({ panelX, panelY, panelW, panelH, rowSpan }) => {
+  const tier = sizeTier(rowSpan)
+  const keyCols = tier === 'large' ? 4 : 3
+  const keyRows = tier === 'large' ? 3 : 3
+  const keyW = 13
+  const keyH = 12
+  const keyGapX = 8
+  const keyGapY = 7
+  const keyBlockH = keyRows * keyH + (keyRows - 1) * keyGapY
+  const keyStartX = panelX + 26
+  const keyStartY = centerY(panelY, panelH, keyBlockH)
+
+  const displayW = tier === 'large' ? 132 : 118
+  const displayH = tier === 'large' ? 32 : 28
+  const displayX = panelX + 172
+  const displayY = centerY(panelY, panelH, displayH)
+
+  const rightX = panelX + panelW - 188
+  const rightW = 158
+  const rightY = panelY + 8
+  const rightH = panelH - 16
+  const controlBtnCount = tier === 'large' ? 3 : 2
+  const portsCount = tier === 'large' ? 4 : 3
+  const portW = 20
+  const portH = 12
+  const portsTotalW = portsCount * portW + (portsCount - 1) * 10
+  const portsStartX = centerX(rightX, rightW, portsTotalW)
+  const portsY = rightY + rightH - 18
+
+  return `${repeat(keyCols * keyRows, i => svgRect(keyStartX + (i % keyCols) * (keyW + keyGapX), keyStartY + Math.floor(i / keyCols) * (keyH + keyGapY), keyW, keyH, 'key', 1))}${svgRect(displayX, displayY, displayW, displayH, 'screen')}${svgRect(displayX + 12, displayY + 8, displayW - 24, 5, 'detail-soft', 1)}${svgRect(rightX, rightY, rightW, rightH, 'detail-soft', 3)}${repeat(controlBtnCount, i => svgCircle(rightX + 26 + i * 24, rightY + 14, 3.5, DETAIL.dark))}${repeat(controlBtnCount, i => svgRect(rightX + 96 + i * 16, rightY + 10, 11, 8, 'key', 1))}${repeat(portsCount, i => svgPort(portsStartX + i * (portW + 10), portsY, portW, portH))}`
+}
+
+const renderPduDetails = ({ panelX, panelY, panelW, panelH, rowSpan }) => {
+  const tier = sizeTier(rowSpan)
+  const outletW = 30
+  const outletH = tier === 'compact' ? 18 : (tier === 'medium' ? 24 : 28)
+  const y = centerY(panelY, panelH, outletH)
+  const outletCount = tier === 'large' ? 10 : 9
+  return `${repeat(outletCount, i => svgOutlet(panelX + 22 + i * 40, y, outletW, outletH))}${svgPort(panelX + panelW - 120, panelY + panelH / 2 - 8, 24, 16)}${svgCircle(panelX + panelW - 72, panelY + panelH / 2, 3, DETAIL.dark)}${svgCircle(panelX + panelW - 48, panelY + panelH / 2, 3, DETAIL.dark)}`
+}
+
+const renderUpsStatus = (x, y, w, h) => {
+  const batteryW = 60
+  const batteryH = 20
+  const batteryX = x + 18
+  const batteryY = y + h * 0.5 - batteryH / 2
+  const waveX = x + w - 72
+  const waveY = y + h * 0.5
+  return `${svgRect(x, y, w, h, 'screen', 2)}${svgRect(batteryX, batteryY, batteryW, batteryH, 'battery', 2)}${svgRect(batteryX + batteryW, batteryY + 6, 8, 8, 'battery', 1)}${svgRect(x + 20, y + 14, w - 40, 10, 'detail-soft', 1)}${repeat(4, i => svgRect(x + 24 + i * 22, y + h - 16, 14, 7, i < 2 ? DETAIL.mid : DETAIL.dark, 1))}${svgPolyline([[waveX - 28, waveY + 2], [waveX - 16, waveY + 2], [waveX - 10, waveY - 8], [waveX - 2, waveY + 8], [waveX + 10, waveY - 2]], 'detail-line')}`
+}
+
+const renderUpsPlugs = (x, y, cols, rows, plugW, plugH, gapX, gapY) => {
+  return repeat(cols * rows, i => svgPlug(x + (i % cols) * (plugW + gapX), y + Math.floor(i / cols) * (plugH + gapY), plugW, plugH))
+}
+
+const renderUpsDetailsCompact = ({ panelX, panelY, panelW, panelH }) => {
+  const cy = panelY + panelH / 2
+  const plugW = 28
+  const plugH = 22
+  const leftX = panelX + 18
+  const leftY = cy - plugH / 2
+  const statusW = 150
+  const statusH = 34
+  const statusX = panelX + 170
+  const statusY = cy - statusH / 2
+  const rightX = panelX + panelW - 188
+  return `${renderUpsPlugs(leftX, leftY, 3, 1, plugW, plugH, 10, 10)}${renderUpsStatus(statusX, statusY, statusW, statusH)}${svgRect(rightX, cy - 16, 68, 32, 'drive')}${repeat(8, i => svgRect(rightX + 84 + i * 8, cy - 16, 4, 32, DETAIL.mid, 1))}`
+}
+
+const renderUpsDetailsMedium = ({ panelX, panelY, panelW, panelH }) => {
+  const leftBoxX = panelX + 18
+  const leftBoxY = panelY + 10
+  const leftBoxW = 195
+  const leftBoxH = panelH - 20
+  const plugW = 45
+  const plugH = 24
+  const gapX = 10
+  const gapY = 12
+  const plugGroupW = plugW * 3 + gapX * 2
+  const plugStartX = centerX(leftBoxX, leftBoxW, plugGroupW)
+  const plugStartY = centerY(leftBoxY, leftBoxH, plugH * 2 + gapY)
+  const statusW = 184
+  const statusH = 66
+  const statusX = panelX + 238
+  const statusY = centerY(panelY, panelH, statusH)
+  const rightBoxX = panelX + panelW - 214
+  const rightBoxY = panelY + 14
+  const rightBoxH = panelH - 28
+  return `${svgRect(leftBoxX, leftBoxY, leftBoxW, leftBoxH, 'detail-soft', 4)}${renderUpsPlugs(plugStartX, plugStartY, 3, 2, plugW, plugH, gapX, gapY)}${renderUpsStatus(statusX, statusY, statusW, statusH)}${svgRect(rightBoxX, rightBoxY, 78, rightBoxH, 'drive')}${svgRect(rightBoxX + 12, rightBoxY + 12, 54, 10, 'detail-soft', 1)}${repeat(11, i => svgRect(rightBoxX + 92 + i * 9, rightBoxY, 4, rightBoxH, DETAIL.mid, 1))}`
+}
+
+const renderUpsDetailsLarge = ({ panelX, panelY, panelW, panelH }) => {
+  const leftBoxX = panelX + 18
+  const leftBoxH = 118
+  const leftBoxY = centerY(panelY, panelH, leftBoxH)
+  const leftBoxW = 210
+  const plugW = 60
+  const plugH = 26
+  const gapX = 10
+  const gapY = 10
+  const plugGroupW = plugW * 3 + gapX * 2
+  const plugStartX = centerX(leftBoxX, leftBoxW, plugGroupW)
+  const plugStartY = centerY(leftBoxY, leftBoxH, plugH * 2 + gapY)
+  const statusW = 198
+  const statusH = 88
+  const statusX = panelX + 240
+  const statusY = centerY(panelY, panelH, statusH)
+  const rightBoxX = panelX + panelW - 222
+  const rightBoxY = panelY + 16
+  const rightBoxH = panelH - 32
+  const ventsX = rightBoxX + 92
+  return `${svgRect(leftBoxX, leftBoxY, leftBoxW, leftBoxH, 'detail-soft', 4)}${renderUpsPlugs(plugStartX, plugStartY, 3, 2, plugW, plugH, gapX, gapY)}${repeat(3, i => svgCircle(plugStartX + 10 + i * 46, leftBoxY + leftBoxH - 10, 2, DETAIL.dark))}${renderUpsStatus(statusX, statusY, statusW, statusH)}${repeat(4, i => svgRect(statusX + 20 + i * 24, statusY + statusH - 14, 14, 7, DETAIL.dark, 1))}${svgRect(rightBoxX, rightBoxY, 82, rightBoxH, 'drive')}${svgRect(rightBoxX + 12, rightBoxY + 14, 58, 11, 'detail-soft', 1)}${svgRect(rightBoxX + 16, rightBoxY + rightBoxH - 34, 22, 10, DETAIL.dark, 1)}${svgRect(rightBoxX + 44, rightBoxY + rightBoxH - 34, 22, 10, DETAIL.dark, 1)}${repeat(12, i => svgRect(ventsX + i * 9, rightBoxY, 4, rightBoxH, DETAIL.mid, 1))}${repeat(3, i => svgCircle(ventsX + 8 + i * 36, rightBoxY + rightBoxH - 6, 2.2, DETAIL.dark))}`
+}
+
+const renderUpsDetails = (metric) => {
+  if (metric.rowSpan >= 3) return renderUpsDetailsLarge(metric)
+  if (metric.rowSpan >= 2) return renderUpsDetailsMedium(metric)
+  return renderUpsDetailsCompact(metric)
+}
+
+const renderCoolingDetails = ({ panelX, panelY, panelW, panelH, rowSpan }) => {
+  const tier = sizeTier(rowSpan)
+  const r = tier === 'compact' ? 12 : (tier === 'medium' ? 18 : 24)
+  const cy = panelY + panelH / 2
+  // compensate non-uniform x/y scaling from preserveAspectRatio="none"
+  const frameWpx = 560
+  const panelLeftPx = 74
+  const panelRightPx = 12
+  const panelWpx = frameWpx - panelLeftPx - panelRightPx
+  const panelHpx = rowSpan * RACK_UNIT_HEIGHT - 14
+  const scaleX = panelWpx / PANEL_VIEW_WIDTH
+  const scaleY = panelHpx / (rowSpan * PANEL_UNIT_HEIGHT)
+  const rx = scaleX > 0 ? r * (scaleY / scaleX) : r
+  const fanCount = tier === 'large' ? 4 : 3
+  return `${repeat(fanCount, i => fan(panelX + 90 + i * 130, cy, rx, r))}${vents(panelX + panelW - 150, cy - 28, tier === 'large' ? 14 : 12, 56, 11, 4)}`
+}
+
+const renderCustomDetails = ({ panelX, panelY, panelW, panelH }) => {
+  const slotH = 34
+  const y = centerY(panelY, panelH, slotH)
+  return `${slots(panelX + 34, y, 12, 18, slotH, 12, false)}${svgRect(panelX + panelW - 180, panelY + panelH / 2 - 16, 110, 32, 'screen')}${svgCircle(panelX + panelW - 36, panelY + panelH / 2, 7, 'fan-ring')}`
+}
+
+const renderBlankDetails = ({ panelX, panelY, panelW, panelH }) => {
+  const insetX = panelX + 18
+  const insetY = panelY + 10
+  const insetW = panelW - 36
+  const insetH = panelH - 20
+  const seamY = panelY + panelH / 2
+  return `${svgRect(insetX, insetY, insetW, insetH, 'detail-soft', 5)}${svgRect(insetX + 24, seamY - 1, insetW - 48, 2, 'detail-line', 1)}`
+}
+
+const renderDevicePanel = (item) => {
+  const type = getDevicePanelType(item)
+  const metric = rowMetric(item)
+  const renderers = {
+    storage: renderStorageDetails,
+    server: renderServerDetails,
+    blade: renderBladeDetails,
+    switch: renderSwitchDetails,
+    patch: renderPatchPanelDetails,
+    router: renderRouterDetails,
+    firewall: renderFirewallDetails,
+    loadbalancer: renderLoadBalancerDetails,
+    nas: renderNasDetails,
+    monitoring: renderMonitoringDetails,
+    kvm: renderKvmDetails,
+    pdu: renderPduDetails,
+    ups: renderUpsDetails,
+    cooling: renderCoolingDetails,
+    blank: renderBlankDetails,
+    custom: renderCustomDetails
+  }
+  const body = (renderers[type] || renderCustomDetails)(metric)
+  return `<svg class="device-panel-svg" viewBox="0 0 ${PANEL_VIEW_WIDTH} ${metric.viewHeight}" preserveAspectRatio="none" aria-hidden="true">
+    <g id="device-${type}">
+      <rect x="${metric.panelX}" y="${metric.panelY}" width="${metric.panelW}" height="${metric.panelH}" rx="6" class="panel-shell" />
+      ${body}
+    </g>
+  </svg>`
+}
+
 // 각 장비의 상단 라인 컬러와 맞춘 아이콘 컬러 정의
 const getIconColor = (type) => {
   const colors = {
     server: '#4a90e2',
     switch: '#27ae60',
     storage: '#8e44ad',
+    blade: '#35b7df',
     firewall: '#c0392b',
+    router: '#7c4dff',
+    loadbalancer: '#d94b9a',
+    nas: '#4a90e2',
+    monitoring: '#f39c32',
+    kvm: '#a44cc5',
     ups: '#00b894', // 민트색
     patch: '#f39c12', // 주황색
     pdu: '#d35400', // 진한 주황색
+    cooling: '#40c4e8',
+    blank: '#94a3b8',
     custom: '#95a5a6' // 회색
   }
   return colors[type] || '#ffffff'
 }
 
-// 검색어 상태
-const searchQuery = ref('')
-
-// 검색 일치 여부 확인 함수
-const isMatched = (item) => {
-  if (!searchQuery.value) return true // 검색어가 없으면 모두 정상 표시
-  if (item.type === 'gap') return true // 여백은 검색 대상에서 제외
-
-  const query = searchQuery.value.toLowerCase()
-  const labelMatch = item.label && item.label.toLowerCase().includes(query)
-  const memoMatch = item.memo && item.memo.toLowerCase().includes(query)
-
-  return labelMatch || memoMatch
-}
-
 onMounted(() => {
   // 1. Zone 목록을 먼저 가져오고, 성공하면 내부에서 fetchRackData()를 자동으로 실행합니다.
   fetchZonesAndRackData()
 
   // 2. 창 닫기/새로고침 방지 이벤트 리스너 등록
   window.addEventListener('beforeunload', handleBeforeUnload)
+  window.addEventListener('scroll', updateSidePanePosition, { passive: true })
+  window.addEventListener('resize', handleResponsiveResize)
+  nextTick(() => {
+    applyResponsiveZoom(true)
+    updateSidePanePosition()
+  })
 })
 
 onBeforeUnmount(() => {
   window.removeEventListener('beforeunload', handleBeforeUnload)
+  window.removeEventListener('scroll', updateSidePanePosition)
+  window.removeEventListener('resize', handleResponsiveResize)
+  if (resizeDebounceTimer) clearTimeout(resizeDebounceTimer)
+  if (zoomRafId) cancelAnimationFrame(zoomRafId)
+  if (zoomApplyRafId) cancelAnimationFrame(zoomApplyRafId)
 })
 
 </script>
@@ -1618,6 +2420,14 @@ onBeforeUnmount(() => {
   align-items: center;
 }
 
+.toolbar-detail {
+  flex-wrap: nowrap !important;
+}
+
+.toolbar-detail .toolbar-left {
+  min-width: 0;
+}
+
 /* 버튼 사이 구분선 스타일 */
 .toolbar-divider {
   background-color: #d9d9d9;
@@ -1635,11 +2445,208 @@ onBeforeUnmount(() => {
 
 /* 랙 캔버스 배경 */
 .rack-canvas {
+  overflow: visible;
+  min-height: 600px;
+  padding: 20px;
   scrollbar-width: thin;
   scrollbar-color: #888 #eef0f4;
   background: radial-gradient(circle, #f0f2f5 0%, #e6e9ed 100%);
 }
 
+.rack-list-view {
+  min-height: 600px;
+  padding: 8px 4px 12px;
+}
+
+.rack-list-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 12px;
+}
+
+.rack-list-card {
+  border-radius: 10px;
+  position: relative;
+  transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.rack-list-card-match {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+.rack-list-card--matched {
+  border-color: #91caff;
+  box-shadow: 0 0 0 1px rgba(22, 119, 255, 0.18) inset;
+}
+
+.rack-list-card--dimmed {
+  opacity: 0.52;
+}
+
+.add-rack-btn {
+  border-radius: 8px !important;
+  font-weight: 600;
+  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.22);
+}
+
+.rack-list-card-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.rack-list-card-sub {
+  margin-top: 2px;
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.rack-list-card-usage {
+  margin-top: 12px;
+  font-size: 15px;
+  font-weight: 500;
+  color: #1f2937;
+}
+
+.rack-list-progress {
+  margin-top: 10px;
+}
+
+.rack-list-card-usage-detail {
+  margin-top: 8px;
+  font-size: 13px;
+  color: #4b5563;
+}
+
+.rack-list-card-extra {
+  margin-top: 12px;
+  font-size: 12px;
+  color: #64748b;
+}
+
+.rack-detail-layout {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  position: relative;
+  min-width: 0;
+}
+
+.rack-main-pane {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: visible;
+  padding-bottom: 8px;
+}
+
+.rack-side-pane-slot {
+  width: clamp(300px, 24vw, 420px);
+  flex: 0 0 clamp(300px, 24vw, 420px);
+  position: relative;
+  align-self: flex-start;
+}
+
+.rack-side-pane {
+  width: 100%;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 64px;
+  align-self: flex-start;
+  height: fit-content;
+  max-height: none;
+  overflow: visible;
+  max-width: 100%;
+  z-index: 20;
+}
+
+.rack-side-pane.is-fixed {
+  position: fixed !important;
+  z-index: 40;
+}
+
+.rack-side-pane.is-bottom {
+  position: absolute !important;
+  top: auto !important;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.rack-side-pane-card :deep(.ant-card-head) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.device-info-row {
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: #374151;
+  word-break: break-word;
+}
+
+.device-info-desc :deep(.ant-descriptions-item-label),
+.device-info-desc :deep(.ant-descriptions-item-content) {
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+.device-info-desc :deep(.ant-descriptions-item-label) {
+  width: 100px;
+  color: #64748b;
+}
+
+.device-info-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.device-info-close-btn {
+  color: #64748b !important;
+}
+
+.device-info-close-btn:hover {
+  color: #334155 !important;
+  background: #f1f5f9 !important;
+}
+
+.device-memo-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.device-memo-plain {
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #334155;
+}
+
+.device-memo-linked {
+  background: transparent;
+  border-radius: 6px;
+  padding: 0;
+}
+
+.device-memo-linked-title {
+  display: none;
+}
+
+.device-memo-linked-list,
+.device-host-info-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #334155;
+}
+
 /* 랙 컨테이너 (가로 정렬) */
 .rack-container {
   display: flex;
@@ -1656,21 +2663,22 @@ onBeforeUnmount(() => {
 
 /* 개별 랙 래퍼 */
 .rack-wrapper {
-  background: #36393f;
-  border-radius: 6px;
+  background: #ffffff;
+  border: 1px solid #d9e2ec;
+  border-radius: 10px;
   padding: 15px;
-  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
   flex-shrink: 0;
-  width: 414px; /* 기존 폭 대비 20% 확장 */
-  flex: 0 0 414px
+  width: 668px;
+  flex: 0 0 668px
 }
 
 /* 랙 헤더 */
 .rack-header {
-  color: #fff;
+  color: #1f2937;
   font-weight: bold;
-  margin-bottom: 10px;
-  padding-bottom: 5px;
+  margin-bottom: 15px;
+  padding-bottom: 15px;
   border-bottom: 2px solid #1890ff;
 }
 
@@ -1684,12 +2692,42 @@ onBeforeUnmount(() => {
   height: 24px; /* 높이 고정으로 안정감 부여 */
 }
 
+.rack-header-left {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 8px;
+  flex: 1;
+}
+
+.rack-back-inline-btn {
+  color: #64748b !important;
+  height: 28px !important;
+  width: 28px !important;
+  min-width: 28px !important;
+  padding: 0 !important;
+  border-radius: 999px !important;
+  border: 1px solid #dbe3ee !important;
+  background: #fff !important;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+}
+
+.rack-back-inline-btn:hover {
+  color: #1677ff !important;
+  border-color: #dbeafe !important;
+  background: #f0f7ff !important;
+}
+
 /* 랙 본체 가로 정렬용 */
 .rack-body {
   display: flex;
-  background: #1a1b1e; /* 전체 프레임 배경과 맞춤 */
+  width: 604px;
+  margin: 0 auto;
+  background: #f1f5f9;
   border-radius: 8px;
-  border: 4px solid #2b2d31;
+  border: 2px solid #cfd8e3;
   overflow: hidden;
 }
 
@@ -1703,38 +2741,38 @@ onBeforeUnmount(() => {
 
 /* 눈금자 기둥 영역 */
 .rack-ruler {
-  width: 29px; /* 기존 폭 대비 20% 확장 */
-  background: #232428; /* 프레임보다 아주 살짝 어두운 색 */
-  border-right: 2px solid #111; /* 장비 영역과의 경계선 */
+  width: 44px;
+  background: #eaf0f7;
+  border-right: 1px solid #c5cfdb;
   display: flex;
   flex-direction: column;
 }
 
-/*  개별 눈금 텍스트 (정확히 1U = 32px에 맞춤) */
+/*  개별 눈금 텍스트 (정확히 1U = RACK_UNIT_HEIGHT에 맞춤) */
 .ruler-number {
-  height: 32px;
+  height: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #555c65;
-  font-size: 11px;
+  color: #6b7280;
+  font-size: 14px;
   font-family: 'Courier New', monospace;
   font-weight: bold;
   box-sizing: border-box;
   /* 눈금선 느낌을 위해 위아래에 아주 연한 점선 추가 */
-  border-bottom: 1px dotted rgba(255, 255, 255, 0.05);
+  border-bottom: 1px dotted rgba(15, 23, 42, 0.12);
 }
 
 /* 맨 위 눈금 상단 선 보정 */
 .ruler-number:first-child {
-  border-top: 1px dotted rgba(255, 255, 255, 0.05);
+  border-top: 1px dotted rgba(15, 23, 42, 0.12);
 }
 
 /* 랙 내부 프레임 */
 .rack-frame {
-  width: 336px; /* 기존 폭 대비 20% 확장 */
-  background: #2c2f35;
-  border: 4px solid #3f434b;
+  width: 560px;
+  background: #f8fbff;
+  border: 2px solid #cfd8e3;
   /* 프레임 자체 모서리를 둥글게 */
   border-radius: 8px;
   display: flex;
@@ -1750,12 +2788,21 @@ onBeforeUnmount(() => {
   width: 100%;
   position: relative;
   box-sizing: border-box;
-  /* 장비 사이 틈을 조금 더 부드럽게 처리 */
-  border-bottom: 2px solid #0a0a0a;
-  /* 개별 장비 모서리도 약간 둥글게 */
-  border-radius: 4px;
+  border-bottom: 1px solid #c4cfdd;
+  border-radius: 0;
   overflow: hidden; /* 자식 요소의 각진 부분 잘라내기 */
-  margin-bottom: -1px; /* 테두리 겹침 보정 */
+  margin-bottom: 0;
+}
+
+.rack-item::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 1px;
+  background: #c4cfdd;
+  pointer-events: none;
 }
 
 /* 랙 이름 텍스트: 길어지면 말줄임표 처리 */
@@ -1765,7 +2812,7 @@ onBeforeUnmount(() => {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 14px; /* 가독성과 공간 확보를 위한 최적 크기 */
+  font-size: 19px; /* 가독성과 공간 확보를 위한 최적 크기 */
   font-weight: bold;
   margin-right: 10px;
   /* 마우스 오버 시 클릭 가능한 느낌 전달 */
@@ -1775,7 +2822,7 @@ onBeforeUnmount(() => {
 
 /* 마우스 호버 시 텍스트 색상을 밝게 변경 */
 .rack-name-text:hover {
-  color: #5865f2 !important; /* 포인트 컬러로 강조 */
+  color: #1677ff !important;
   text-decoration: none; /* 밑줄 추가로 가독성 확보 */
 }
 
@@ -1784,6 +2831,10 @@ onBeforeUnmount(() => {
   margin-bottom: 0;
 }
 
+.rack-item:last-child::after {
+  content: none;
+}
+
 /* 1. 버튼들을 감싸는 컨테이너를 무조건 가로(Row)로 배치 */
 .rack-header-actions {
   display: flex !important;
@@ -1794,25 +2845,29 @@ onBeforeUnmount(() => {
 
 /* 2. 개별 버튼 스타일 (inline-flex를 써야 가로 배열이 유지됨) */
 .rack-header-actions .ant-btn {
-  color: #ffffff !important;
-  padding: 0 4px !important;
+  color: #334155 !important;
+  padding: 0 8px !important;
+  height: 34px !important;
+  min-width: 34px;
   display: inline-flex !important; /* flex 대신 inline-flex 적용 */
   align-items: center;
   justify-content: center;
   background: transparent;
-  border: none;
+  border: 1px solid #d8e1ec;
+  border-radius: 6px;
   box-shadow: none;
 }
 
 /* 3. 내부 Ant Design 아이콘 색상 강제 (검은색 변함 방지) */
 .rack-header-actions .ant-btn :deep(.anticon) {
-  color: #ffffff !important;
+  color: #334155 !important;
+  font-size: 18px !important;
 }
 
 /* 4. 버튼 비활성화 상태 색상 처리 */
 .rack-header-actions .ant-btn:disabled,
 .rack-header-actions .ant-btn:disabled :deep(.anticon) {
-  color: rgba(255, 255, 255, 0.3) !important;
+  color: rgba(51, 65, 85, 0.35) !important;
 }
 
 /* 여백 스타일 */
@@ -1824,25 +2879,24 @@ onBeforeUnmount(() => {
   /* 배경을 더 밝은 회색 계열로 변경 */
   background: repeating-linear-gradient(
     45deg,
-    #3a3d42,
-    #3a3d42 10px,
-    #42464d 10px,
-    #42464d 20px
+    #eef2f7,
+    #eef2f7 10px,
+    #e2e8f0 10px,
+    #e2e8f0 20px
   );
-  /* 텍스트 색상을 더 밝게 하여 가독성 확보 */
-  color: #ffffff;
-  font-size: 12px;
+  color: #475569;
+  font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
   /* 장비와 확실히 구분되도록 안쪽 그림자 제거 혹은 변경 */
-  box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
+  box-shadow: inset 0 0 8px rgba(15, 23, 42, 0.08);
 }
 
 /* 여백 호버 시 피드백 강화 */
 .gap-content:hover {
-  background: #4f545c;
-  color: #5865f2;
+  background: #dbe5f2;
+  color: #1677ff;
 }
 
 /* 장비 내용 래퍼 */
@@ -1851,97 +2905,156 @@ onBeforeUnmount(() => {
   height: 100%;
   overflow: hidden;
   cursor: pointer;
-  background-color: #232529 !important;
-  /* 양옆에 랙 마운트용 브라켓(금속 날개) 디자인 추가 */
-  border-left: 8px solid #4f545c;
-  border-right: 8px solid #4f545c;
+  background: #f8fbff !important;
+  border: 0;
+  box-shadow: none;
+}
+
+.device-content::before {
+  content: none;
 }
 
 /* 1. 상단 컬러 라인 (기존 SVG 상단 라인 대체) */
 .device-top-line {
   position: absolute;
-  top: 0; left: 0; right: 0;
-  height: 3px;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  opacity: 0.92;
   z-index: 2;
 }
 
 /* 2. 질감 패턴 기본 틀 */
 .device-pattern {
   position: absolute;
-  /* 이름표(text)와 겹치지 않게 오른쪽 구석으로 밀어둠 */
-  top: 8px; bottom: 8px; right: 16px; left: 60px;
+  top: 7px;
+  bottom: 7px;
+  right: 12px;
+  left: 74px;
   z-index: 1;
-  opacity: 0.6;
+  opacity: 1;
+  border-radius: 6px;
+}
+
+.device-pattern :deep(.device-panel-svg) {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.device-pattern :deep(.panel-shell) {
+  fill: #f1f5f9;
+  stroke: #cfdae6;
+  stroke-width: 1.2;
+}
+
+.device-pattern :deep(.detail-fill),
+.device-pattern :deep(.bay),
+.device-pattern :deep(.drive),
+.device-pattern :deep(.screen),
+.device-pattern :deep(.blade-slot) {
+  fill: #bfccd9;
+  stroke: #9aa8ba;
+  stroke-width: 0.8;
+}
+
+.device-pattern :deep(.detail-soft) {
+  fill: #d8e1eb;
+}
+
+.device-pattern :deep(.thin),
+.device-pattern :deep(.vent),
+.device-pattern :deep(.line),
+.device-pattern :deep(.block),
+.device-pattern :deep(.light),
+.device-pattern :deep(.detail-mid) {
+  fill: #aebccc;
+}
+
+.device-pattern :deep(.port),
+.device-pattern :deep(.jack),
+.device-pattern :deep(.sfp),
+.device-pattern :deep(.key),
+.device-pattern :deep(.port-shell),
+.device-pattern :deep(.outlet-shell),
+.device-pattern :deep(.plug-shell) {
+  fill: #f8fafc;
+  stroke: #64748b;
+  stroke-width: 1;
 }
 
-/* 💻 서버: 촘촘한 세로 디스크 베이 */
-.pattern-server {
-  background-image: repeating-linear-gradient(to right, #111 0, #111 6px, transparent 6px, transparent 10px);
+.device-pattern :deep(.plug-shell) {
+  fill: #f4f7fb;
+  stroke: #7f8da0;
+  stroke-width: 1.5;
 }
 
-/* 🗄️ 스토리지: 넓은 세로 디스크 베이 */
-.pattern-storage {
-  background-image: repeating-linear-gradient(to right, #111 0, #111 16px, transparent 16px, transparent 20px);
+.device-pattern :deep(.plug-slot) {
+  fill: #66758a;
+  stroke: none;
 }
 
-/* 🎛️ 스위치: 상하 여백을 줘서 포트 구멍처럼 보이게 */
-.pattern-switch {
-  top: 35%; bottom: 35%;
-  background-image: repeating-linear-gradient(to right, #000 0, #000 10px, transparent 10px, transparent 14px);
+.device-pattern :deep(.hole),
+.device-pattern :deep(.port-hole),
+.device-pattern :deep(.detail-dark) {
+  fill: #475569;
+  stroke: none;
 }
 
-/* 🧱 방화벽: 빗살무늬 해치 패턴 */
-.pattern-firewall {
-  background-image: repeating-linear-gradient(45deg, #111 0, #111 6px, transparent 6px, transparent 12px);
+.device-pattern :deep(.dot) {
+  fill: #64748b;
 }
 
-/* 🔌 패치패널: 얇은 점선 느낌 */
-.pattern-patch {
-  top: 45%; bottom: 45%;
-  background-image: repeating-linear-gradient(to right, #000 0, #000 4px, transparent 4px, transparent 8px);
+.device-pattern :deep(.ring),
+.device-pattern :deep(.fan),
+.device-pattern :deep(.fan-ring) {
+  fill: none;
+  stroke: #64748b;
+  stroke-width: 1.6;
 }
 
-/* ⚡ UPS: 우측 끝 환풍구 (가운데는 워터마크가 들어감) */
-.pattern-ups {
-  left: auto; width: 60px; right: 20px;
-  background-image: repeating-linear-gradient(to right, #111 0, #111 6px, transparent 6px, transparent 12px);
+.device-pattern :deep(.stroke),
+.device-pattern :deep(.fan-line),
+.device-pattern :deep(.detail-line) {
+  fill: none;
+  stroke: #94a3b8;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 
-/* 🔋 PDU: 콘센트 구멍 느낌 */
-.pattern-pdu {
-  background-image: radial-gradient(circle, #000 3px, transparent 4px);
-  background-size: 16px 16px;
-  background-position: left center;
+.device-pattern :deep(.outlet) {
+  fill: #f8fafc;
+  stroke: #64748b;
+  stroke-width: 1.1;
+}
+
+.device-pattern :deep(.battery) {
+  fill: #64748b;
 }
 
 /* 🔲 블랭크 패널: 전체를 덮는 연한 사선 (투명도 1) */
 .pattern-blank {
   top: 0; bottom: 0; left: 0; right: 0;
-  background-image: repeating-linear-gradient(-45deg, #1c1e22 0, #1c1e22 6px, #232529 6px, #232529 12px);
+  background-image: repeating-linear-gradient(-45deg, #e2e8f0 0, #e2e8f0 6px, #edf2f7 6px, #edf2f7 12px);
   opacity: 1;
 }
 
 /* 3. UPS 전용 정비율 거대 워터마크 */
 .ups-watermark {
-  position: absolute;
-  top: 50%; left: 50%;
-  transform: translate(-50%, -50%);
-  height: 80%; /* U 높이가 커져도 최대 80%까지만 예쁘게 커짐 */
-  max-height: 200px;
-  z-index: 1;
-  pointer-events: none;
+  display: none;
 }
 
 .device-icon-overlay {
   position: absolute;
-  left: 14px;
+  left: 23px;
   top: 50%;
   transform: translateY(-50%);
-  width: 22px;
-  height: 22px;
-  /* 0.85 투명도로 존재감을 주고, 그림자로 텍스트와의 간섭 최소화 */
-  opacity: 0.85;
-  filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
+  width: 26px;
+  height: 26px;
+  opacity: 0.96;
+  filter: none;
   pointer-events: none;
   display: flex;
   align-items: center;
@@ -1949,6 +3062,10 @@ onBeforeUnmount(() => {
   z-index: 4;
 }
 
+.device-icon-overlay::before {
+  content: none;
+}
+
 /* SVG 내부 아이콘이 영역을 꽉 채우도록 설정 */
 .device-icon-overlay :deep(svg) {
   width: 100%;
@@ -1959,14 +3076,13 @@ onBeforeUnmount(() => {
 .device-name-tag {
   position: absolute;
   top: 50%;
-  left: 56px;
-  right: 56px;
+  left: 160px;
+  right: 160px;
   transform: translateY(-50%);
-  color: #ffffff;
+  color: #1f2937;
   font-size: 15px;
   font-weight: bold;
-  /* 배경과 겹쳐도 글씨가 뚜렷하게 보이도록 진한 텍스트 그림자 추가 */
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 1);
+  text-shadow: none;
   pointer-events: none;
   display: flex;
   justify-content: center;
@@ -1975,21 +3091,40 @@ onBeforeUnmount(() => {
   letter-spacing: -0.2px;
 }
 
+.tag-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  min-width: 110px;
+  padding: 3px 9px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
+  gap: 8px;
+}
+
 .tag-text {
-  display: inline-block;
-  max-width: calc(100% - 44px);
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: none;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  vertical-align: middle;
 }
 
 .tag-badge {
-  background: rgba(0,0,0,0.5);
+  background: #1f2937;
+  color: #ffffff;
   padding: 2px 6px;
   border-radius: 10px;
-  margin-left: 8px;
-  font-size: 10px;
+  flex: 0 0 auto;
+  font-size: 11px;
+  font-weight: 700;
+  border: 1px solid rgba(255, 255, 255, 0.18);
 }
 
 /* 액션 버튼 (호버 시에만 표시) */
@@ -1997,7 +3132,7 @@ onBeforeUnmount(() => {
   /* 버튼을 장비 둥둥 띄우는 핵심 코드 (이게 빠져서 안 보였던 겁니다!) */
   position: absolute !important;
   top: 50%;
-  bottom: 2px;
+  bottom: auto;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 5; /* 장비나 텍스트 위로 확실히 올림 */
@@ -2006,11 +3141,12 @@ onBeforeUnmount(() => {
   display: flex !important;
   justify-content: center;
   align-items: center;
-  gap: 1px !important;
+  gap: 4px !important;
   background: rgba(0, 0, 0, 0.85) !important;
-  border-radius: 6px;
-  padding: 4px 8px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
+  border-radius: 8px;
+  padding: 6px 10px;
+  height: 36px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.42);
 
   /* 기본적으로는 숨겨둠 (투명도 0, 클릭 방지) */
   opacity: 0;
@@ -2030,15 +3166,15 @@ onBeforeUnmount(() => {
 
 /* 버튼 내부 스타일 및 아이콘 크기 (아까와 동일) */
 .device-actions .ant-btn {
-  padding: 0 4px !important;
-  height: 26px;
+  padding: 0 6px !important;
+  height: 30px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
 .device-actions .ant-btn :deep(.anticon) {
-  font-size: 16px !important;
+  font-size: 18px !important;
   color: #ffffff !important;
   text-shadow: 0 0 1px rgba(255, 255, 255, 0.6);
   transition: all 0.2s ease;
@@ -2046,7 +3182,6 @@ onBeforeUnmount(() => {
 
 .device-actions .ant-btn:hover :deep(.anticon) {
   color: #40a9ff !important;
-  transform: scale(1.15);
 }
 
 .device-actions .ant-btn:disabled :deep(.anticon) {
@@ -2143,4 +3278,164 @@ onBeforeUnmount(() => {
   font-size: 12px;
   color: #6b7280;
 }
+
+/* dark mode in this project is attached on body */
+.rack-diagram-root.is-dark .toolbar-container {
+  background: #22282f !important;
+  border-color: #3e444c !important;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
+}
+
+.rack-diagram-root.is-dark .toolbar-divider {
+  background-color: #4a515a !important;
+}
+
+.rack-diagram-root.is-dark .zoom-label {
+  color: rgba(255, 255, 255, 0.85) !important;
+}
+
+.rack-diagram-root.is-dark .rack-canvas {
+  scrollbar-color: #6b7280 #1b2129;
+  background: radial-gradient(circle, #232a33 0%, #1b2129 100%);
+}
+
+.rack-diagram-root.is-dark .rack-list-card {
+  background: #1f2732;
+  border-color: #3a4654;
+}
+
+.rack-diagram-root.is-dark .rack-list-card--matched {
+  border-color: #4c93ff;
+  box-shadow: 0 0 0 1px rgba(76, 147, 255, 0.32) inset;
+}
+
+.rack-diagram-root.is-dark .rack-list-card-title {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.rack-diagram-root.is-dark .rack-list-card-sub,
+.rack-diagram-root.is-dark .rack-list-card-usage-detail,
+.rack-diagram-root.is-dark .rack-list-card-extra {
+  color: rgba(255, 255, 255, 0.65);
+}
+
+.rack-diagram-root.is-dark .rack-list-card-usage {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.rack-diagram-root.is-dark .rack-back-inline-btn {
+  color: rgba(255, 255, 255, 0.72) !important;
+  border-color: #3a4654 !important;
+  background: #1f2732 !important;
+}
+
+.rack-diagram-root.is-dark .rack-back-inline-btn:hover {
+  color: #91caff !important;
+  border-color: #31445f !important;
+  background: #273244 !important;
+}
+
+.rack-diagram-root.is-dark .device-info-row {
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.rack-diagram-root.is-dark .device-info-desc :deep(.ant-descriptions-item-label) {
+  color: rgba(255, 255, 255, 0.68);
+}
+
+.rack-diagram-root.is-dark .rack-side-pane-card :deep(.ant-card-head) {
+  background: #1f2732;
+}
+
+.rack-diagram-root.is-dark .device-info-close-btn {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+.rack-diagram-root.is-dark .device-info-close-btn:hover {
+  color: rgba(255, 255, 255, 0.92) !important;
+  background: #273244 !important;
+}
+
+.rack-diagram-root.is-dark .tag-content {
+  background: rgba(15, 23, 42, 0.52);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+}
+
+@media (max-width: 980px) {
+  .rack-side-pane-slot {
+    width: 280px;
+    flex: 0 0 280px;
+  }
+}
+
+.rack-diagram-root.is-dark .host-vm-card {
+  background: #1f2732;
+  border-color: #3a4654;
+}
+
+.rack-diagram-root.is-dark .host-vm-name {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.rack-diagram-root.is-dark .host-vm-meta {
+  color: rgba(255, 255, 255, 0.65);
+}
+
+.rack-diagram-root.is-dark .toolbar-container :deep(.ant-input),
+.rack-diagram-root.is-dark .toolbar-container :deep(.ant-input-number),
+.rack-diagram-root.is-dark .toolbar-container :deep(.ant-input-number-input),
+.rack-diagram-root.is-dark .toolbar-container :deep(.ant-input-search .ant-input),
+.rack-diagram-root.is-dark .toolbar-container :deep(.ant-input-group-addon),
+.rack-diagram-root.is-dark .toolbar-container :deep(.ant-slider-rail) {
+  background: #1a212b !important;
+  border-color: #4a515a !important;
+  color: rgba(255, 255, 255, 0.85) !important;
+}
+
+.rack-diagram-root.is-dark .toolbar-container :deep(.ant-input::placeholder),
+.rack-diagram-root.is-dark .toolbar-container :deep(.ant-input-number-input::placeholder) {
+  color: rgba(255, 255, 255, 0.45) !important;
+}
+
+.rack-diagram-root.is-dark .toolbar-container :deep(.ant-input-search-button),
+.rack-diagram-root.is-dark .toolbar-container :deep(.ant-slider-track) {
+  background: #2a8be7 !important;
+  border-color: #2a8be7 !important;
+}
+
+.rack-diagram-root.is-dark .toolbar-container :deep(.ant-slider-handle) {
+  border-color: #69c0ff !important;
+}
+
+/* ant-space-item wrappers can override inherited color */
+.rack-diagram-root.is-dark .toolbar-container :deep(.ant-space-item) {
+  color: rgba(255, 255, 255, 0.88) !important;
+}
+
+.rack-diagram-root.is-dark .toolbar-container :deep(.ant-space-item .ant-btn) {
+  background: #1a212b !important;
+  border-color: #4a515a !important;
+  color: rgba(255, 255, 255, 0.88) !important;
+}
+
+.rack-diagram-root.is-dark .toolbar-container :deep(.ant-space-item .ant-btn > span),
+.rack-diagram-root.is-dark .toolbar-container :deep(.ant-space-item .ant-btn .anticon),
+.rack-diagram-root.is-dark .toolbar-container :deep(.ant-space-item .ant-btn .anticon svg) {
+  color: rgba(255, 255, 255, 0.88) !important;
+  fill: currentColor !important;
+  -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
+}
+
+.rack-diagram-root.is-dark .toolbar-container :deep(.ant-space-item .ant-btn-primary) {
+  background: #1677ff !important;
+  border-color: #1677ff !important;
+}
+
+.rack-diagram-root.is-dark .toolbar-container :deep(.ant-space-item .ant-btn-primary > span),
+.rack-diagram-root.is-dark .toolbar-container :deep(.ant-space-item .ant-btn-primary .anticon),
+.rack-diagram-root.is-dark .toolbar-container :deep(.ant-space-item .ant-btn-primary .anticon svg) {
+  color: #ffffff !important;
+  fill: currentColor !important;
+  -webkit-text-fill-color: #ffffff !important;
+}
 </style>

From eed7ef158f00b97a343cd2bdccdc7fa6b8cef498 Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Fri, 22 May 2026 10:38:40 +0900
Subject: [PATCH 09/17] =?UTF-8?q?[=EB=9E=99=20=EC=8B=9C=EA=B0=81=ED=99=94]?=
 =?UTF-8?q?=20(1)gen=5Ftoc=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/public/locales/en.json                  |  15 +-
 ui/public/locales/ko_KR.json               |  15 +-
 ui/src/views/infra/zone/RackDiagramTab.vue | 179 +++++++++++++++++----
 ui/vue.config.js                           |   2 +-
 4 files changed, 172 insertions(+), 39 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index e37f9159b499..5e2696ad8583 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -5122,8 +5122,15 @@
 "rackDiagram.maxAllowedHeightSuffix": ".",
 "rackDiagram.deviceMemo": "Device memo / details",
 "rackDiagram.deviceMemoPlaceholder": "Enter IP, purpose, owner, etc.",
-"rackDiagram.quickLinks": "Custom shortcut links (one per line, format: Name|URL)",
-"rackDiagram.quickLinksPlaceholder": "e.g. iDRAC|https://10.0.0.10\nNAS|https://nas.local",
+"rackDiagram.quickLinks": "Custom shortcut links (one per line)",
+"rackDiagram.quickLinksHelpText": "Format: LinkName: URL (e.g. iDRAC: https://10.10.12.2:9090, Cube: 10.10.12.3:9090)",
+"rackDiagram.quickLinksPlaceholder": "Examples:\niDRAC: https://10.10.12.2:9090\nCube: 10.10.12.3:9090\nNAS|https://nas.local\n(If protocol is omitted, https:// is added automatically)",
+"rackDiagram.quickLinkName": "Link name",
+"rackDiagram.quickLinkUrl": "URL",
+"rackDiagram.quickLinkAction": "Action",
+"rackDiagram.quickLinkNamePlaceholder": "e.g. iDRAC",
+"rackDiagram.quickLinkUrlPlaceholder": "e.g. 10.10.12.2:9090 or https://10.10.12.2:9090",
+"rackDiagram.quickLinkAddRow": "Add link row",
 "rackDiagram.defaultRackName": "Main Rack",
 "rackDiagram.copySuffix": "Copy",
 "rackDiagram.newDevice": "New Device",
@@ -5171,8 +5178,8 @@
 "rackDiagram.msg.oobmLoadFailed": "Failed to load OOBM portal info.",
 "rackDiagram.msg.hostIpNotFound": "IP info not found for selected host.",
 "rackDiagram.msg.cubeLoadFailed": "Failed to load Cube portal info.",
-"rackDiagram.msg.quickLinkUrlEmpty": "Line {line}: URL is empty. (format: Name|URL)",
-"rackDiagram.msg.quickLinkUrlInvalid": "Line {line}: URL must start with http:// or https://.",
+"rackDiagram.msg.quickLinkUrlEmpty": "Line {line}: URL is empty. (Use Name: URL or Name|URL)",
+"rackDiagram.msg.quickLinkUrlInvalid": "Line {line}: Invalid URL. (e.g. https://10.10.12.2:9090 or 10.10.12.2:9090)",
 "rackDiagram.msg.enterDeviceName": "Please enter device name.",
 "rackDiagram.msg.deviceNameMax": "Device name must be 60 characters or less.",
 "rackDiagram.msg.enterCustomType": "Please enter custom type name.",
diff --git a/ui/public/locales/ko_KR.json b/ui/public/locales/ko_KR.json
index aa147a8ec0de..354944539be1 100644
--- a/ui/public/locales/ko_KR.json
+++ b/ui/public/locales/ko_KR.json
@@ -5124,8 +5124,15 @@
 "rackDiagram.maxAllowedHeightSuffix": "\uc785\ub2c8\ub2e4.",
 "rackDiagram.deviceMemo": "\uc7a5\ube44 \uba54\ubaa8",
 "rackDiagram.deviceMemoPlaceholder": "IP \uc8fc\uc18c, \uc6a9\ub3c4, \ub2f4\ub2f9\uc790 \ub4f1\uc744 \uc785\ub825\ud558\uc138\uc694",
-"rackDiagram.quickLinks": "\ucee4\uc2a4\ud140 \ubc14\ub85c\uac00\uae30 \ub9c1\ud06c (\ud55c \uc904\uc5d0 \ud558\ub098, \ud615\uc2dd: \uc774\ub984|URL)",
-"rackDiagram.quickLinksPlaceholder": "\uc608: iDRAC|https://10.0.0.10\nNAS|https://nas.local",
+"rackDiagram.quickLinks": "\ucee4\uc2a4\ud140 \ubc14\ub85c\uac00\uae30 \ub9c1\ud06c",
+"rackDiagram.quickLinksHelpText": "\uc608: iDRAC: https://10.10.10.10:9090, Cube: 10.10.10.10:9090",
+"rackDiagram.quickLinksPlaceholder": "\uc608\uc2dc:\niDRAC: https://10.10.10.10:9090\nCube: 10.10.10.10:9090\nNAS|https://nas.local\n(\ud504\ub85c\ud1a0\ucf5c\uc744 \uc0dd\ub7b5\ud558\uba74 https://\uac00 \uc790\ub3d9 \ucd94\uac00\ub429\ub2c8\ub2e4)",
+"rackDiagram.quickLinkName": "\ub9c1\ud06c \uc774\ub984",
+"rackDiagram.quickLinkUrl": "URL",
+"rackDiagram.quickLinkAction": "\uc791\uc5c5",
+"rackDiagram.quickLinkNamePlaceholder": "\uc608: iDRAC",
+"rackDiagram.quickLinkUrlPlaceholder": "\uc608: 10.10.12.2:9090 \ub610\ub294 https://10.10.12.2:9090",
+"rackDiagram.quickLinkAddRow": "\ub9c1\ud06c \ud589 \ucd94\uac00",
 "rackDiagram.defaultRackName": "Main Rack",
 "rackDiagram.copySuffix": "\ubcf5\uc0ac\ubcf8",
 "rackDiagram.newDevice": "\uc0c8 \uc7a5\ube44",
@@ -5173,8 +5180,8 @@
 "rackDiagram.msg.oobmLoadFailed": "OOBM \ud3ec\ud138 \uc815\ubcf4\ub97c \ubd88\ub7ec\uc624\uc9c0 \ubabb\ud588\uc2b5\ub2c8\ub2e4.",
 "rackDiagram.msg.hostIpNotFound": "\uc120\ud0dd\ud55c \ud638\uc2a4\ud2b8\uc758 IP \uc815\ubcf4\ub97c \ucc3e\uc744 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.",
 "rackDiagram.msg.cubeLoadFailed": "Cube \ud3ec\ud138 \uc815\ubcf4\ub97c \ubd88\ub7ec\uc624\uc9c0 \ubabb\ud588\uc2b5\ub2c8\ub2e4.",
-"rackDiagram.msg.quickLinkUrlEmpty": "{line}\ud589: URL\uc774 \ube44\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. (\ud615\uc2dd: \uc774\ub984|URL)",
-"rackDiagram.msg.quickLinkUrlInvalid": "{line}\ud589: URL\uc740 http:// \ub610\ub294 https:// \ub85c \uc2dc\uc791\ud574\uc57c \ud569\ub2c8\ub2e4.",
+"rackDiagram.msg.quickLinkUrlEmpty": "{line}\ud589: URL\uc774 \ube44\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. (\uc608: \uc774\ub984: URL \ub610\ub294 \uc774\ub984|URL)",
+"rackDiagram.msg.quickLinkUrlInvalid": "{line}\ud589: URL \ud615\uc2dd\uc774 \uc62c\ubc14\ub974\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. (\uc608: https://10.10.12.2:9090 \ub610\ub294 10.10.12.2:9090)",
 "rackDiagram.msg.enterDeviceName": "\uc7a5\ube44\uba85\uc744 \uc785\ub825\ud574\uc8fc\uc138\uc694.",
 "rackDiagram.msg.deviceNameMax": "\uc7a5\ube44\uba85\uc740 60\uc790 \uc774\ud558\ub85c \uc785\ub825\ud574\uc8fc\uc138\uc694.",
 "rackDiagram.msg.enterCustomType": "\ucee4\uc2a4\ud140 \ud0c0\uc785\uba85\uc744 \uc785\ub825\ud574\uc8fc\uc138\uc694.",
diff --git a/ui/src/views/infra/zone/RackDiagramTab.vue b/ui/src/views/infra/zone/RackDiagramTab.vue
index 47f170c611b1..844cd68bd651 100644
--- a/ui/src/views/infra/zone/RackDiagramTab.vue
+++ b/ui/src/views/infra/zone/RackDiagramTab.vue
@@ -76,6 +76,34 @@
             ]"
             @click="openRackDetail(idx)"
           >
+            <div class="rack-list-card-actions">
+              <a-dropdown :trigger="['click']">
+                <a-button
+                  size="small"
+                  type="text"
+                  class="rack-list-more-btn"
+                  @click.stop
+                >
+                  <template #icon><MoreOutlined /></template>
+                </a-button>
+                <template #overlay>
+                  <a-menu>
+                    <a-menu-item @click.stop="cloneRack(idx)">
+                      <CopyOutlined /> {{ t('rackDiagram.cloneRack') }}
+                    </a-menu-item>
+                    <a-menu-item @click.stop="openRackModal('edit', idx)">
+                      <SettingOutlined /> {{ t('rackDiagram.edit') }}
+                    </a-menu-item>
+                    <a-menu-divider />
+                    <a-menu-item danger>
+                      <a-popconfirm :title="t('rackDiagram.deleteConfirm')" @confirm="deleteRack(idx)">
+                        <span @click.stop><DeleteOutlined /> {{ t('rackDiagram.delete') }}</span>
+                      </a-popconfirm>
+                    </a-menu-item>
+                  </a-menu>
+                </template>
+              </a-dropdown>
+            </div>
             <div v-if="hasSearchQuery && getRackMatchCount(rack) > 0" class="rack-list-card-match">
               <a-tag color="blue">{{ t('rackDiagram.searchMatched', { count: getRackMatchCount(rack) }) }}</a-tag>
             </div>
@@ -451,12 +479,46 @@
           :validateStatus="quickLinksError ? 'error' : ''"
           :help="quickLinksError"
         >
-          <a-textarea
-            v-model:value="deviceForm.quickLinksText"
-            :rows="3"
-            :placeholder="t('rackDiagram.quickLinksPlaceholder')"
-            @change="quickLinksError = ''"
-          />
+          <div class="quick-links-editor">
+            <a-table
+              size="small"
+              :pagination="false"
+              :data-source="quickLinkRows"
+              :columns="quickLinkColumns"
+              row-key="key"
+            >
+              <template #bodyCell="{ column, record, index }">
+                <template v-if="column.key === 'label'">
+                  <a-input
+                    v-model:value="record.label"
+                    :placeholder="t('rackDiagram.quickLinkNamePlaceholder')"
+                    @change="quickLinksError = ''"
+                  />
+                </template>
+                <template v-else-if="column.key === 'url'">
+                  <a-input
+                    v-model:value="record.url"
+                    :placeholder="t('rackDiagram.quickLinkUrlPlaceholder')"
+                    @change="quickLinksError = ''"
+                  />
+                </template>
+                <template v-else-if="column.key === 'action'">
+                  <a-button
+                    size="small"
+                    type="text"
+                    danger
+                    @click="removeQuickLinkRow(index)"
+                  >
+                    <template #icon><DeleteOutlined /></template>
+                  </a-button>
+                </template>
+              </template>
+            </a-table>
+            <a-button size="small" type="dashed" class="quick-links-add-btn" @click="addQuickLinkRow">
+              <template #icon><PlusOutlined /></template>
+              {{ t('rackDiagram.quickLinkAddRow') }}
+            </a-button>
+          </div>
         </a-form-item>
       </a-form>
     </a-modal>
@@ -1225,8 +1287,7 @@ const deviceForm = reactive({
   height: 1,
   customType: '',
   memo: '',
-  sourceRef: undefined,
-  quickLinksText: ''
+  sourceRef: undefined
 })
 
 const inventoryLoading = ref(false)
@@ -1239,6 +1300,28 @@ const hostVmList = ref([])
 const hostVmFallbackList = ref([])
 const dragSource = ref({ rIndex: -1, iIndex: -1 })
 const quickLinksError = ref('')
+const quickLinkRows = ref([])
+const quickLinkColumns = computed(() => ([
+  { title: t('rackDiagram.quickLinkName'), key: 'label', dataIndex: 'label', width: '35%' },
+  { title: t('rackDiagram.quickLinkUrl'), key: 'url', dataIndex: 'url' },
+  { title: t('rackDiagram.quickLinkAction'), key: 'action', dataIndex: 'action', width: 56 }
+]))
+
+const makeQuickLinkRow = (label = '', url = '') => ({
+  key: `${Date.now()}-${Math.random().toString(16).slice(2)}`,
+  label,
+  url
+})
+
+const addQuickLinkRow = () => {
+  quickLinkRows.value.push(makeQuickLinkRow())
+}
+
+const removeQuickLinkRow = (index) => {
+  quickLinkRows.value.splice(index, 1)
+  if (!quickLinkRows.value.length) quickLinkRows.value.push(makeQuickLinkRow())
+}
+// 샘플 VM 목록
 const ENABLE_VM_FALLBACK_MOCK = true
 const HOST_ACTIVE_VM_STATES = new Set(['running', 'starting', 'stopping', 'migrating'])
 
@@ -1336,36 +1419,35 @@ const isHostLinked = (item) => {
   return !!getLinkedHostId(item)
 }
 
-const parseQuickLinksTextWithValidation = (text) => {
-  if (!text) return { links: [], errors: [] }
-  const lines = text.split('\n')
+const parseQuickLinksRowsWithValidation = (rows) => {
+  if (!rows || !rows.length) return { links: [], errors: [] }
   const links = []
   const errors = []
 
-  lines.forEach((raw, idx) => {
-    const line = raw.trim()
-    if (!line) return
-
-    let label = ''
-    let url = ''
-    if (line.includes('|')) {
-      const parts = line.split('|')
-      label = (parts[0] || '').trim()
-      url = (parts.slice(1).join('|') || '').trim()
-    } else {
-      url = line
-    }
+  rows.forEach((row, idx) => {
+    const label = String(row?.label || '').trim()
+    const rawUrl = String(row?.url || '').trim()
+    if (!label && !rawUrl) return
 
-    if (!url) {
+    if (!rawUrl) {
       errors.push(t('rackDiagram.msg.quickLinkUrlEmpty', { line: idx + 1 }))
       return
     }
-    if (!/^https?:\/\//i.test(url)) {
+
+    // 스키마를 생략한 입력도 허용 (예: 10.10.12.2:9090)
+    const normalizedUrl = /^https?:\/\//i.test(rawUrl) ? rawUrl : `https://${rawUrl}`
+    let parsed = null
+    try {
+      parsed = new URL(normalizedUrl)
+    } catch (e) {
+      parsed = null
+    }
+    if (!parsed || !/^https?:$/i.test(parsed.protocol)) {
       errors.push(t('rackDiagram.msg.quickLinkUrlInvalid', { line: idx + 1 }))
       return
     }
 
-    links.push({ label, url })
+    links.push({ label, url: normalizedUrl })
   })
 
   return { links, errors }
@@ -1685,7 +1767,7 @@ const openDeviceModal = (rIndex, iIndex) => {
     deviceForm.customType = ''
     deviceForm.memo = ''
     deviceForm.sourceRef = undefined
-    deviceForm.quickLinksText = ''
+    quickLinkRows.value = [makeQuickLinkRow()]
     quickLinksError.value = ''
   } else {
     // 수정 모드일 때는 기존 데이터 로드
@@ -1695,7 +1777,9 @@ const openDeviceModal = (rIndex, iIndex) => {
     deviceForm.customType = item.customType || ''
     deviceForm.memo = item.memo || ''
     deviceForm.sourceRef = item.sourceRef || undefined
-    deviceForm.quickLinksText = getQuickLinks(item).map(link => `${link.label || ''}|${link.url || ''}`.replace(/^\|/, '')).join('\n')
+    quickLinkRows.value = getQuickLinks(item).length
+      ? getQuickLinks(item).map(link => makeQuickLinkRow(link.label || '', link.url || ''))
+      : [makeQuickLinkRow()]
     quickLinksError.value = ''
   }
   if (!inventoryOptions.value.length) {
@@ -1753,7 +1837,7 @@ const submitDeviceModal = () => {
     message.warning(t('rackDiagram.msg.deviceHeightInteger'))
     return
   }
-  const quickLinkParsed = parseQuickLinksTextWithValidation(deviceForm.quickLinksText)
+  const quickLinkParsed = parseQuickLinksRowsWithValidation(quickLinkRows.value)
   if (quickLinkParsed.errors.length > 0) {
     quickLinksError.value = quickLinkParsed.errors[0]
     return
@@ -2470,6 +2554,22 @@ onBeforeUnmount(() => {
   transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
+.rack-list-card-actions {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 2;
+}
+
+.rack-list-more-btn {
+  color: #64748b !important;
+}
+
+.rack-list-more-btn:hover {
+  color: #334155 !important;
+  background: #f1f5f9 !important;
+}
+
 .rack-list-card-match {
   position: absolute;
   top: 10px;
@@ -2647,6 +2747,16 @@ onBeforeUnmount(() => {
   color: #334155;
 }
 
+.quick-links-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.quick-links-add-btn {
+  align-self: flex-start;
+}
+
 /* 랙 컨테이너 (가로 정렬) */
 .rack-container {
   display: flex;
@@ -3309,6 +3419,15 @@ onBeforeUnmount(() => {
   box-shadow: 0 0 0 1px rgba(76, 147, 255, 0.32) inset;
 }
 
+.rack-diagram-root.is-dark .rack-list-more-btn {
+  color: rgba(255, 255, 255, 0.72) !important;
+}
+
+.rack-diagram-root.is-dark .rack-list-more-btn:hover {
+  color: rgba(255, 255, 255, 0.9) !important;
+  background: #273244 !important;
+}
+
 .rack-diagram-root.is-dark .rack-list-card-title {
   color: rgba(255, 255, 255, 0.9);
 }
diff --git a/ui/vue.config.js b/ui/vue.config.js
index 318ef86aefe8..9cae2ff66fb1 100644
--- a/ui/vue.config.js
+++ b/ui/vue.config.js
@@ -138,7 +138,7 @@ const vueConfig = {
     port: 5050,
     proxy: {
       '/client': {
-        target: process.env.CS_URL || 'http://10.10.218.29:8080',
+        target: process.env.CS_URL || 'http://localhost:8080',
         secure: false,
         ws: false,
         changeOrigin: true,

From 50eecbd9dd115fc1b2fb0b1fd3b062d68b5afe95 Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Fri, 22 May 2026 10:38:45 +0900
Subject: [PATCH 10/17] =?UTF-8?q?[=EB=9E=99=20=EC=8B=9C=EA=B0=81=ED=99=94]?=
 =?UTF-8?q?=20(1)gen=5Ftoc=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tools/apidoc/gen_toc.py | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/tools/apidoc/gen_toc.py b/tools/apidoc/gen_toc.py
index 3b361886c782..442f37383fb9 100644
--- a/tools/apidoc/gen_toc.py
+++ b/tools/apidoc/gen_toc.py
@@ -305,7 +305,9 @@
     'listVhbaDevices.xml': 'Storage',
     'listHostScsiDevices.xml': 'Storage',
     'updateHostScsiDevices.xml': 'Storage',
-    'deleteVhbaDevice.xml': 'Storage'
+    'deleteVhbaDevice.xml': 'Storage',
+    'listRackLayouts.xml': 'Rack Management',
+    'updateRackLayout.xml': 'Rack Management'
 }
 
 

From 0f04d9f4680076d20415152b020b97faa61caf91 Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Tue, 26 May 2026 09:27:48 +0900
Subject: [PATCH 11/17] =?UTF-8?q?[=EB=9E=99=20=EC=8B=9C=EA=B0=81=ED=99=94]?=
 =?UTF-8?q?=20=EB=9E=99=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=B9=B4=EB=93=9C=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=ED=8C=8C=EC=9D=BC=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/public/locales/en.json                     |   5 +
 ui/public/locales/ko_KR.json                  |   5 +
 ui/src/views/infra/zone/RackDiagramTab.vue    | 426 ++++++++++++------
 .../zone/components/RackListCardIcon.vue      |  74 +++
 4 files changed, 376 insertions(+), 134 deletions(-)
 create mode 100644 ui/src/views/infra/zone/components/RackListCardIcon.vue

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 5e2696ad8583..d6420291ba70 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -5068,6 +5068,8 @@
 "rackDiagram.capturePng": "Capture PNG image",
 "rackDiagram.capture": "Capture",
 "rackDiagram.zoom": "Zoom",
+"rackDiagram.backToList": "Back to list",
+"rackDiagram.list": "List",
 "rackDiagram.emptyRack": "No rack is registered. Click [Add Rack] above.",
 "rackDiagram.moveLeft": "Move left",
 "rackDiagram.moveRight": "Move right",
@@ -5087,6 +5089,9 @@
 "rackDiagram.editRack": "Edit rack settings",
 "rackDiagram.rackName": "Rack name",
 "rackDiagram.rackNamePlaceholder": "e.g. Server Rack 1",
+"rackDiagram.rackLocation": "Rack location",
+"rackDiagram.rackLocationPlaceholder": "e.g. 3F / Server Room A",
+"rackDiagram.rackSpec": "Spec",
 "rackDiagram.totalHeight": "Total height (U)",
 "rackDiagram.moveDeviceTitle": "Move Device (to another rack)",
 "rackDiagram.moveDeviceDesc1": "When you select a target rack, ",
diff --git a/ui/public/locales/ko_KR.json b/ui/public/locales/ko_KR.json
index 354944539be1..887198863e02 100644
--- a/ui/public/locales/ko_KR.json
+++ b/ui/public/locales/ko_KR.json
@@ -5070,6 +5070,8 @@
 "rackDiagram.capturePng": "PNG \uc774\ubbf8\uc9c0 \ucea1\ucc98",
 "rackDiagram.capture": "\ucea1\ucc98",
 "rackDiagram.zoom": "Zoom",
+"rackDiagram.backToList": "\ubaa9\ub85d\uc73c\ub85c",
+"rackDiagram.list": "\ubaa9\ub85d",
 "rackDiagram.emptyRack": "\ub4f1\ub85d\ub41c \ub799\uc774 \uc5c6\uc2b5\ub2c8\ub2e4. \uc0c1\ub2e8\uc758 [\uc0c8 \ub799 \ucd94\uac00] \ubc84\ud2bc\uc744 \ub20c\ub7ec\uc8fc\uc138\uc694.",
 "rackDiagram.moveLeft": "\uc67c\ucabd \uc774\ub3d9",
 "rackDiagram.moveRight": "\uc624\ub978\ucabd \uc774\ub3d9",
@@ -5089,6 +5091,9 @@
 "rackDiagram.editRack": "\ub799 \uc124\uc815 \uc218\uc815",
 "rackDiagram.rackName": "\ub799 \uc774\ub984 (Name)",
 "rackDiagram.rackNamePlaceholder": "\uc608: Server Rack 1",
+"rackDiagram.rackLocation": "\ub799 \uc704\uce58",
+"rackDiagram.rackLocationPlaceholder": "\uc608: 3F / Server Room A",
+"rackDiagram.rackSpec": "\uaddc\uaca9",
 "rackDiagram.totalHeight": "\ucd1d \ub192\uc774 (U)",
 "rackDiagram.moveDeviceTitle": "\uc7a5\ube44 \uc774\ub3d9 (\ub2e4\ub978 \ub799\uc73c\ub85c \ubcf4\ub0b4\uae30)",
 "rackDiagram.moveDeviceDesc1": "\uc774\ub3d9\ud560 \ub300\uc0c1 \ub799\uc744 \uc120\ud0dd\ud558\uba74, ",
diff --git a/ui/src/views/infra/zone/RackDiagramTab.vue b/ui/src/views/infra/zone/RackDiagramTab.vue
index 844cd68bd651..31d66d49694e 100644
--- a/ui/src/views/infra/zone/RackDiagramTab.vue
+++ b/ui/src/views/infra/zone/RackDiagramTab.vue
@@ -107,21 +107,33 @@
             <div v-if="hasSearchQuery && getRackMatchCount(rack) > 0" class="rack-list-card-match">
               <a-tag color="blue">{{ t('rackDiagram.searchMatched', { count: getRackMatchCount(rack) }) }}</a-tag>
             </div>
-            <div class="rack-list-card-title">{{ rack.name }}</div>
-            <div class="rack-list-card-sub">{{ rack.totalHeight }}U {{ t('rackDiagram.rackUnit') }}</div>
-            <div class="rack-list-card-usage">{{ t('rackDiagram.usage') }} {{ getRackUsagePercent(rack) }}%</div>
-            <a-progress
-              class="rack-list-progress"
-              :percent="getRackUsagePercent(rack)"
-              :show-info="false"
-              size="small"
-              :stroke-width="6"
-            />
-            <div class="rack-list-card-usage-detail">
-              {{ getRackUsedU(rack) }}U {{ t('rackDiagram.used') }} / {{ rack.totalHeight }}U {{ t('rackDiagram.total') }}
-            </div>
-            <div class="rack-list-card-extra">
-              {{ t('rackDiagram.free') }} {{ getRackFreeU(rack) }}U · {{ t('rackDiagram.deviceCount') }} {{ getRackDeviceCount(rack) }}{{ t('rackDiagram.countSuffix') }}
+            <div class="rack-list-card-body">
+              <span class="rack-list-card-rack-icon" aria-hidden="true">
+                <RackListCardIcon />
+              </span>
+              <div class="rack-list-card-content">
+                <div class="rack-list-card-title">{{ rack.name }}</div>
+                <div class="rack-list-card-meta">{{ t('label.created') }} {{ getRackCreatedDate(rack) }}</div>
+                <div class="rack-list-card-meta rack-list-card-meta-location-row">
+                  <a-tooltip :title="`${t('rackDiagram.rackLocation')} ${getRackLocation(rack)}`">
+                    <span class="rack-list-card-location">{{ t('rackDiagram.rackLocation') }} {{ getRackLocation(rack) }}</span>
+                  </a-tooltip>
+                </div>
+                <div class="rack-list-card-usage">{{ t('rackDiagram.usage') }} {{ getRackUsagePercent(rack) }}%</div>
+                <a-progress
+                  class="rack-list-progress"
+                  :percent="getRackUsagePercent(rack)"
+                  :show-info="false"
+                  size="small"
+                  :stroke-width="6"
+                />
+                <div class="rack-list-card-usage-detail">
+                  {{ getRackUsedU(rack) }}U {{ t('rackDiagram.used') }} / {{ rack.totalHeight }}U {{ t('rackDiagram.total') }}
+                </div>
+                <div class="rack-list-card-extra">
+                  {{ t('rackDiagram.free') }} {{ getRackFreeU(rack) }}U · {{ t('rackDiagram.deviceCount') }} {{ getRackDeviceCount(rack) }}{{ t('rackDiagram.countSuffix') }}
+                </div>
+              </div>
             </div>
           </a-card>
         </div>
@@ -137,37 +149,67 @@
             <div class="rack-wrapper" v-for="{ rack, index: rIndex } in visibleRackEntries" :key="`rack-${rIndex}`">
 
               <div class="rack-header">
-                <div class="rack-header-inner">
-                  <div class="rack-header-left">
-                    <a-tooltip title="목록으로">
-                      <a-button size="small" shape="circle" class="rack-back-inline-btn" @click="backToRackList">
-                        <template #icon><LeftOutlined /></template>
-                      </a-button>
-                    </a-tooltip>
+                <div class="rack-header-top">
+                  <div class="rack-header-title-group">
                     <a-tooltip placement="top">
                       <template #title>
                         {{ rack.name }} ({{ rack.totalHeight }}U)
                       </template>
-                      <span class="rack-name-text">
+                      <span class="rack-header-title">
                         {{ rack.name }} ({{ rack.totalHeight }}U)
                       </span>
                     </a-tooltip>
                   </div>
 
                   <div class="rack-header-actions">
-                    <a-button size="small" type="text" @click="cloneRack(rIndex)" :title="t('rackDiagram.cloneRack')">
-                      <CopyOutlined />
-                    </a-button>
-                    <a-button size="small" type="text" @click="openRackModal('edit', rIndex)" :title="t('rackDiagram.edit')">
-                      <SettingOutlined />
-                    </a-button>
-                    <a-popconfirm :title="t('rackDiagram.deleteConfirm')" @confirm="deleteRack(rIndex)">
-                      <a-button size="small" type="text" danger>
-                        <DeleteOutlined />
-                      </a-button>
-                    </a-popconfirm>
+                    <div class="rack-header-action-group rack-header-action-group-list">
+                      <a-tooltip :title="t('rackDiagram.backToList')">
+                        <a-button class="rack-header-action-btn" @click="backToRackList">
+                          <template #icon><UnorderedListOutlined /></template>
+                        </a-button>
+                      </a-tooltip>
+                    </div>
+                    <span class="rack-header-action-separator"></span>
+                    <div class="rack-header-action-group">
+                      <a-tooltip :title="t('rackDiagram.edit')">
+                        <a-button class="rack-header-action-btn" @click="openRackModal('edit', rIndex)">
+                          <template #icon><EditOutlined /></template>
+                        </a-button>
+                      </a-tooltip>
+                      <a-tooltip :title="t('rackDiagram.cloneRack')">
+                        <a-button class="rack-header-action-btn" @click="cloneRack(rIndex)">
+                          <template #icon><CopyOutlined /></template>
+                        </a-button>
+                      </a-tooltip>
+                      <a-popconfirm :title="t('rackDiagram.deleteConfirm')" @confirm="deleteRack(rIndex)">
+                        <a-tooltip :title="t('rackDiagram.delete')">
+                          <a-button class="rack-header-action-btn rack-header-action-danger">
+                            <template #icon><DeleteOutlined /></template>
+                          </a-button>
+                        </a-tooltip>
+                      </a-popconfirm>
+                    </div>
                   </div>
                 </div>
+                <div class="rack-header-meta-row">
+                  <span class="rack-header-meta-item">
+                    <span>{{ getRackUsedU(rack) }}U / {{ rack.totalHeight }}U</span>
+                  </span>
+                  <span class="rack-header-meta-divider">·</span>
+                  <span class="rack-header-meta-item">
+                    <CalendarOutlined />
+                    <span>{{ t('label.created') }} {{ getRackCreatedDate(rack) }}</span>
+                  </span>
+                  <span class="rack-header-meta-divider">·</span>
+                  <span class="rack-header-meta-item rack-header-meta-location">
+                    <EnvironmentOutlined />
+                    <a-tooltip :title="`${t('rackDiagram.rackLocation')} ${getRackLocation(rack)}`">
+                      <span class="rack-header-meta-ellipsis">
+                        {{ t('rackDiagram.rackLocation') }} {{ getRackLocation(rack) }}
+                      </span>
+                    </a-tooltip>
+                  </span>
+                </div>
               </div>
 
               <div class="rack-body">
@@ -226,7 +268,7 @@
                         v-html="renderBadgeIcon(getDevicePanelType(item))"
                       ></div>
 
-                      <div class="device-name-tag" v-if="item.type !== 'blank'">
+                      <div class="device-name-tag">
                         <div class="tag-content">
                           <span v-if="item.type !== 'custom'" class="tag-text">{{ item.label }}</span>
                           <span v-else class="tag-text">{{ item.customType }}</span>
@@ -360,6 +402,12 @@
         <a-form-item :label="t('rackDiagram.rackName')">
           <a-input v-model:value="rackForm.name" :placeholder="t('rackDiagram.rackNamePlaceholder')" />
         </a-form-item>
+        <a-form-item :label="t('rackDiagram.rackLocation')">
+          <a-input v-model:value="rackForm.location" :placeholder="t('rackDiagram.rackLocationPlaceholder')" />
+        </a-form-item>
+        <a-form-item :label="t('label.created')">
+          <a-input :value="formatRackDate(rackForm.createdAt)" disabled />
+        </a-form-item>
         <a-form-item :label="t('rackDiagram.totalHeight')">
           <a-input-number
             v-model:value="rackForm.totalHeight"
@@ -578,12 +626,13 @@ import html2canvas from 'html2canvas'
 import { api } from '@/api'
 import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
+import RackListCardIcon from './components/RackListCardIcon.vue'
 import {
   CopyOutlined,
+  EditOutlined,
   SettingOutlined,
   DeleteOutlined,
   InfoCircleOutlined,
-  LeftOutlined,
   PlusOutlined,
   FileTextOutlined,
   UploadOutlined,
@@ -595,6 +644,8 @@ import {
   AppstoreOutlined,
   MoreOutlined,
   UnorderedListOutlined,
+  CalendarOutlined,
+  EnvironmentOutlined,
   CloseOutlined
 } from '@ant-design/icons-vue'
 
@@ -933,17 +984,22 @@ const rackModalVisible = ref(false)
 const rackModalMode = ref('add') // 'add' or 'edit'
 const targetRackIndex = ref(-1)
 
-const rackForm = reactive({ name: '', totalHeight: 42 })
+const rackForm = reactive({ name: '', totalHeight: 42, location: '', createdAt: '' })
 
 const openRackModal = (mode, index = -1) => {
   rackModalMode.value = mode
   targetRackIndex.value = index
   if (mode === 'edit' && index > -1) {
-    rackForm.name = parsedRacks.value[index].name
-    rackForm.totalHeight = parsedRacks.value[index].totalHeight
+    const rack = parsedRacks.value[index]
+    rackForm.name = rack.name
+    rackForm.totalHeight = rack.totalHeight
+    rackForm.location = rack.location || rack.room || rack.position || ''
+    rackForm.createdAt = rack.createdAt || rack.created || rack.createDate || ''
   } else {
     rackForm.name = ''
     rackForm.totalHeight = 42
+    rackForm.location = ''
+    rackForm.createdAt = new Date().toISOString()
   }
   rackModalVisible.value = true
 }
@@ -1070,6 +1126,9 @@ const cloneRack = (rIndex) => {
   const newRack = {
     ...targetRack,
     name: `${targetRack.name} (${t('rackDiagram.copySuffix')})`,
+    createdAt: new Date().toISOString(),
+    created: undefined,
+    createDate: undefined,
     items: targetRack.items.map(item => ({ ...item }))
   }
   parsedRacks.value.push(newRack)
@@ -1079,6 +1138,7 @@ const cloneRack = (rIndex) => {
 // 랙 모달 저장 로직
 const submitRackModal = () => {
   const rackName = String(rackForm.name || '').trim()
+  const rackLocation = String(rackForm.location || '').trim()
   if (!rackName) {
     message.warning(t('rackDiagram.msg.enterRackName'))
     return
@@ -1106,6 +1166,8 @@ const submitRackModal = () => {
     parsedRacks.value.push({
       name: rackName,
       totalHeight: rackForm.totalHeight,
+      location: rackLocation,
+      createdAt: rackForm.createdAt || new Date().toISOString(),
       items: [{ type: 'gap', height: rackForm.totalHeight }]
     })
   } else {
@@ -1117,6 +1179,7 @@ const submitRackModal = () => {
       // 랙 크기가 커졌으면 맨 아래에 그만큼 여백(Gap) 추가
       targetRack.items.push({ type: 'gap', height: diff })
       targetRack.name = rackName
+      targetRack.location = rackLocation
       targetRack.totalHeight = rackForm.totalHeight
     } else if (diff < 0) {
       // 랙 크기가 줄어들었을 때의 스마트 처리 로직
@@ -1154,10 +1217,12 @@ const submitRackModal = () => {
 
       targetRack.items = tempItems
       targetRack.name = rackName
+      targetRack.location = rackLocation
       targetRack.totalHeight = rackForm.totalHeight
     } else {
       // 높이는 그대로고 이름만 변경된 경우
       targetRack.name = rackName
+      targetRack.location = rackLocation
     }
   }
   closeRackModal()
@@ -1239,6 +1304,17 @@ const getRackUsagePercent = (rack) => {
   if (!total) return 0
   return Math.round((getRackUsedU(rack) / total) * 100)
 }
+const formatRackDate = (value) => {
+  if (!value) return '-'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return String(value)
+  const yyyy = date.getFullYear()
+  const mm = String(date.getMonth() + 1).padStart(2, '0')
+  const dd = String(date.getDate()).padStart(2, '0')
+  return `${yyyy}.${mm}.${dd}`
+}
+const getRackCreatedDate = (rack) => formatRackDate(rack?.createdAt || rack?.created || rack?.createDate)
+const getRackLocation = (rack) => rack?.location || rack?.room || rack?.position || '-'
 const searchQuery = ref('')
 const hasSearchQuery = computed(() => !!searchQuery.value?.trim())
 
@@ -2544,16 +2620,21 @@ onBeforeUnmount(() => {
 
 .rack-list-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 12px;
 }
 
 .rack-list-card {
   border-radius: 10px;
   position: relative;
+  min-height: 218px;
   transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
+.rack-list-card :deep(.ant-card-body) {
+  height: 100%;
+}
+
 .rack-list-card-actions {
   position: absolute;
   top: 8px;
@@ -2595,12 +2676,63 @@ onBeforeUnmount(() => {
   font-size: 16px;
   font-weight: 700;
   color: #1f2937;
+  line-height: 1.35;
+  min-height: 22px;
+  max-width: 100%;
+  padding-right: 28px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rack-list-card-body {
+  display: flex;
+  align-items: flex-start;
+  gap: 0;
+}
+
+.rack-list-card-rack-icon {
+  width: 59px;
+  height: 59px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 59px;
+  margin-right: 12px;
+  color: #1f2937;
 }
 
-.rack-list-card-sub {
-  margin-top: 2px;
+.rack-list-card-rack-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.rack-list-card-content {
+  flex: 1;
+  min-width: 0;
+  padding-right: 34px;
+}
+
+.rack-list-card-meta {
+  margin-top: 4px;
   font-size: 13px;
   color: #6b7280;
+  display: block;
+  min-width: 0;
+}
+
+.rack-list-card-meta-location-row {
+  margin-top: 2px;
+}
+
+.rack-list-card-location {
+  display: inline-block;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .rack-list-card-usage {
@@ -2785,49 +2917,139 @@ onBeforeUnmount(() => {
 
 /* 랙 헤더 */
 .rack-header {
-  color: #1f2937;
-  font-weight: bold;
-  margin-bottom: 15px;
-  padding-bottom: 15px;
-  border-bottom: 2px solid #1890ff;
+  color: #111827;
+  margin-bottom: 24px;
+  padding: 16px 16px 14px;
+  border-radius: 12px;
+  background: #fff;
+  border: 1px solid #eef2f7;
+  border-bottom: 1px solid #1677ff;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
 }
 
-.rack-header-inner {
+.rack-header-top {
   display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap; /* 절대 줄바꿈 금지 */
-  align-items: center;
   justify-content: space-between;
-  width: 100%;
-  height: 24px; /* 높이 고정으로 안정감 부여 */
+  gap: 12px;
+  align-items: flex-start;
 }
 
-.rack-header-left {
+.rack-header-title-group {
   display: flex;
   align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  gap: 10px;
+}
+
+.rack-header-title {
+  color: #111827;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.2;
   min-width: 0;
+  flex: 1 1 auto;
+  max-width: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rack-header-actions {
+  display: flex !important;
+  align-items: center;
   gap: 8px;
-  flex: 1;
+  flex-shrink: 0;
 }
 
-.rack-back-inline-btn {
-  color: #64748b !important;
-  height: 28px !important;
-  width: 28px !important;
-  min-width: 28px !important;
+.rack-header-action-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.rack-header-action-separator {
+  width: 1px;
+  height: 26px;
+  background: #e5e7eb;
+}
+
+.rack-header-action-btn {
+  width: 46px !important;
+  height: 46px !important;
   padding: 0 !important;
-  border-radius: 999px !important;
-  border: 1px solid #dbe3ee !important;
+  border-radius: 8px !important;
+  border-color: #e5e7eb !important;
+  color: #111827 !important;
   background: #fff !important;
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
 }
 
-.rack-back-inline-btn:hover {
+.rack-header-action-btn :deep(.anticon) {
+  font-size: 18px;
+}
+
+.rack-header-action-btn:hover {
   color: #1677ff !important;
-  border-color: #dbeafe !important;
-  background: #f0f7ff !important;
+  border-color: #1677ff !important;
+}
+
+.rack-header-action-danger {
+  color: #ff4d4f !important;
+}
+
+.rack-header-action-danger:hover {
+  color: #ff4d4f !important;
+  border-color: #ff4d4f !important;
+}
+
+.rack-header-meta-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 6px;
+  margin-top: 4px;
+  color: #6b7280;
+  font-size: 14px;
+  font-weight: 500;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.rack-header-meta-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+.rack-header-meta-item :deep(.anticon) {
+  color: #9ca3af;
+  font-size: 16px;
+}
+
+.rack-header-meta-divider {
+  flex: 0 0 auto;
+  color: #9ca3af;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.rack-header-meta-location {
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.rack-header-meta-ellipsis {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
 }
 
 /* 랙 본체 가로 정렬용 */
@@ -2915,27 +3137,6 @@ onBeforeUnmount(() => {
   pointer-events: none;
 }
 
-/* 랙 이름 텍스트: 길어지면 말줄임표 처리 */
-.rack-name-text {
-  flex: 1;
-  min-width: 0; /* flex 환경에서 ellipsis 작동 필수 조건 */
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 19px; /* 가독성과 공간 확보를 위한 최적 크기 */
-  font-weight: bold;
-  margin-right: 10px;
-  /* 마우스 오버 시 클릭 가능한 느낌 전달 */
-  //cursor: pointer;
-  transition: color 0.2s ease;
-}
-
-/* 마우스 호버 시 텍스트 색상을 밝게 변경 */
-.rack-name-text:hover {
-  color: #1677ff !important;
-  text-decoration: none; /* 밑줄 추가로 가독성 확보 */
-}
-
 .rack-item:last-child {
   border-bottom: none;
   margin-bottom: 0;
@@ -2945,41 +3146,6 @@ onBeforeUnmount(() => {
   content: none;
 }
 
-/* 1. 버튼들을 감싸는 컨테이너를 무조건 가로(Row)로 배치 */
-.rack-header-actions {
-  display: flex !important;
-  flex-direction: row !important; /* 세로로 쌓이는 것 방지 */
-  align-items: center;
-  flex-shrink: 0;
-}
-
-/* 2. 개별 버튼 스타일 (inline-flex를 써야 가로 배열이 유지됨) */
-.rack-header-actions .ant-btn {
-  color: #334155 !important;
-  padding: 0 8px !important;
-  height: 34px !important;
-  min-width: 34px;
-  display: inline-flex !important; /* flex 대신 inline-flex 적용 */
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: 1px solid #d8e1ec;
-  border-radius: 6px;
-  box-shadow: none;
-}
-
-/* 3. 내부 Ant Design 아이콘 색상 강제 (검은색 변함 방지) */
-.rack-header-actions .ant-btn :deep(.anticon) {
-  color: #334155 !important;
-  font-size: 18px !important;
-}
-
-/* 4. 버튼 비활성화 상태 색상 처리 */
-.rack-header-actions .ant-btn:disabled,
-.rack-header-actions .ant-btn:disabled :deep(.anticon) {
-  color: rgba(51, 65, 85, 0.35) !important;
-}
-
 /* 여백 스타일 */
 .gap-content {
   height: 100%;
@@ -3432,7 +3598,11 @@ onBeforeUnmount(() => {
   color: rgba(255, 255, 255, 0.9);
 }
 
-.rack-diagram-root.is-dark .rack-list-card-sub,
+.rack-diagram-root.is-dark .rack-list-card-rack-icon {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.rack-diagram-root.is-dark .rack-list-card-meta,
 .rack-diagram-root.is-dark .rack-list-card-usage-detail,
 .rack-diagram-root.is-dark .rack-list-card-extra {
   color: rgba(255, 255, 255, 0.65);
@@ -3442,18 +3612,6 @@ onBeforeUnmount(() => {
   color: rgba(255, 255, 255, 0.9);
 }
 
-.rack-diagram-root.is-dark .rack-back-inline-btn {
-  color: rgba(255, 255, 255, 0.72) !important;
-  border-color: #3a4654 !important;
-  background: #1f2732 !important;
-}
-
-.rack-diagram-root.is-dark .rack-back-inline-btn:hover {
-  color: #91caff !important;
-  border-color: #31445f !important;
-  background: #273244 !important;
-}
-
 .rack-diagram-root.is-dark .device-info-row {
   color: rgba(255, 255, 255, 0.78);
 }
diff --git a/ui/src/views/infra/zone/components/RackListCardIcon.vue b/ui/src/views/infra/zone/components/RackListCardIcon.vue
new file mode 100644
index 000000000000..5294f30e4d5b
--- /dev/null
+++ b/ui/src/views/infra/zone/components/RackListCardIcon.vue
@@ -0,0 +1,74 @@
+<template>
+  <svg
+    class="rack-card-icon"
+    width="59"
+    height="59"
+    viewBox="0 0 28 28"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <rect
+      x="6"
+      y="4"
+      width="16"
+      height="20"
+      rx="2.5"
+      stroke="currentColor"
+      stroke-width="0.8"
+      stroke-linejoin="round"
+    />
+    <rect
+      x="8.6"
+      y="5.9"
+      width="10.8"
+      height="2.8"
+      rx="1.0"
+      stroke="currentColor"
+      stroke-width="0.8"
+      stroke-linejoin="round"
+    />
+    <circle cx="10.1" cy="7.3" r="0.8" fill="currentColor" />
+    <rect
+      x="8.6"
+      y="10.2"
+      width="10.8"
+      height="2.8"
+      rx="1.0"
+      stroke="currentColor"
+      stroke-width="0.8"
+      stroke-linejoin="round"
+    />
+    <circle cx="10.1" cy="11.6" r="0.8" fill="currentColor" />
+    <rect
+      x="8.6"
+      y="14.5"
+      width="10.8"
+      height="2.8"
+      rx="1.0"
+      stroke="currentColor"
+      stroke-width="0.8"
+      stroke-linejoin="round"
+    />
+    <circle cx="10.1" cy="15.9" r="0.8" fill="currentColor" />
+    <rect
+      x="8.6"
+      y="18.8"
+      width="10.8"
+      height="2.8"
+      rx="1.0"
+      stroke="currentColor"
+      stroke-width="1.125"
+      stroke-linejoin="round"
+    />
+    <circle cx="10.1" cy="20.2" r="0.8" fill="currentColor" />
+  </svg>
+</template>
+
+<style scoped>
+.rack-card-icon {
+  display: inline-block;
+  vertical-align: middle;
+  flex: 0 0 auto;
+}
+</style>

From 82ad01351e122f3f206b47eca82888a1f6fdf321 Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Thu, 28 May 2026 10:19:28 +0900
Subject: [PATCH 12/17] =?UTF-8?q?[Mold][=EB=9E=99=20=EC=8B=9C=EA=B0=81?=
 =?UTF-8?q?=ED=99=94]=20=EB=9E=99=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EB=A7=88=EC=9A=B0=EC=8A=A4=20=EC=98=A4=EB=B2=84=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/views/infra/zone/RackDiagramTab.vue | 37 ++++++++++++++++++----
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/ui/src/views/infra/zone/RackDiagramTab.vue b/ui/src/views/infra/zone/RackDiagramTab.vue
index 31d66d49694e..06c284103937 100644
--- a/ui/src/views/infra/zone/RackDiagramTab.vue
+++ b/ui/src/views/infra/zone/RackDiagramTab.vue
@@ -112,7 +112,13 @@
                 <RackListCardIcon />
               </span>
               <div class="rack-list-card-content">
-                <div class="rack-list-card-title">{{ rack.name }}</div>
+                <a-tooltip :title="getOverflowTitle(`list-${idx}`, rack.name)">
+                  <div
+                    class="rack-list-card-title"
+                    :ref="setOverflowTitleRef(`list-${idx}`)"
+                    @mouseenter="updateOverflowTitle(`list-${idx}`)"
+                  >{{ rack.name }}</div>
+                </a-tooltip>
                 <div class="rack-list-card-meta">{{ t('label.created') }} {{ getRackCreatedDate(rack) }}</div>
                 <div class="rack-list-card-meta rack-list-card-meta-location-row">
                   <a-tooltip :title="`${t('rackDiagram.rackLocation')} ${getRackLocation(rack)}`">
@@ -151,11 +157,15 @@
               <div class="rack-header">
                 <div class="rack-header-top">
                   <div class="rack-header-title-group">
-                    <a-tooltip placement="top">
-                      <template #title>
-                        {{ rack.name }} ({{ rack.totalHeight }}U)
-                      </template>
-                      <span class="rack-header-title">
+                    <a-tooltip
+                      placement="top"
+                      :title="getOverflowTitle(`detail-${rIndex}`, `${rack.name} (${rack.totalHeight}U)`)"
+                    >
+                      <span
+                        class="rack-header-title"
+                        :ref="setOverflowTitleRef(`detail-${rIndex}`)"
+                        @mouseenter="updateOverflowTitle(`detail-${rIndex}`)"
+                      >
                         {{ rack.name }} ({{ rack.totalHeight }}U)
                       </span>
                     </a-tooltip>
@@ -1315,6 +1325,21 @@ const formatRackDate = (value) => {
 }
 const getRackCreatedDate = (rack) => formatRackDate(rack?.createdAt || rack?.created || rack?.createDate)
 const getRackLocation = (rack) => rack?.location || rack?.room || rack?.position || '-'
+const overflowTitleState = reactive({})
+const overflowTitleRefs = new Map()
+
+const setOverflowTitleRef = (key) => (el) => {
+  if (el) overflowTitleRefs.set(key, el)
+  else overflowTitleRefs.delete(key)
+}
+
+const updateOverflowTitle = (key) => {
+  const el = overflowTitleRefs.get(key)
+  overflowTitleState[key] = !!el && (el.scrollWidth > el.clientWidth + 1)
+}
+
+const getOverflowTitle = (key, fullText) => (overflowTitleState[key] ? fullText : null)
+
 const searchQuery = ref('')
 const hasSearchQuery = computed(() => !!searchQuery.value?.trim())
 

From 1954e447c559cc8c0129202a14f6d9c6d1890f86 Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Mon, 8 Jun 2026 16:42:11 +0900
Subject: [PATCH 13/17] =?UTF-8?q?[Mold][=EB=9E=99=20=EC=8B=9C=EA=B0=81?=
 =?UTF-8?q?=ED=99=94]=202=EC=B0=A8=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/com/cloud/rack/RackLayoutVO.java     |    1 +
 ui/public/locales/en.json                     |   97 +-
 ui/public/locales/ko_KR.json                  |   95 +
 ui/src/views/infra/InfraSummary.vue           |   86 +-
 ui/src/views/infra/zone/RackDiagramTab.vue    | 3015 +++++++++++++++--
 .../zone/components/RackListCardIcon.vue      |  100 +-
 6 files changed, 3030 insertions(+), 364 deletions(-)

diff --git a/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutVO.java b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutVO.java
index 9f9cfb288727..aaa26fc831ae 100644
--- a/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutVO.java
+++ b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutVO.java
@@ -41,6 +41,7 @@ public RackLayoutVO(Long zoneId, String name, String content) {
         this.zoneId = zoneId;
         this.name = name;
         this.content = content;
+        this.updatedAt = new Date();
     }
 
     @Override
diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index d6420291ba70..e4b596ddc6e8 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -5114,19 +5114,105 @@
 "rackDiagram.deviceTypeKvm": "KVM / Console",
 "rackDiagram.deviceTypeCooling": "Cooling Fan Unit",
 "rackDiagram.deviceTypePatch": "Patch Panel",
+"rackDiagram.deviceTypePdu": "PDU",
+"rackDiagram.deviceTypeUps": "UPS",
 "rackDiagram.deviceTypeBlank": "Blank Panel",
 "rackDiagram.deviceTypeCustom": "Custom",
 "rackDiagram.deviceName": "Device name",
 "rackDiagram.deviceNamePlaceholder": "Enter device name.",
 "rackDiagram.selectInfraAsset": "Select infra asset",
+"rackDiagram.linkedInfraAsset": "Linked infra asset",
+"rackDiagram.infraAsset": "Infra asset",
 "rackDiagram.selectHost": "Select host.",
 "rackDiagram.customTypeName": "Custom type name",
 "rackDiagram.customTypePlaceholder": "e.g. Router",
 "rackDiagram.height": "Height (U)",
 "rackDiagram.maxAllowedHeightPrefix": "Maximum allowed height at this position is",
 "rackDiagram.maxAllowedHeightSuffix": ".",
-"rackDiagram.deviceMemo": "Device memo / details",
+"rackDiagram.deviceMemo": "Device memo",
+"rackDiagram.hardwareInfo": "Hardware information",
+"rackDiagram.vendor": "Vendor",
+"rackDiagram.model": "Model",
+"rackDiagram.serial": "Serial",
+"rackDiagram.assetNo": "Asset No.",
+"rackDiagram.purchaseDate": "Purchase date",
+"rackDiagram.maintenanceEndDate": "Maintenance end date",
+"rackDiagram.vendorPlaceholder": "e.g. Dell",
+"rackDiagram.modelPlaceholder": "e.g. PowerEdge R750",
+"rackDiagram.serialPlaceholder": "e.g. ABCD1234",
+"rackDiagram.assetNoPlaceholder": "e.g. ASSET-001",
+"rackDiagram.deviceSpecs": "Device specs",
+"rackDiagram.deviceSpecKeyPlaceholder": "e.g. CPU",
+"rackDiagram.deviceSpecValuePlaceholder": "e.g. 32 cores",
+"rackDiagram.specCpuCores": "CPU Cores",
+"rackDiagram.specCpuMhz": "CPU (MHz)",
+"rackDiagram.specMemoryMb": "Memory (MB)",
+"rackDiagram.specDiskGb": "Disk (GB)",
+"rackDiagram.specStorageTb": "Storage (TB)",
+"rackDiagram.specNicCount": "NIC Count",
+"rackDiagram.specNetworkPortCount": "Network Ports",
+"rackDiagram.specThroughputGbps": "Throughput (Gbps)",
+"rackDiagram.specPowerW": "Power (W)",
+"rackDiagram.specVoltageV": "Voltage (V)",
+"rackDiagram.specCurrentA": "Current (A)",
+"rackDiagram.specCapacityVa": "Capacity (VA)",
+"rackDiagram.specBatteryRuntimeMin": "Battery Runtime (min)",
+"rackDiagram.specAirflowCfm": "Airflow (CFM)",
+"rackDiagram.specFanRpm": "Fan Speed (RPM)",
+"rackDiagram.specFirmware": "Firmware",
+"rackDiagram.specOs": "OS",
+"rackDiagram.specHypervisor": "Hypervisor",
+"rackDiagram.specCpuGhz": "CPU (GHz)",
+"rackDiagram.specCpuSocketCount": "CPU Sockets",
+"rackDiagram.specGpuCount": "GPU Count",
+"rackDiagram.specGpuMemoryGib": "GPU Memory (GiB)",
+"rackDiagram.specMemoryGb": "Memory (GB)",
+"rackDiagram.specMemoryGib": "Memory (GiB)",
+"rackDiagram.specMemoryTb": "Memory (TB)",
+"rackDiagram.specMemoryTib": "Memory (TiB)",
+"rackDiagram.specDiskGib": "Disk (GiB)",
+"rackDiagram.specDiskTb": "Disk (TB)",
+"rackDiagram.specDiskTib": "Disk (TiB)",
+"rackDiagram.specStorageGb": "Storage (GB)",
+"rackDiagram.specStorageGib": "Storage (GiB)",
+"rackDiagram.specStorageTib": "Storage (TiB)",
+"rackDiagram.specCapacityGb": "Capacity (GB)",
+"rackDiagram.specCapacityGib": "Capacity (GiB)",
+"rackDiagram.specCapacityTb": "Capacity (TB)",
+"rackDiagram.specCapacityTib": "Capacity (TiB)",
+"rackDiagram.specDriveBayCount": "Drive Bays",
+"rackDiagram.specPortCount": "Port Count",
+"rackDiagram.specThroughputMbps": "Throughput (Mbps)",
+"rackDiagram.specThroughputTbps": "Throughput (Tbps)",
+"rackDiagram.specPowerKw": "Power (kW)",
+"rackDiagram.specCapacityKva": "Capacity (kVA)",
+"rackDiagram.specBatteryCapacityWh": "Battery Capacity (Wh)",
+"rackDiagram.specFanCount": "Fan Count",
+"rackDiagram.addSpecRow": "Add spec row",
 "rackDiagram.deviceMemoPlaceholder": "Enter IP, purpose, owner, etc.",
+"rackDiagram.tabSummary": "Summary",
+"rackDiagram.tabConnections": "Connections",
+"rackDiagram.tabHistory": "History",
+"rackDiagram.sectionBasicInfo": "Basic information",
+"rackDiagram.position": "Position",
+"rackDiagram.structuredMemo": "Device details",
+"rackDiagram.freeMemo": "Free memo",
+"rackDiagram.memoKey": "Item",
+"rackDiagram.memoValue": "Content",
+"rackDiagram.unit": "Unit",
+"rackDiagram.addMemoRow": "Add row",
+"rackDiagram.selectedDeviceActions": "Selected device actions",
+"rackDiagram.revert": "Revert",
+"rackDiagram.changeInfraAsset": "Change infra asset",
+"rackDiagram.changeInfraAssetHelp": "Changing the linked infra asset only updates the rack device mapping. Save the device panel to apply the change.",
+"rackDiagram.changeInfraAssetInlineHelp": "Changes the infra asset linked to this device.",
+"rackDiagram.deviceDelete": "Delete device",
+"rackDiagram.noQuickLinks": "No shortcut links registered.",
+"rackDiagram.links": "Links",
+"rackDiagram.hostLinks": "Host links",
+"rackDiagram.hostLabel": "Host",
+"rackDiagram.customLinks": "Custom links",
+"rackDiagram.noHistory": "No history to display.",
 "rackDiagram.quickLinks": "Custom shortcut links (one per line)",
 "rackDiagram.quickLinksHelpText": "Format: LinkName: URL (e.g. iDRAC: https://10.10.12.2:9090, Cube: 10.10.12.3:9090)",
 "rackDiagram.quickLinksPlaceholder": "Examples:\niDRAC: https://10.10.12.2:9090\nCube: 10.10.12.3:9090\nNAS|https://nas.local\n(If protocol is omitted, https:// is added automatically)",
@@ -5190,6 +5276,7 @@
 "rackDiagram.msg.enterCustomType": "Please enter custom type name.",
 "rackDiagram.msg.customTypeMax": "Custom type name must be 60 characters or less.",
 "rackDiagram.msg.deviceHeightInteger": "Device height must be an integer of 1 or more.",
+"rackDiagram.msg.hardwareFieldMax": "{field} must be 128 characters or less.",
 "rackDiagram.msg.deviceLargerThanGap": "Cannot add a device larger than selected gap.",
 "rackDiagram.msg.notEnoughGapBelow": "Not enough gap below to increase size.",
 "rackDiagram.msg.notEnoughSpaceInRack": "Not enough free space in rack. ({height}U needed)",
@@ -5207,7 +5294,15 @@
 "rackDiagram.total": "total",
 "rackDiagram.free": "Free",
 "rackDiagram.searchMatched": "Matches {count}",
+"rackDiagram.moreIpCount": "+ {count} more",
 "rackDiagram.freeSpace": "Free Space",
 "rackDiagram.deviceCount": "Devices",
+"rackDiagram.rackStatus": "Rack Status",
+"rackDiagram.rackStatusDesc": "Check the usage status of all racks at a glance.",
+"rackDiagram.totalRackCount": "Total Racks",
+"rackDiagram.totalDeviceCount": "Total Devices",
+"rackDiagram.averageUsage": "Average Usage",
+"rackDiagram.totalUsedU": "Total Used U",
+"rackDiagram.totalFreeU": "Free U",
 "rackDiagram.countSuffix": ""
 }
diff --git a/ui/public/locales/ko_KR.json b/ui/public/locales/ko_KR.json
index 887198863e02..f1b3295aad5d 100644
--- a/ui/public/locales/ko_KR.json
+++ b/ui/public/locales/ko_KR.json
@@ -5116,11 +5116,15 @@
 "rackDiagram.deviceTypeKvm": "KVM / \ucf58\uc194",
 "rackDiagram.deviceTypeCooling": "\ucfe8\ub9c1 \ud32c \uc720\ub2db (Cooling Fan Unit)",
 "rackDiagram.deviceTypePatch": "\ud328\uce58\ud328\ub110 (Patch Panel)",
+"rackDiagram.deviceTypePdu": "PDU",
+"rackDiagram.deviceTypeUps": "UPS",
 "rackDiagram.deviceTypeBlank": "\ube14\ub7ad\ud06c \ud328\ub110 (Blank)",
 "rackDiagram.deviceTypeCustom": "\ucee4\uc2a4\ud140 (Custom)",
 "rackDiagram.deviceName": "\uc7a5\ube44\uba85",
 "rackDiagram.deviceNamePlaceholder": "\uc7a5\ube44\uba85\uc744 \uc785\ub825\ud558\uc138\uc694.",
 "rackDiagram.selectInfraAsset": "\uc778\ud504\ub77c \uc790\uc0b0 \uc120\ud0dd",
+"rackDiagram.linkedInfraAsset": "\uc5f0\uacb0 \uc778\ud504\ub77c \uc790\uc0b0",
+"rackDiagram.infraAsset": "\uc778\ud504\ub77c \uc790\uc0b0",
 "rackDiagram.selectHost": "Host\ub97c \uc120\ud0dd\ud558\uc138\uc694.",
 "rackDiagram.customTypeName": "\ucee4\uc2a4\ud140 \ud0c0\uc785\uba85",
 "rackDiagram.customTypePlaceholder": "\uc608: Router",
@@ -5128,7 +5132,89 @@
 "rackDiagram.maxAllowedHeightPrefix": "\ud604\uc7ac \uc774 \uc704\uce58\uc758 \ucd5c\ub300 \ud5c8\uc6a9 \ub192\uc774\ub294",
 "rackDiagram.maxAllowedHeightSuffix": "\uc785\ub2c8\ub2e4.",
 "rackDiagram.deviceMemo": "\uc7a5\ube44 \uba54\ubaa8",
+"rackDiagram.hardwareInfo": "\ud558\ub4dc\uc6e8\uc5b4 \uc815\ubcf4",
+"rackDiagram.vendor": "\ubca4\ub354",
+"rackDiagram.model": "\ubaa8\ub378",
+"rackDiagram.serial": "\uc2dc\ub9ac\uc5bc",
+"rackDiagram.assetNo": "\uc790\uc0b0\ubc88\ud638",
+"rackDiagram.purchaseDate": "\uad6c\ub9e4\uc77c",
+"rackDiagram.maintenanceEndDate": "\uc720\uc9c0\ubcf4\uc218 \ub9cc\ub8cc\uc77c",
+"rackDiagram.vendorPlaceholder": "\uc608: Dell",
+"rackDiagram.modelPlaceholder": "\uc608: PowerEdge R750",
+"rackDiagram.serialPlaceholder": "\uc608: ABCD1234",
+"rackDiagram.assetNoPlaceholder": "\uc608: ASSET-001",
+"rackDiagram.deviceSpecs": "\uc7a5\ube44 \uc2a4\ud399",
+"rackDiagram.deviceSpecKeyPlaceholder": "\uc608: CPU",
+"rackDiagram.deviceSpecValuePlaceholder": "\uc608: 32\ucf54\uc5b4",
+"rackDiagram.specCpuCores": "CPU \ucf54\uc5b4",
+"rackDiagram.specCpuMhz": "CPU(MHz)",
+"rackDiagram.specMemoryMb": "\uba54\ubaa8\ub9ac(MB)",
+"rackDiagram.specDiskGb": "\ub514\uc2a4\ud06c(GB)",
+"rackDiagram.specStorageTb": "\uc2a4\ud1a0\ub9ac\uc9c0(TB)",
+"rackDiagram.specNicCount": "NIC \uc218\ub7c9",
+"rackDiagram.specNetworkPortCount": "\ub124\ud2b8\uc6cc\ud06c \ud3ec\ud2b8 \uc218",
+"rackDiagram.specThroughputGbps": "\ucc98\ub9ac\ub7c9(Gbps)",
+"rackDiagram.specPowerW": "\uc804\ub825(W)",
+"rackDiagram.specVoltageV": "\uc804\uc555(V)",
+"rackDiagram.specCurrentA": "\uc804\ub958(A)",
+"rackDiagram.specCapacityVa": "\uc6a9\ub7c9(VA)",
+"rackDiagram.specBatteryRuntimeMin": "\ubc30\ud130\ub9ac \uc9c0\uc18d\uc2dc\uac04(\ubd84)",
+"rackDiagram.specAirflowCfm": "\ud48d\ub7c9(CFM)",
+"rackDiagram.specFanRpm": "\ud32c \uc18d\ub3c4(RPM)",
+"rackDiagram.specFirmware": "\ud38c\uc6e8\uc5b4",
+"rackDiagram.specOs": "OS",
+"rackDiagram.specHypervisor": "\ud558\uc774\ud37c\ubc14\uc774\uc800",
+"rackDiagram.specCpuGhz": "CPU(GHz)",
+"rackDiagram.specCpuSocketCount": "CPU \uc18c\ucf13 \uc218",
+"rackDiagram.specGpuCount": "GPU \uc218\ub7c9",
+"rackDiagram.specGpuMemoryGib": "GPU \uba54\ubaa8\ub9ac(GiB)",
+"rackDiagram.specMemoryGb": "\uba54\ubaa8\ub9ac(GB)",
+"rackDiagram.specMemoryGib": "\uba54\ubaa8\ub9ac(GiB)",
+"rackDiagram.specMemoryTb": "\uba54\ubaa8\ub9ac(TB)",
+"rackDiagram.specMemoryTib": "\uba54\ubaa8\ub9ac(TiB)",
+"rackDiagram.specDiskGib": "\ub514\uc2a4\ud06c(GiB)",
+"rackDiagram.specDiskTb": "\ub514\uc2a4\ud06c(TB)",
+"rackDiagram.specDiskTib": "\ub514\uc2a4\ud06c(TiB)",
+"rackDiagram.specStorageGb": "\uc2a4\ud1a0\ub9ac\uc9c0(GB)",
+"rackDiagram.specStorageGib": "\uc2a4\ud1a0\ub9ac\uc9c0(GiB)",
+"rackDiagram.specStorageTib": "\uc2a4\ud1a0\ub9ac\uc9c0(TiB)",
+"rackDiagram.specCapacityGb": "\uc6a9\ub7c9(GB)",
+"rackDiagram.specCapacityGib": "\uc6a9\ub7c9(GiB)",
+"rackDiagram.specCapacityTb": "\uc6a9\ub7c9(TB)",
+"rackDiagram.specCapacityTib": "\uc6a9\ub7c9(TiB)",
+"rackDiagram.specDriveBayCount": "\ub4dc\ub77c\uc774\ube0c \ubca0\uc774 \uc218",
+"rackDiagram.specPortCount": "\ud3ec\ud2b8 \uc218",
+"rackDiagram.specThroughputMbps": "\ucc98\ub9ac\ub7c9(Mbps)",
+"rackDiagram.specThroughputTbps": "\ucc98\ub9ac\ub7c9(Tbps)",
+"rackDiagram.specPowerKw": "\uc804\ub825(kW)",
+"rackDiagram.specCapacityKva": "\uc6a9\ub7c9(kVA)",
+"rackDiagram.specBatteryCapacityWh": "\ubc30\ud130\ub9ac \uc6a9\ub7c9(Wh)",
+"rackDiagram.specFanCount": "\ud32c \uc218\ub7c9",
+"rackDiagram.addSpecRow": "\uc2a4\ud399 \ud589 \ucd94\uac00",
 "rackDiagram.deviceMemoPlaceholder": "IP \uc8fc\uc18c, \uc6a9\ub3c4, \ub2f4\ub2f9\uc790 \ub4f1\uc744 \uc785\ub825\ud558\uc138\uc694",
+"rackDiagram.tabSummary": "\uc694\uc57d",
+"rackDiagram.tabConnections": "\uc5f0\uacb0",
+"rackDiagram.tabHistory": "\uc774\ub825",
+"rackDiagram.sectionBasicInfo": "\uae30\ubcf8 \uc815\ubcf4",
+"rackDiagram.position": "\uc704\uce58",
+"rackDiagram.structuredMemo": "\uc7a5\ube44 \uc138\ubd80\uc0ac\ud56d",
+"rackDiagram.freeMemo": "\uc790\uc720 \uba54\ubaa8",
+"rackDiagram.memoKey": "\ud56d\ubaa9",
+"rackDiagram.memoValue": "\ub0b4\uc6a9",
+"rackDiagram.unit": "\ub2e8\uc704",
+"rackDiagram.addMemoRow": "\ud589 \ucd94\uac00",
+"rackDiagram.selectedDeviceActions": "\uc120\ud0dd \uc7a5\ube44 \uc791\uc5c5",
+"rackDiagram.revert": "\ub418\ub3cc\ub9ac\uae30",
+"rackDiagram.changeInfraAsset": "\uc790\uc0b0 \uc5f0\uacb0 \ubcc0\uacbd",
+"rackDiagram.changeInfraAssetHelp": "\uc5f0\uacb0\ub41c \uc778\ud504\ub77c \uc790\uc0b0\ub9cc \ubcc0\uacbd\ud569\ub2c8\ub2e4. \ubcc0\uacbd\uc0ac\ud56d\uc744 \uc801\uc6a9\ud558\ub824\uba74 \uc6b0\uce21 \ud328\ub110\uc5d0\uc11c \uc800\uc7a5\ud558\uc138\uc694.",
+"rackDiagram.changeInfraAssetInlineHelp": "\uc774 \uc7a5\ube44\uac00 \uc5f0\uacb0\ub41c \uc778\ud504\ub77c \uc790\uc0b0\uc744 \ubcc0\uacbd\ud569\ub2c8\ub2e4.",
+"rackDiagram.deviceDelete": "\uc7a5\ube44 \uc0ad\uc81c",
+"rackDiagram.noQuickLinks": "\ub4f1\ub85d\ub41c \ubc14\ub85c\uac00\uae30 \ub9c1\ud06c\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.links": "\ub9c1\ud06c",
+"rackDiagram.hostLinks": "\ud638\uc2a4\ud2b8 \ub9c1\ud06c",
+"rackDiagram.hostLabel": "\ud638\uc2a4\ud2b8",
+"rackDiagram.customLinks": "\ucee4\uc2a4\ud140 \ub9c1\ud06c",
+"rackDiagram.noHistory": "\ud45c\uc2dc\ud560 \uc774\ub825\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.",
 "rackDiagram.quickLinks": "\ucee4\uc2a4\ud140 \ubc14\ub85c\uac00\uae30 \ub9c1\ud06c",
 "rackDiagram.quickLinksHelpText": "\uc608: iDRAC: https://10.10.10.10:9090, Cube: 10.10.10.10:9090",
 "rackDiagram.quickLinksPlaceholder": "\uc608\uc2dc:\niDRAC: https://10.10.10.10:9090\nCube: 10.10.10.10:9090\nNAS|https://nas.local\n(\ud504\ub85c\ud1a0\ucf5c\uc744 \uc0dd\ub7b5\ud558\uba74 https://\uac00 \uc790\ub3d9 \ucd94\uac00\ub429\ub2c8\ub2e4)",
@@ -5192,6 +5278,7 @@
 "rackDiagram.msg.enterCustomType": "\ucee4\uc2a4\ud140 \ud0c0\uc785\uba85\uc744 \uc785\ub825\ud574\uc8fc\uc138\uc694.",
 "rackDiagram.msg.customTypeMax": "\ucee4\uc2a4\ud140 \ud0c0\uc785\uba85\uc740 60\uc790 \uc774\ud558\ub85c \uc785\ub825\ud574\uc8fc\uc138\uc694.",
 "rackDiagram.msg.deviceHeightInteger": "\uc7a5\ube44 \ub192\uc774(U)\ub294 1 \uc774\uc0c1\uc758 \uc815\uc218\ub9cc \uc785\ub825\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.hardwareFieldMax": "{field}\uc740(\ub294) 128\uc790 \uc774\ud558\ub85c \uc785\ub825\ud574\uc8fc\uc138\uc694.",
 "rackDiagram.msg.deviceLargerThanGap": "\uc120\ud0dd\ud55c \uc5ec\ubc31\ubcf4\ub2e4 \ud070 \uc7a5\ube44\ub294 \ucd94\uac00\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.",
 "rackDiagram.msg.notEnoughGapBelow": "\uc544\ub798\ucabd \uc5ec\ubc31\uc774 \ubd80\uc871\ud558\uc5ec \ud06c\uae30\ub97c \ub298\ub9b4 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.",
 "rackDiagram.msg.notEnoughSpaceInRack": "\ub799 \ub0b4\uc5d0 \uc5ec\uc720 \uacf5\uac04\uc774 \ubd80\uc871\ud569\ub2c8\ub2e4. (\ud544\uc694 \uacf5\uac04: {height}U)",
@@ -5209,7 +5296,15 @@
 "rackDiagram.total": "\uc804\uccb4",
 "rackDiagram.free": "\uc5ec\uc720",
 "rackDiagram.searchMatched": "\uac80\uc0c9 \uc77c\uce58 {count}",
+"rackDiagram.moreIpCount": "\uc678 {count}\uac1c",
 "rackDiagram.freeSpace": "\uc5ec\uc720 \uacf5\uac04",
 "rackDiagram.deviceCount": "\uc7a5\ube44",
+"rackDiagram.rackStatus": "\ub799 \ud604\ud669",
+"rackDiagram.rackStatusDesc": "\uc804\uccb4 \ub799\uc758 \uc0ac\uc6a9 \ud604\ud669\uc744 \ud55c\ub208\uc5d0 \ud655\uc778\ud569\ub2c8\ub2e4.",
+"rackDiagram.totalRackCount": "\ucd1d \ub799 \uc218",
+"rackDiagram.totalDeviceCount": "\ucd1d \uc7a5\ube44 \uc218",
+"rackDiagram.averageUsage": "\ud3c9\uade0 \uc0ac\uc6a9\ub960",
+"rackDiagram.totalUsedU": "\ucd1d \uc0ac\uc6a9 U",
+"rackDiagram.totalFreeU": "\uc5ec\uc720 U",
 "rackDiagram.countSuffix": "\uac1c"
 }
diff --git a/ui/src/views/infra/InfraSummary.vue b/ui/src/views/infra/InfraSummary.vue
index 8f62a039d70a..8c92941f7f45 100644
--- a/ui/src/views/infra/InfraSummary.vue
+++ b/ui/src/views/infra/InfraSummary.vue
@@ -150,14 +150,23 @@
     <a-col :xs="24">
       <div class="infra-summary-layout">
         <div class="summary-cards-pane">
-          <a-row :gutter="12">
-            <template v-for="(section, index) in sections" :key="index">
+          <div
+            v-for="group in visibleSummaryGroups"
+            :key="group.key"
+            class="summary-group"
+          >
+            <div class="summary-group-header">
+              <span class="summary-group-title">{{ getSummaryGroupTitle(group) }}</span>
+            </div>
+            <a-row :gutter="12">
               <a-col
+                v-for="section in group.items"
+                :key="section"
                 :xs="12"
                 :sm="8"
                 :md="8"
                 :style="{ marginBottom: '12px' }"
-                v-if="routes[section]">
+              >
                 <chart-card :loading="loading" class="summary-mini-card">
                   <div class="chart-card-inner">
                     <router-link :to="{ name: section.substring(0, section.length - 1) }">
@@ -167,8 +176,8 @@
                   </div>
                 </chart-card>
               </a-col>
-            </template>
-          </a-row>
+            </a-row>
+          </div>
         </div>
         <div class="rack-visualization-pane">
           <a-card :bordered="false" class="rack-visualization-card">
@@ -204,6 +213,13 @@ export default {
       loading: true,
       routes: {},
       sections: ['zones', 'pods', 'clusters', 'hosts', 'storagepools', 'imagestores', 'objectstores', 'systemvms', 'routers', 'cpusockets', 'managementservers', 'alerts', 'ilbvms', 'metrics'],
+      summaryGroups: [
+        { key: 'configuration', titleParts: ['label.infrastructure', 'label.configuration'], items: ['zones', 'pods', 'clusters'] },
+        { key: 'compute', title: 'label.compute', items: ['hosts', 'cpusockets', 'systemvms', 'metrics'] },
+        { key: 'network', title: 'label.network', items: ['routers', 'ilbvms'] },
+        { key: 'storage', title: 'label.storage', items: ['storagepools', 'imagestores', 'objectstores'] },
+        { key: 'incident', title: 'label.alerts', items: ['alerts'] }
+      ],
       sslFormVisible: false,
       stats: {},
       intermediateCertificates: [],
@@ -218,7 +234,23 @@ export default {
     this.initForm()
     this.fetchData()
   },
+  computed: {
+    visibleSummaryGroups () {
+      return this.summaryGroups
+        .map(group => {
+          const items = group.items.filter(section => this.routes[section])
+          return { ...group, items }
+        })
+        .filter(group => group.items.length)
+    }
+  },
   methods: {
+    getSummaryGroupTitle (group) {
+      if (group.titleParts) {
+        return group.titleParts.map(key => this.$t(key)).join(' ')
+      }
+      return this.$t(group.title)
+    },
     initForm () {
       this.formRef = ref()
       this.form = reactive({})
@@ -362,11 +394,6 @@ export default {
     margin-bottom: 12px;
   }
 
-  .chart-card-inner {
-    text-align: center;
-    white-space: nowrap;
-    overflow: hidden;
-  }
   .infra-summary-layout {
     display: flex;
     align-items: flex-start;
@@ -381,11 +408,50 @@ export default {
     background: linear-gradient(180deg, #f8f9fb 0%, #f3f5f8 100%);
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
   }
+  .summary-group {
+    padding: 10px 10px 0;
+    border: 1px solid rgba(31, 41, 55, 0.08);
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.54);
+  }
+  .summary-group + .summary-group {
+    margin-top: 12px;
+  }
+  .summary-group-header {
+    display: flex;
+    align-items: center;
+    margin: -2px 2px 10px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid rgba(31, 41, 55, 0.06);
+    color: #111827;
+    font-weight: 700;
+    font-size: 13px;
+    line-height: 18px;
+  }
+  .summary-group-title {
+    position: relative;
+    padding-left: 9px;
+  }
+  .summary-group-title::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 4px;
+    width: 3px;
+    height: 11px;
+    border-radius: 2px;
+    background: #c7d2df;
+  }
   .rack-visualization-pane {
     width: 66%;
     flex: 0 0 66%;
     min-width: 320px;
   }
+  .chart-card-inner {
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+  }
   .summary-mini-card :deep(.ant-card-body) {
     padding: 12px 14px 6px !important;
   }
diff --git a/ui/src/views/infra/zone/RackDiagramTab.vue b/ui/src/views/infra/zone/RackDiagramTab.vue
index 06c284103937..de32805810ad 100644
--- a/ui/src/views/infra/zone/RackDiagramTab.vue
+++ b/ui/src/views/infra/zone/RackDiagramTab.vue
@@ -14,28 +14,57 @@
         <input type="file" ref="fileInput" accept=".json" style="display: none" @change="handleImport" />
       </div>
 
-      <div class="toolbar-right" style="display: flex; align-items: center;">
+      <div class="toolbar-actions">
         <a-space :wrap="false" size="small">
-          <a-button type="primary" class="add-rack-btn" @click="openRackModal('add')">
-            <PlusOutlined /> {{ t('rackDiagram.addRack') }}
-          </a-button>
           <a-button type="primary" @click="saveRackData" :loading="saving" :disabled="!isDirty">
             <SaveOutlined /> {{ t('rackDiagram.save') }}
           </a-button>
-          <a-button @click="exportToJson" :title="t('rackDiagram.backupJson')">
-            <FileTextOutlined /> {{ t('rackDiagram.backup') }}
-          </a-button>
-          <a-button @click="triggerImport" :title="t('rackDiagram.restoreJson')">
-            <UploadOutlined /> {{ t('rackDiagram.restore') }}
-          </a-button>
-          <a-button @click="exportToImage" :title="t('rackDiagram.capturePng')">
-            <CameraOutlined /> {{ t('rackDiagram.capture') }}
-          </a-button>
+          <a-dropdown
+            :trigger="['click']"
+            placement="bottomRight"
+            overlayClassName="autogen-action-dropdown"
+            class="autogen-action-dropdown__trigger rack-toolbar-action-dropdown">
+            <template #overlay>
+              <div class="autogen-action-dropdown__content rack-toolbar-action-dropdown__content">
+                <div class="row-action-button row-action-button--dataview rack-toolbar-action-list">
+                  <a-tooltip arrowPointAtCenter placement="bottomRight" :title="t('rackDiagram.addRack')">
+                    <a-button class="action-button-item action-button-item--dataview" type="text" @click="openRackModal('add')">
+                      <PlusOutlined class="action-button-item__icon" />
+                      <span class="action-button-item__label">{{ t('rackDiagram.addRack') }}</span>
+                    </a-button>
+                  </a-tooltip>
+                  <div class="rack-toolbar-action-divider"></div>
+                  <a-tooltip arrowPointAtCenter placement="bottomRight" :title="t('rackDiagram.backup')">
+                    <a-button class="action-button-item action-button-item--dataview" type="text" @click="exportToJson">
+                      <FileTextOutlined class="action-button-item__icon" />
+                      <span class="action-button-item__label">{{ t('rackDiagram.backup') }}</span>
+                    </a-button>
+                  </a-tooltip>
+                  <a-tooltip arrowPointAtCenter placement="bottomRight" :title="t('rackDiagram.restore')">
+                    <a-button class="action-button-item action-button-item--dataview" type="text" @click="triggerImport">
+                      <UploadOutlined class="action-button-item__icon" />
+                      <span class="action-button-item__label">{{ t('rackDiagram.restore') }}</span>
+                    </a-button>
+                  </a-tooltip>
+                  <a-tooltip arrowPointAtCenter placement="bottomRight" :title="t('rackDiagram.capture')">
+                    <a-button class="action-button-item action-button-item--dataview" type="text" @click="exportToImage">
+                      <CameraOutlined class="action-button-item__icon" />
+                      <span class="action-button-item__label">{{ t('rackDiagram.capture') }}</span>
+                    </a-button>
+                  </a-tooltip>
+                </div>
+              </div>
+            </template>
+            <a-button type="primary" class="autogen-action-dropdown__button">
+              <template #icon><DownOutlined /></template>
+              {{ t('label.actions') }}
+            </a-button>
+          </a-dropdown>
         </a-space>
       </div>
 
-      <div v-if="!showRackList" class="toolbar-right" style="display: flex; align-items: center; margin-left: 12px;">
-        <span class="zoom-label" style="margin-right: 8px;">{{ t('rackDiagram.zoom') }}:</span>
+      <div v-if="!showRackList" class="toolbar-zoom">
+        <span class="zoom-label">{{ t('rackDiagram.zoom') }}:</span>
 
         <a-input-number
           :value="zoomPercentUi"
@@ -47,10 +76,10 @@
           :formatter="value => `${value}%`"
           :parser="value => value.replace('%', '')"
           size="small"
-          style="width: 70px; text-align: center; margin-right: 12px; flex-shrink: 0;"
+          class="zoom-input"
         />
 
-        <div style="width: 120px; flex-shrink: 0; padding-top: 4px;">
+        <div class="zoom-slider-wrap">
           <a-slider
             :value="zoomPercentUi"
             @change="onZoomSliderChange"
@@ -65,7 +94,55 @@
     <a-spin :spinning="loading || saving">
       <div v-if="showRackList" class="rack-list-view">
         <a-empty v-if="!parsedRacks.length" :description="t('rackDiagram.emptyRack')" style="margin-top: 50px;" />
-        <div v-else class="rack-list-grid">
+        <template v-else>
+          <a-card class="rack-list-summary-card" :bordered="false">
+            <div class="rack-list-summary-metrics">
+              <div class="rack-list-summary-title">{{ t('rackDiagram.rackStatus') }}</div>
+              <div class="rack-list-summary-metric">
+                <span class="rack-list-summary-icon rack-list-summary-rack-icon"><RackListCardIcon /></span>
+                <span class="rack-list-summary-text">
+                  <span class="rack-list-summary-label">{{ t('rackDiagram.totalRackCount') }}</span>
+                  <span class="rack-list-summary-value">{{ rackAggregate.totalRacks }}</span>
+                </span>
+              </div>
+              <div class="rack-list-summary-metric">
+                <span class="rack-list-summary-icon"><AppstoreOutlined /></span>
+                <span class="rack-list-summary-text">
+                  <span class="rack-list-summary-label">{{ t('rackDiagram.totalDeviceCount') }}</span>
+                  <span class="rack-list-summary-value">{{ rackAggregate.totalDevices }}</span>
+                </span>
+              </div>
+              <div class="rack-list-summary-metric">
+                <span class="rack-list-summary-icon"><PieChartOutlined /></span>
+                <span class="rack-list-summary-text">
+                  <span class="rack-list-summary-label">{{ t('rackDiagram.averageUsage') }}</span>
+                  <span class="rack-list-summary-value">{{ rackAggregate.averageUsage }}%</span>
+                </span>
+                <a-progress
+                  class="rack-list-summary-progress"
+                  :percent="rackAggregate.averageUsage"
+                  :show-info="false"
+                  size="small"
+                  :stroke-width="6"
+                />
+              </div>
+              <div class="rack-list-summary-metric">
+                <span class="rack-list-summary-icon"><DatabaseOutlined /></span>
+                <span class="rack-list-summary-text">
+                  <span class="rack-list-summary-label">{{ t('rackDiagram.totalUsedU') }}</span>
+                  <span class="rack-list-summary-value">{{ rackAggregate.totalUsedU }}U / {{ rackAggregate.totalHeight }}U</span>
+                </span>
+              </div>
+              <div class="rack-list-summary-metric">
+                <span class="rack-list-summary-icon"><InboxOutlined /></span>
+                <span class="rack-list-summary-text">
+                  <span class="rack-list-summary-label">{{ t('rackDiagram.totalFreeU') }}</span>
+                  <span class="rack-list-summary-value">{{ rackAggregate.totalFreeU }}U</span>
+                </span>
+              </div>
+            </div>
+          </a-card>
+          <div class="rack-list-grid">
           <a-card
             v-for="(rack, idx) in parsedRacks"
             :key="`rack-list-${idx}`"
@@ -96,7 +173,7 @@
                     </a-menu-item>
                     <a-menu-divider />
                     <a-menu-item danger>
-                      <a-popconfirm :title="t('rackDiagram.deleteConfirm')" @confirm="deleteRack(idx)">
+                      <a-popconfirm :title="t('rackDiagram.deleteConfirm')" :ok-text="t('label.ok')" :cancel-text="t('label.cancel')" @confirm="deleteRack(idx)">
                         <span @click.stop><DeleteOutlined /> {{ t('rackDiagram.delete') }}</span>
                       </a-popconfirm>
                     </a-menu-item>
@@ -112,37 +189,54 @@
                 <RackListCardIcon />
               </span>
               <div class="rack-list-card-content">
-                <a-tooltip :title="getOverflowTitle(`list-${idx}`, rack.name)">
-                  <div
-                    class="rack-list-card-title"
-                    :ref="setOverflowTitleRef(`list-${idx}`)"
-                    @mouseenter="updateOverflowTitle(`list-${idx}`)"
-                  >{{ rack.name }}</div>
-                </a-tooltip>
-                <div class="rack-list-card-meta">{{ t('label.created') }} {{ getRackCreatedDate(rack) }}</div>
-                <div class="rack-list-card-meta rack-list-card-meta-location-row">
-                  <a-tooltip :title="`${t('rackDiagram.rackLocation')} ${getRackLocation(rack)}`">
-                    <span class="rack-list-card-location">{{ t('rackDiagram.rackLocation') }} {{ getRackLocation(rack) }}</span>
+                <div class="rack-list-card-title-row">
+                  <a-tooltip :title="getOverflowTitle(`list-${idx}`, rack.name)">
+                    <div
+                      class="rack-list-card-title"
+                      :ref="setOverflowTitleRef(`list-${idx}`)"
+                      @mouseenter="updateOverflowTitle(`list-${idx}`)"
+                    >{{ rack.name }}</div>
                   </a-tooltip>
+                  <span class="rack-list-card-status"><span class="rack-list-card-status-dot"></span>{{ t('state.ok') }}</span>
                 </div>
                 <div class="rack-list-card-usage">{{ t('rackDiagram.usage') }} {{ getRackUsagePercent(rack) }}%</div>
-                <a-progress
-                  class="rack-list-progress"
-                  :percent="getRackUsagePercent(rack)"
-                  :show-info="false"
-                  size="small"
-                  :stroke-width="6"
-                />
-                <div class="rack-list-card-usage-detail">
-                  {{ getRackUsedU(rack) }}U {{ t('rackDiagram.used') }} / {{ rack.totalHeight }}U {{ t('rackDiagram.total') }}
+                <div class="rack-list-card-progress-row">
+                  <a-progress
+                    class="rack-list-progress"
+                    :percent="getRackUsagePercent(rack)"
+                    :show-info="false"
+                    size="small"
+                    :stroke-width="7"
+                  />
+                  <div class="rack-list-card-usage-detail">
+                    {{ getRackUsedU(rack) }}U / {{ rack.totalHeight }}U
+                  </div>
+                </div>
+                <div class="rack-list-card-stats">
+                  <div class="rack-list-card-stat">
+                    <span class="rack-list-card-stat-label">{{ t('rackDiagram.freeSpace') }}</span>
+                    <strong>{{ getRackFreeU(rack) }}U</strong>
+                  </div>
+                  <div class="rack-list-card-stat">
+                    <span class="rack-list-card-stat-label">{{ t('rackDiagram.deviceCount') }}</span>
+                    <strong>{{ getRackDeviceCount(rack) }}{{ t('rackDiagram.countSuffix') }}</strong>
+                  </div>
                 </div>
-                <div class="rack-list-card-extra">
-                  {{ t('rackDiagram.free') }} {{ getRackFreeU(rack) }}U · {{ t('rackDiagram.deviceCount') }} {{ getRackDeviceCount(rack) }}{{ t('rackDiagram.countSuffix') }}
+                <div class="rack-list-card-footer">
+                  <span><CalendarOutlined /> {{ t('label.created') }} {{ getRackCreatedDate(rack) }}</span>
+                  <a-tooltip :title="`${t('rackDiagram.rackLocation')} ${getRackLocation(rack)}`">
+                    <span class="rack-list-card-location"><EnvironmentOutlined /> {{ t('rackDiagram.rackLocation') }} {{ getRackLocation(rack) }}</span>
+                  </a-tooltip>
                 </div>
               </div>
             </div>
           </a-card>
+          <button type="button" class="rack-list-add-card" @click="openRackModal('add')">
+            <span class="rack-list-add-icon"><PlusOutlined /></span>
+            <span>{{ t('rackDiagram.addRack') }}</span>
+          </button>
         </div>
+        </template>
       </div>
       <div v-else class="rack-canvas">
         <div class="rack-detail-layout" ref="rackDetailLayoutRef">
@@ -191,7 +285,7 @@
                           <template #icon><CopyOutlined /></template>
                         </a-button>
                       </a-tooltip>
-                      <a-popconfirm :title="t('rackDiagram.deleteConfirm')" @confirm="deleteRack(rIndex)">
+                      <a-popconfirm :title="t('rackDiagram.deleteConfirm')" :ok-text="t('label.ok')" :cancel-text="t('label.cancel')" @confirm="deleteRack(rIndex)">
                         <a-tooltip :title="t('rackDiagram.delete')">
                           <a-button class="rack-header-action-btn rack-header-action-danger">
                             <template #icon><DeleteOutlined /></template>
@@ -229,6 +323,7 @@
                     v-for="u in rack.totalHeight"
                     :key="u"
                     class="ruler-number"
+                    :class="{ 'ruler-number-selected': isSelectedRulerUnit(rack, rIndex, u) }"
                   >
                     {{ rack.totalHeight - u + 1 }}
                   </div>
@@ -239,6 +334,7 @@
                     v-for="(item, iIndex) in rack.items"
                     :key="iIndex"
                     class="rack-item"
+                    :class="{ 'rack-item-selected': isSelectedItem(rIndex, iIndex), 'rack-item-hoverable': item.type !== 'gap' }"
                     @dragover.prevent
                     :data-item-type="item.type"
                     :style="{
@@ -254,7 +350,7 @@
                     <div
                       v-else
                       class="device-content"
-                      :class="`device-${item.type}`"
+                      :class="[`device-${item.type}`, { 'device-content-selected': isSelectedItem(rIndex, iIndex) }]"
                       draggable="true"
                       @dragstart="onDragStart(rIndex, iIndex)"
                       @click="selectDevice(rIndex, iIndex)"
@@ -299,7 +395,7 @@
                           </a-button>
                         </a-tooltip>
 
-                        <a-tooltip :title="t('rackDiagram.settings')" :mouseEnterDelay="0.1">
+                        <a-tooltip :title="t('rackDiagram.deviceConfig')" :mouseEnterDelay="0.1">
                           <a-button size="small" type="text" @click.stop="openDeviceModal(rIndex, iIndex)">
                             <SettingOutlined />
                           </a-button>
@@ -325,7 +421,7 @@
                           </template>
                         </a-dropdown>
 
-                        <a-popconfirm :title="t('rackDiagram.deleteConfirm')" @confirm="deleteItem(rIndex, iIndex)" placement="topRight">
+                        <a-popconfirm :title="t('rackDiagram.deleteConfirm')" :ok-text="t('label.ok')" :cancel-text="t('label.cancel')" @confirm="deleteItem(rIndex, iIndex)" placement="topRight">
                           <a-tooltip :title="t('rackDiagram.delete')" :mouseEnterDelay="0.1">
                             <a-button size="small" type="text" danger @click.stop>
                               <DeleteOutlined />
@@ -364,36 +460,300 @@
                 <CloseOutlined />
               </a-button>
             </template>
-            <a-descriptions :column="1" size="small" bordered class="device-info-desc">
-              <a-descriptions-item :label="t('rackDiagram.deviceName')">{{ selectedDevice.label || '-' }}</a-descriptions-item>
-              <a-descriptions-item :label="t('rackDiagram.deviceType')">{{ selectedDevice.type || '-' }}</a-descriptions-item>
-              <a-descriptions-item :label="t('rackDiagram.height')">{{ selectedDevice.height }}U</a-descriptions-item>
-              <a-descriptions-item :label="t('rackDiagram.deviceMemo')">
-                <div v-if="selectedDeviceMemoPlain.length || selectedDeviceMemoLinked.length" class="device-memo-wrap">
-                  <div v-if="selectedDeviceMemoPlain.length" class="device-memo-plain">{{ selectedDeviceMemoPlain.join('\n') }}</div>
-                  <div v-if="selectedDeviceMemoLinked.length" class="device-memo-linked">
-                    <div class="device-memo-linked-list">
-                      <div v-for="(line, idx) in selectedDeviceMemoLinked" :key="`memo-linked-${idx}`">{{ line }}</div>
+            <div class="device-summary-header">
+              <div
+                class="device-summary-icon"
+                :style="{ color: getIconColor(getDevicePanelType(sidePanelDevice)) }"
+                v-html="renderBadgeIcon(getDevicePanelType(sidePanelDevice))"
+              ></div>
+              <div class="device-summary-main">
+                <div class="device-summary-title-row">
+                  <span class="device-summary-title">{{ selectedDeviceDraft.label || '-' }}</span>
+                  <span class="device-summary-badge">{{ selectedDeviceDraft.height }}U</span>
+                </div>
+                <div class="device-summary-subtitle">
+                  <span>{{ selectedDeviceTypeLabel }}</span>
+                  <span v-if="selectedDeviceIp">· {{ t('label.ip') }} {{ selectedDeviceIp }}</span>
+                  <span v-if="selectedDeviceStatusLabel">·</span>
+                  <span v-if="selectedDeviceStatusLabel" class="device-status-inline">
+                    <span class="device-status-dot"></span>{{ selectedDeviceStatusLabel }}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <a-tabs v-model:activeKey="deviceInfoActiveTab" size="small" class="device-info-tabs">
+              <a-tab-pane key="summary" :tab="t('rackDiagram.tabSummary')">
+                <div class="device-info-section">
+                  <div class="device-info-section-heading">
+                    <div class="device-info-section-title">{{ t('rackDiagram.sectionBasicInfo') }}</div>
+                    <a-button size="small" type="text" class="device-section-edit-btn" @click="activateInlineField('basic')">
+                      <EditOutlined />
+                    </a-button>
+                  </div>
+                  <div class="device-inline-form">
+                    <div class="device-inline-row">
+                      <label>{{ t('rackDiagram.deviceName') }}</label>
+                      <div class="device-readonly-value">
+                        <span v-if="activeInlineField !== 'basic'">{{ selectedDeviceDraft.label || '-' }}</span>
+                        <a-input
+                          v-else
+                          v-model:value="selectedDeviceDraft.label"
+                          size="small"
+                          :maxlength="60"
+                          @pressEnter="finishInlineEdit"
+                        />
+                      </div>
+                    </div>
+                    <div class="device-inline-row">
+                      <label>{{ t('rackDiagram.height') }}</label>
+                      <div class="device-readonly-value">
+                        <span v-if="activeInlineField !== 'basic'">{{ selectedDeviceDraft.height }}U</span>
+                        <a-input-number
+                          v-else
+                          v-model:value="selectedDeviceDraft.height"
+                          :min="1"
+                          :max="sidePanelMaxAllowedHeight"
+                          :precision="0"
+                          size="small"
+                          style="width: 100%"
+                          @pressEnter="finishInlineEdit"
+                        />
+                      </div>
+                    </div>
+                    <div class="device-inline-row">
+                      <label>{{ t('rackDiagram.position') }}</label>
+                      <div class="device-readonly-value">
+                        <span v-if="activeInlineField !== 'basic'">{{ draftPositionLabel }}</span>
+                        <a-input-number
+                          v-else
+                          v-model:value="selectedDeviceDraft.startU"
+                          :min="1"
+                          :max="selectedRackTotalHeight"
+                          :precision="0"
+                          size="small"
+                          style="width: 100%"
+                          @pressEnter="finishInlineEdit"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="device-info-section">
+                  <div class="device-info-section-heading">
+                    <div class="device-info-section-title">{{ t('rackDiagram.hardwareInfo') }}</div>
+                    <a-button size="small" type="text" class="device-section-edit-btn" @click="activateInlineField('hardware')">
+                      <EditOutlined />
+                    </a-button>
+                  </div>
+                  <div class="device-inline-form">
+                    <div v-for="field in hardwareInfoFields" :key="field.key" class="device-inline-row">
+                      <label>{{ t(field.labelKey) }}</label>
+                      <div class="device-readonly-value">
+                        <span v-if="activeInlineField !== 'hardware'">{{ selectedDeviceDraft.hardwareInfo[field.key] || '-' }}</span>
+                        <a-auto-complete
+                          v-else-if="field.key === 'vendor'"
+                          v-model:value="selectedDeviceDraft.hardwareInfo.vendor"
+                          :options="hardwareVendorOptions"
+                          :filter-option="filterHardwareVendorOption"
+                          :placeholder="t('rackDiagram.vendorPlaceholder')"
+                          size="small"
+                          style="width: 100%"
+                          @select="markInlineDraftChanged"
+                          @change="markInlineDraftChanged"
+                          @pressEnter="finishInlineEdit"
+                        />
+                        <a-date-picker
+                          v-else-if="field.type === 'date'"
+                          v-model:value="selectedDeviceDraft.hardwareInfo[field.key]"
+                          value-format="YYYY-MM-DD"
+                          size="small"
+                          style="width: 100%"
+                          @change="markInlineDraftChanged"
+                        />
+                        <a-input
+                          v-else
+                          v-model:value="selectedDeviceDraft.hardwareInfo[field.key]"
+                          :maxlength="128"
+                          size="small"
+                          @pressEnter="finishInlineEdit"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="device-info-section">
+                  <div class="device-info-section-heading">
+                    <div class="device-info-section-title">{{ t('rackDiagram.deviceSpecs') }}</div>
+                    <a-button size="small" type="text" class="device-section-edit-btn" @click="activateInlineField('specs')">
+                      <EditOutlined />
+                    </a-button>
+                  </div>
+                  <div class="device-memo-edit-block" @click.stop @mousedown.stop>
+                    <div
+                      class="device-memo-table"
+                      :class="{ 'device-memo-table-read': activeInlineField !== 'specs', 'device-memo-table-edit': activeInlineField === 'specs' }"
+                    >
+                      <div class="device-memo-table-head">
+                        <div>{{ t('rackDiagram.memoKey') }}</div>
+                        <div>{{ t('rackDiagram.memoValue') }}</div>
+                        <div v-if="activeInlineField === 'specs'">{{ t('rackDiagram.quickLinkAction') }}</div>
+                      </div>
+                      <div v-for="(row, idx) in visibleDeviceSpecRows" :key="row.id" class="device-memo-table-row">
+                        <template v-if="activeInlineField === 'specs'">
+                          <a-auto-complete
+                            v-model:value="row.key"
+                            :options="deviceSpecKeyOptions"
+                            :filter-option="filterDeviceSpecKeyOption"
+                            size="small"
+                            :placeholder="t('rackDiagram.deviceSpecKeyPlaceholder')"
+                            style="width: 100%"
+                            @click.stop
+                            @change="markInlineDraftChanged"
+                            @select="markInlineDraftChanged"
+                            @keydown.enter.stop="finishInlineEdit"
+                          />
+                          <a-input v-model:value="row.value" size="small" :placeholder="t('rackDiagram.deviceSpecValuePlaceholder')" @click.stop @pressEnter="finishInlineEdit" />
+                          <a-button size="small" type="text" danger @click.stop="removeInlineSpecRow(idx)">
+                            <DeleteOutlined />
+                          </a-button>
+                        </template>
+                        <template v-else>
+                          <span class="device-memo-cell-text">{{ row.key || '-' }}</span>
+                          <span class="device-memo-cell-text">{{ row.value || '-' }}</span>
+                        </template>
+                      </div>
+                      <div v-if="!visibleDeviceSpecRows.length" class="device-memo-empty">
+                        <a-empty :description="t('label.no.data')" />
+                      </div>
+                    </div>
+                    <a-button v-if="activeInlineField === 'specs'" size="small" class="device-memo-add-btn" @click.stop="addInlineSpecRow">
+                      <PlusOutlined /> {{ t('rackDiagram.addSpecRow') }}
+                    </a-button>
+                  </div>
+                </div>
+                <div class="device-info-section">
+                  <div class="device-info-section-heading">
+                    <div class="device-info-section-title">{{ t('rackDiagram.deviceMemo') }}</div>
+                    <a-button size="small" type="text" class="device-section-edit-btn" @click="activateInlineField('memo')">
+                      <EditOutlined />
+                    </a-button>
+                  </div>
+                  <div
+                    v-if="activeInlineField !== 'memo'"
+                    class="device-free-memo-read"
+                  >
+                    {{ selectedDeviceDraft.memo || '-' }}
+                  </div>
+                  <a-textarea
+                    v-else
+                    v-model:value="selectedDeviceDraft.memo"
+                    :auto-size="{ minRows: 3, maxRows: 8 }"
+                    :placeholder="t('rackDiagram.deviceMemoPlaceholder')"
+                  />
+                </div>
+              </a-tab-pane>
+              <a-tab-pane key="connections" :tab="t('rackDiagram.tabConnections')">
+                <div v-if="selectedDevice.type === 'server'" class="device-info-section">
+                  <div class="device-info-section-heading">
+                    <div class="device-info-section-title">{{ t('rackDiagram.infraAsset') }}</div>
+                  </div>
+                  <div class="device-info-table device-host-compact-table">
+                    <div class="device-info-table-row">
+                      <div>{{ t('rackDiagram.hostLabel') }}</div>
+                      <div class="device-info-copy-value">
+                        <a-tooltip :title="selectedDeviceLinkedAssetName">
+                          <span>{{ selectedDeviceLinkedAssetName || '-' }}</span>
+                        </a-tooltip>
+                        <a-tooltip :title="t('label.copy.clipboard')">
+                          <a-button size="small" type="text" class="device-linked-asset-copy" @click="copyTextToClipboard(selectedDeviceLinkedAssetName)">
+                            <CopyOutlined />
+                          </a-button>
+                        </a-tooltip>
+                      </div>
+                    </div>
+                    <div class="device-info-table-row">
+                      <div>{{ t('label.ip') }}</div>
+                      <div class="device-info-copy-value">
+                        <span>{{ selectedDeviceLinkedAssetIp || '-' }}</span>
+                        <a-tooltip :title="t('label.copy.clipboard')">
+                          <a-button size="small" type="text" class="device-linked-asset-copy" @click="copyTextToClipboard(selectedDeviceLinkedAssetIp)">
+                            <CopyOutlined />
+                          </a-button>
+                        </a-tooltip>
+                      </div>
+                    </div>
+                    <div v-for="(row, idx) in selectedDeviceHostInfoCompact" :key="`host-compact-${idx}`" class="device-info-table-row">
+                      <div>{{ row.label }}</div>
+                      <div>{{ row.value }}</div>
                     </div>
                   </div>
+                  <div class="device-infra-asset-actions">
+                    <div class="device-infra-asset-action-help">{{ t('rackDiagram.changeInfraAssetInlineHelp') }}</div>
+                    <a-button size="small" class="device-link-asset-change-btn" @click="openAssetLinkModal">
+                      <LinkOutlined /> {{ t('rackDiagram.changeInfraAsset') }}
+                    </a-button>
+                  </div>
                 </div>
-                <span v-else>-</span>
-              </a-descriptions-item>
-              <a-descriptions-item :label="t('rackDiagram.sourceRef')">{{ selectedDeviceSourceRefLabel }}</a-descriptions-item>
-              <a-descriptions-item v-if="selectedDeviceHostInfo.length" :label="t('label.host')">
-                <div class="device-host-info-list">
-                  <div v-for="(row, idx) in selectedDeviceHostInfo" :key="`host-info-${idx}`">
-                    <strong>{{ row.label }}</strong>: {{ row.value }}
+                <div class="device-info-section">
+                  <div class="device-info-section-title">{{ t('rackDiagram.links') }}</div>
+                  <div class="device-link-list">
+                    <template v-if="isHostLinked(sidePanelDevice)">
+                      <div class="device-link-group-title">{{ t('rackDiagram.hostLinks') }}</div>
+                      <a-button size="small" class="device-link-button" @click="goToLinkedHost(sidePanelDevice)">
+                        <span class="device-link-button-main"><LinkOutlined /> <span>{{ t('rackDiagram.hostDetail') }}</span></span>
+                        <ExportOutlined class="device-link-button-arrow" />
+                      </a-button>
+                      <a-button size="small" class="device-link-button" @click="openLinkedHostVmModal(sidePanelDevice)">
+                        <span class="device-link-button-main"><UnorderedListOutlined /> <span>{{ t('rackDiagram.hostVmList') }}</span></span>
+                        <ExportOutlined class="device-link-button-arrow" />
+                      </a-button>
+                      <a-button size="small" class="device-link-button" @click="openLinkedHostOobm(sidePanelDevice)">
+                        <span class="device-link-button-main"><LaptopOutlined /> <span>{{ t('rackDiagram.hostOobmPortal') }}</span></span>
+                        <ExportOutlined class="device-link-button-arrow" />
+                      </a-button>
+                      <a-button size="small" class="device-link-button" @click="openLinkedHostCube(sidePanelDevice)">
+                        <span class="device-link-button-main"><AppstoreOutlined /> <span>{{ t('rackDiagram.hostCubePortal') }}</span></span>
+                        <ExportOutlined class="device-link-button-arrow" />
+                      </a-button>
+                    </template>
+                    <div v-if="selectedDeviceCustomLinks.length" class="device-link-custom-block">
+                      <div class="device-link-group-title" :class="{ 'device-link-group-title-spaced': isHostLinked(sidePanelDevice) }">
+                        {{ t('rackDiagram.customLinks') }}
+                      </div>
+                      <div class="device-link-list-read">
+                        <a-button
+                          v-for="(link, idx) in selectedDeviceCustomLinks"
+                          :key="`side-link-${idx}`"
+                          size="small"
+                          class="device-link-button"
+                          @click.stop="openQuickLink(link)"
+                        >
+                          <span class="device-link-button-main"><LinkOutlined /> <span>{{ link.label || link.url }}</span></span>
+                          <ExportOutlined class="device-link-button-arrow" />
+                        </a-button>
+                      </div>
+                    </div>
+                    <a-empty
+                      v-else-if="!isHostLinked(sidePanelDevice)"
+                      :description="t('rackDiagram.noQuickLinks')"
+                    />
                   </div>
                 </div>
-              </a-descriptions-item>
-            </a-descriptions>
+              </a-tab-pane>
+            </a-tabs>
+
             <div class="device-info-actions">
-              <a-button size="small" @click="openDeviceModal(selectedDeviceRackIndex, selectedDeviceItemIndex)">{{ t('rackDiagram.settings') }}</a-button>
-              <a-popconfirm :title="t('rackDiagram.deleteConfirm')" @confirm="deleteItem(selectedDeviceRackIndex, selectedDeviceItemIndex)">
-                <a-button size="small" danger>{{ t('rackDiagram.delete') }}</a-button>
+              <a-button size="small" @click="openSelectedDeviceModal">
+                <SettingOutlined /> {{ t('rackDiagram.deviceConfig') }}
+              </a-button>
+              <a-popconfirm :title="t('rackDiagram.deleteConfirm')" :ok-text="t('label.ok')" :cancel-text="t('label.cancel')" @confirm="deleteItem(selectedDeviceRackIndex, selectedDeviceItemIndex)">
+                <a-button size="small" danger>
+                  <DeleteOutlined /> {{ t('rackDiagram.deviceDelete') }}
+                </a-button>
               </a-popconfirm>
             </div>
+
           </a-card>
           </div>
         </div>
@@ -404,6 +764,8 @@
     <a-modal
       v-model:visible="rackModalVisible"
       :title="rackModalMode === 'add' ? t('rackDiagram.addRack') : t('rackDiagram.editRack')"
+      :ok-text="t('label.ok')"
+      :cancel-text="t('label.cancel')"
       @ok="submitRackModal"
       @cancel="closeRackModal"
       destroyOnClose
@@ -433,6 +795,8 @@
     <a-modal
       v-model:visible="moveModalVisible"
       :title="t('rackDiagram.moveDeviceTitle')"
+      :ok-text="t('label.ok')"
+      :cancel-text="t('label.cancel')"
       @ok="submitMoveDevice"
       destroyOnClose
     >
@@ -459,11 +823,15 @@
     <a-modal
       v-model:visible="deviceModalVisible"
       :title="t('rackDiagram.deviceConfig')"
+      :ok-text="t('label.ok')"
+      :cancel-text="t('label.cancel')"
       @ok="submitDeviceModal"
       @cancel="closeDeviceModal"
+      :width="624"
       destroyOnClose
     >
-      <a-form layout="vertical">
+      <a-form layout="vertical" class="device-config-form">
+        <a-card size="small" class="device-config-section" :title="t('rackDiagram.sectionBasicInfo')">
         <a-form-item :label="t('rackDiagram.deviceType')">
           <a-select v-model:value="deviceForm.type" style="width: 100%" @change="handleTypeChange">
             <a-select-option value="server">{{ t('rackDiagram.deviceTypeServer') }}</a-select-option>
@@ -525,14 +893,126 @@
         </div>
       </a-form-item>
 
-        <a-form-item :label="t('rackDiagram.deviceMemo')">
+        </a-card>
+
+        <a-card size="small" class="device-config-section" :title="t('rackDiagram.hardwareInfo')">
+        <a-form-item :label="t('rackDiagram.hardwareInfo')" class="device-config-section-form-item">
+          <div class="device-hardware-form">
+            <div class="device-hardware-form-row">
+              <label>{{ t('rackDiagram.vendor') }}</label>
+              <a-auto-complete
+                v-model:value="deviceForm.hardwareInfo.vendor"
+                :options="hardwareVendorOptions"
+                :filter-option="filterHardwareVendorOption"
+                :placeholder="t('rackDiagram.vendorPlaceholder')"
+                style="width: 100%"
+              />
+            </div>
+            <div class="device-hardware-form-row">
+              <label>{{ t('rackDiagram.model') }}</label>
+              <a-input
+                v-model:value="deviceForm.hardwareInfo.model"
+                :maxlength="128"
+                :placeholder="t('rackDiagram.modelPlaceholder')"
+              />
+            </div>
+            <div class="device-hardware-form-row">
+              <label>{{ t('rackDiagram.serial') }}</label>
+              <a-input
+                v-model:value="deviceForm.hardwareInfo.serial"
+                :maxlength="128"
+                :placeholder="t('rackDiagram.serialPlaceholder')"
+              />
+            </div>
+            <div class="device-hardware-form-row">
+              <label>{{ t('rackDiagram.assetNo') }}</label>
+              <a-input
+                v-model:value="deviceForm.hardwareInfo.assetNo"
+                :maxlength="128"
+                :placeholder="t('rackDiagram.assetNoPlaceholder')"
+              />
+            </div>
+            <div class="device-hardware-form-row">
+              <label>{{ t('rackDiagram.purchaseDate') }}</label>
+              <a-date-picker
+                v-model:value="deviceForm.hardwareInfo.purchaseDate"
+                value-format="YYYY-MM-DD"
+                style="width: 100%"
+              />
+            </div>
+            <div class="device-hardware-form-row">
+              <label>{{ t('rackDiagram.maintenanceEndDate') }}</label>
+              <a-date-picker
+                v-model:value="deviceForm.hardwareInfo.maintenanceEndDate"
+                value-format="YYYY-MM-DD"
+                style="width: 100%"
+              />
+            </div>
+          </div>
+        </a-form-item>
+
+        </a-card>
+
+        <a-card size="small" class="device-config-section" :title="t('rackDiagram.deviceSpecs')">
+        <a-form-item :label="t('rackDiagram.deviceSpecs')" class="device-config-section-form-item">
+          <div class="quick-links-editor">
+            <a-table
+              size="small"
+              :pagination="false"
+              :data-source="deviceSpecRows"
+              :columns="deviceSpecColumns"
+              row-key="id"
+            >
+              <template #bodyCell="{ column, record, index }">
+                <template v-if="column.key === 'key'">
+                  <a-auto-complete
+                    v-model:value="record.key"
+                    :options="deviceSpecKeyOptions"
+                    :filter-option="filterDeviceSpecKeyOption"
+                    :placeholder="t('rackDiagram.deviceSpecKeyPlaceholder')"
+                    style="width: 100%"
+                  />
+                </template>
+                <template v-else-if="column.key === 'value'">
+                  <a-input
+                    v-model:value="record.value"
+                    :placeholder="t('rackDiagram.deviceSpecValuePlaceholder')"
+                  />
+                </template>
+                <template v-else-if="column.key === 'action'">
+                  <a-button
+                    size="small"
+                    type="text"
+                    danger
+                    @click="removeDeviceSpecRow(index)"
+                  >
+                    <template #icon><DeleteOutlined /></template>
+                  </a-button>
+                </template>
+              </template>
+            </a-table>
+            <a-button size="small" type="dashed" class="quick-links-add-btn" @click="addDeviceSpecRow">
+              <template #icon><PlusOutlined /></template>
+              {{ t('rackDiagram.addSpecRow') }}
+            </a-button>
+          </div>
+        </a-form-item>
+
+        </a-card>
+
+        <a-card size="small" class="device-config-section" :title="t('rackDiagram.deviceMemo')">
+        <a-form-item :label="t('rackDiagram.deviceMemo')" class="device-config-section-form-item">
           <a-textarea
             v-model:value="deviceForm.memo"
             :rows="3"
             :placeholder="t('rackDiagram.deviceMemoPlaceholder')"
           />
         </a-form-item>
+        </a-card>
+
+        <a-card size="small" class="device-config-section" :title="t('rackDiagram.quickLinks')">
         <a-form-item
+          class="device-config-section-form-item"
           :label="t('rackDiagram.quickLinks')"
           :validateStatus="quickLinksError ? 'error' : ''"
           :help="quickLinksError"
@@ -578,8 +1058,35 @@
             </a-button>
           </div>
         </a-form-item>
+        </a-card>
       </a-form>
     </a-modal>
+    <a-modal
+      v-model:visible="assetLinkModalVisible"
+      :title="t('rackDiagram.changeInfraAsset')"
+      :ok-text="t('label.ok')"
+      :cancel-text="t('label.cancel')"
+      @ok="submitAssetLinkModal"
+      @cancel="closeAssetLinkModal"
+      destroyOnClose
+    >
+      <a-alert
+        :message="t('rackDiagram.changeInfraAssetHelp')"
+        type="info"
+        show-icon
+        style="margin-bottom: 12px;"
+      />
+      <a-select
+        v-model:value="assetLinkDraft"
+        :loading="inventoryLoading"
+        :options="inventoryOptions"
+        :show-search="true"
+        option-filter-prop="label"
+        :placeholder="t('rackDiagram.selectHost')"
+        allow-clear
+        style="width: 100%"
+      />
+    </a-modal>
     <a-modal
       v-model:visible="hostVmModalVisible"
       :title="hostVmModalTitle"
@@ -620,6 +1127,9 @@
               <div class="host-vm-name">{{ vm.displayname || vm.name || vm.id }}</div>
             </a-tooltip>
             <div class="host-vm-meta">{{ vm.state || '-' }} / {{ vm.ostypename || vm.hypervisor || '-' }}</div>
+            <a-tooltip :title="getVmPrimaryIpText(vm)">
+              <div class="host-vm-ip">{{ getVmPrimaryIpText(vm) }}</div>
+            </a-tooltip>
           </div>
         </div>
         </div>
@@ -656,7 +1166,11 @@ import {
   UnorderedListOutlined,
   CalendarOutlined,
   EnvironmentOutlined,
-  CloseOutlined
+  CloseOutlined,
+  PieChartOutlined,
+  DatabaseOutlined,
+  InboxOutlined,
+  DownOutlined
 } from '@ant-design/icons-vue'
 
 // 전역 상태
@@ -664,7 +1178,8 @@ const loading = ref(false)
 const saving = ref(false)
 const zoomLevel = ref(0.65)
 const AUTO_ZOOM_MIN = 0.65
-const AUTO_ZOOM_MAX = 1.0
+const NORMAL_ZOOM_LEVEL = 0.96
+const AUTO_ZOOM_MAX = NORMAL_ZOOM_LEVEL
 const isAutoZoomEnabled = ref(true)
 const rackMainPaneRef = ref(null)
 const rackDetailLayoutRef = ref(null)
@@ -686,13 +1201,13 @@ const RACK_UNIT_HEIGHT = 52
 
 // 슬라이더 및 입력창과 연동할 퍼센트 단위 변수
 const zoomPercent = computed({
-  get: () => Math.round(zoomLevel.value * 100),
+  get: () => Math.round((zoomLevel.value / NORMAL_ZOOM_LEVEL) * 100),
   set: (val) => {
     isAutoZoomEnabled.value = false
     // 최소 40% ~ 최대 150% 범위 제한
     if (val < 40) val = 40
     if (val > 150) val = 150
-    zoomLevel.value = val / 100
+    zoomLevel.value = (val / 100) * NORMAL_ZOOM_LEVEL
   }
 })
 const zoomPercentUi = ref(zoomPercent.value)
@@ -769,33 +1284,385 @@ const selectedDevice = computed(() => {
   return item
 })
 const selectedDeviceHost = ref(null)
-const selectedDeviceMemoPlain = computed(() => {
-  const memo = String(selectedDevice.value?.memo || '')
-  const marker = '[LinkedAsset]'
-  return memo
-    .split('\n')
-    .map(line => line.trim())
-    .filter(line => line && !line.startsWith(marker))
+const deviceInfoActiveTab = ref('summary')
+const activeInlineField = ref('')
+const selectedDeviceDraft = reactive({
+  label: '',
+  height: 1,
+  startU: 1,
+  memo: '',
+  sourceRef: null,
+  customType: '',
+  hardwareInfo: {
+    vendor: '',
+    model: '',
+    serial: '',
+    assetNo: '',
+    purchaseDate: '',
+    maintenanceEndDate: ''
+  },
+  specs: [],
+  quickLinks: []
 })
-const selectedDeviceMemoLinked = computed(() => {
-  const memo = String(selectedDevice.value?.memo || '')
-  const marker = '[LinkedAsset]'
-  return memo
+const selectedDeviceDraftBaseline = ref('')
+const assetLinkModalVisible = ref(false)
+const assetLinkDraft = ref(undefined)
+const structuredMemoRows = ref([])
+const freeMemoText = ref('')
+const deviceSpecRows = ref([])
+const LINKED_ASSET_MARKER = '[LinkedAsset]'
+const stripLinkedAssetMemo = (memo) => String(memo || '')
+  .split('\n')
+  .filter(line => !line.trim().startsWith(LINKED_ASSET_MARKER))
+  .join('\n')
+  .trim()
+
+const makeMemoRow = (key = '', value = '') => ({
+  id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+  key,
+  value
+})
+
+const createEmptyHardwareInfo = () => ({
+  vendor: '',
+  model: '',
+  serial: '',
+  assetNo: '',
+  purchaseDate: '',
+  maintenanceEndDate: ''
+})
+
+const hardwareInfoFields = [
+  { key: 'vendor', labelKey: 'rackDiagram.vendor' },
+  { key: 'model', labelKey: 'rackDiagram.model' },
+  { key: 'serial', labelKey: 'rackDiagram.serial' },
+  { key: 'assetNo', labelKey: 'rackDiagram.assetNo' },
+  { key: 'purchaseDate', labelKey: 'rackDiagram.purchaseDate', type: 'date' },
+  { key: 'maintenanceEndDate', labelKey: 'rackDiagram.maintenanceEndDate', type: 'date' }
+]
+
+const hardwareVendorOptions = [
+  'Dell Technologies',
+  'Dell EMC',
+  'HPE',
+  'Hewlett Packard Enterprise',
+  'Lenovo',
+  'Cisco',
+  'Supermicro',
+  'IBM',
+  'Oracle',
+  'Huawei',
+  'NetApp',
+  'Hitachi Vantara',
+  'Fujitsu',
+  'Inspur',
+  'NEC',
+  'QNAP',
+  'Synology',
+  'APC',
+  'Eaton',
+  'Vertiv'
+].map(value => ({ value }))
+
+const filterHardwareVendorOption = (input, option) => {
+  return String(option?.value || '').toLowerCase().includes(String(input || '').toLowerCase())
+}
+
+const deviceSpecKeyOptionKeys = [
+  // Compute
+  'rackDiagram.specCpuCores',
+  'rackDiagram.specCpuMhz',
+  'rackDiagram.specCpuGhz',
+  'rackDiagram.specCpuSocketCount',
+  'rackDiagram.specGpuCount',
+  'rackDiagram.specGpuMemoryGib',
+  // Memory
+  'rackDiagram.specMemoryMb',
+  'rackDiagram.specMemoryGb',
+  'rackDiagram.specMemoryGib',
+  'rackDiagram.specMemoryTb',
+  'rackDiagram.specMemoryTib',
+  // Capacity / storage
+  'rackDiagram.specDiskGb',
+  'rackDiagram.specDiskGib',
+  'rackDiagram.specDiskTb',
+  'rackDiagram.specDiskTib',
+  'rackDiagram.specStorageGb',
+  'rackDiagram.specStorageGib',
+  'rackDiagram.specStorageTb',
+  'rackDiagram.specStorageTib',
+  'rackDiagram.specCapacityGb',
+  'rackDiagram.specCapacityGib',
+  'rackDiagram.specCapacityTb',
+  'rackDiagram.specCapacityTib',
+  'rackDiagram.specDriveBayCount',
+  // Network
+  'rackDiagram.specNicCount',
+  'rackDiagram.specNetworkPortCount',
+  'rackDiagram.specPortCount',
+  'rackDiagram.specThroughputMbps',
+  'rackDiagram.specThroughputGbps',
+  'rackDiagram.specThroughputTbps',
+  // Power / UPS
+  'rackDiagram.specPowerW',
+  'rackDiagram.specPowerKw',
+  'rackDiagram.specVoltageV',
+  'rackDiagram.specCurrentA',
+  'rackDiagram.specCapacityVa',
+  'rackDiagram.specCapacityKva',
+  'rackDiagram.specBatteryRuntimeMin',
+  'rackDiagram.specBatteryCapacityWh',
+  // Cooling
+  'rackDiagram.specAirflowCfm',
+  'rackDiagram.specFanRpm',
+  'rackDiagram.specFanCount',
+  // System
+  'rackDiagram.specFirmware',
+  'rackDiagram.specOs',
+  'rackDiagram.specHypervisor'
+]
+
+const deviceSpecKeyOptions = computed(() => deviceSpecKeyOptionKeys.map(key => ({ value: t(key) })))
+
+const filterDeviceSpecKeyOption = (input, option) => {
+  return String(option?.value || '').toLowerCase().includes(String(input || '').toLowerCase())
+}
+
+const normalizeHardwareInfo = (hardwareInfo) => {
+  const source = hardwareInfo && typeof hardwareInfo === 'object' ? hardwareInfo : {}
+  return {
+    vendor: String(source.vendor || '').trim(),
+    model: String(source.model || '').trim(),
+    serial: String(source.serial || '').trim(),
+    assetNo: String(source.assetNo || '').trim(),
+    purchaseDate: String(source.purchaseDate || '').trim(),
+    maintenanceEndDate: String(source.maintenanceEndDate || '').trim()
+  }
+}
+
+const assignHardwareInfo = (target, source) => {
+  const normalized = normalizeHardwareInfo(source)
+  Object.keys(createEmptyHardwareInfo()).forEach(key => {
+    target[key] = normalized[key] || ''
+  })
+}
+
+const validateHardwareInfo = (hardwareInfo) => {
+  const normalized = normalizeHardwareInfo(hardwareInfo)
+  const lengthFields = [
+    { key: 'vendor', labelKey: 'rackDiagram.vendor' },
+    { key: 'model', labelKey: 'rackDiagram.model' },
+    { key: 'serial', labelKey: 'rackDiagram.serial' },
+    { key: 'assetNo', labelKey: 'rackDiagram.assetNo' }
+  ]
+  const invalid = lengthFields.find(field => normalized[field.key].length > 128)
+  if (invalid) {
+    message.warning(t('rackDiagram.msg.hardwareFieldMax', { field: t(invalid.labelKey) }))
+    return null
+  }
+  return normalized
+}
+
+const parseDeviceMemo = (memo) => {
+  const rows = []
+  const freeLines = []
+  stripLinkedAssetMemo(memo)
     .split('\n')
     .map(line => line.trim())
-    .filter(line => line.startsWith(marker))
-    .map(line => line.replace(marker, '').trim())
+    .filter(Boolean)
+    .forEach(line => {
+      const eqIndex = line.indexOf('=')
+      const colonIndex = line.indexOf(':')
+      const splitIndex = eqIndex > -1 ? eqIndex : colonIndex
+      if (splitIndex > 0) {
+        rows.push(makeMemoRow(line.slice(0, splitIndex).trim(), line.slice(splitIndex + 1).trim()))
+      } else {
+        freeLines.push(line)
+      }
+    })
+  return { rows, freeText: freeLines.join('\n') }
+}
+
+const normalizeSpecRows = (specs) => {
+  if (!Array.isArray(specs)) return []
+  return specs
+    .map(row => makeMemoRow(String(row?.key || '').trim(), String(row?.value || '').trim()))
+    .filter(row => row.key || row.value)
+}
+
+const getDeviceSpecRows = (device) => {
+  const specs = normalizeSpecRows(device?.specs)
+  if (specs.length) return specs
+  return parseDeviceMemo(device?.memo || '').rows
+}
+
+const getDeviceFreeMemo = (device) => {
+  if (Array.isArray(device?.specs)) return stripLinkedAssetMemo(device?.memo || '')
+  return parseDeviceMemo(device?.memo || '').freeText
+}
+
+const syncSideMemoFields = (device) => {
+  structuredMemoRows.value = getDeviceSpecRows(device)
+  freeMemoText.value = getDeviceFreeMemo(device)
+}
+
+const visibleDeviceSpecRows = computed(() => {
+  if (activeInlineField.value === 'specs') return selectedDeviceDraft.specs
+  return selectedDeviceDraft.specs.filter(row => String(row.key || '').trim() || String(row.value || '').trim())
 })
-const selectedDeviceSourceRefLabel = computed(() => {
-  const sourceRef = String(selectedDevice.value?.sourceRef || '')
-  if (!sourceRef) return '-'
-  if (!sourceRef.startsWith('host:')) return sourceRef
-  const hostId = sourceRef.split(':')[1] || ''
-  const host = selectedDeviceHost.value
-  if (host && String(host.id) === hostId) {
-    return host.name || host.hostname || hostId
+
+const cloneQuickLinksForEdit = (links) => {
+  return (Array.isArray(links) ? links : []).map(link => makeQuickLinkRow(link.label || '', link.url || ''))
+}
+
+const getCurrentDeviceStartU = (rack, iIndex) => {
+  if (!rack || iIndex < 0) return 1
+  const item = rack.items?.[iIndex]
+  if (!item) return 1
+  const aboveHeight = rack.items.slice(0, iIndex).reduce((sum, current) => sum + Number(current.height || 0), 0)
+  const topU = Number(rack.totalHeight || 0) - aboveHeight
+  return Math.max(1, topU - Number(item.height || 0) + 1)
+}
+
+const selectedRackTotalHeight = computed(() => {
+  const rack = parsedRacks.value[selectedDeviceRackIndex.value]
+  return Number(rack?.totalHeight || 1)
+})
+
+const sidePanelMaxAllowedHeight = computed(() => {
+  const rack = parsedRacks.value[selectedDeviceRackIndex.value]
+  const item = rack?.items?.[selectedDeviceItemIndex.value]
+  if (!rack || !item) return 1
+  let physicalMax = Number(item.height || 1)
+  const nextItem = rack.items[selectedDeviceItemIndex.value + 1]
+  if (nextItem?.type === 'gap') physicalMax += Number(nextItem.height || 0)
+  return Math.max(1, physicalMax)
+})
+
+const getSideDraftSnapshot = () => ({
+  label: String(selectedDeviceDraft.label || '').trim(),
+  height: Number(selectedDeviceDraft.height || 1),
+  startU: Number(selectedDeviceDraft.startU || 1),
+  memo: stripLinkedAssetMemo(selectedDeviceDraft.memo),
+  sourceRef: selectedDeviceDraft.sourceRef || null,
+  customType: String(selectedDeviceDraft.customType || '').trim(),
+  hardwareInfo: normalizeHardwareInfo(selectedDeviceDraft.hardwareInfo),
+  specs: getCleanSpecRows(selectedDeviceDraft.specs),
+  quickLinks: cloneQuickLinksForEdit(selectedDeviceDraft.quickLinks)
+    .map(link => ({ label: String(link.label || '').trim(), url: String(link.url || '').trim() }))
+    .filter(link => link.label || link.url)
+})
+
+const syncSelectedDeviceDraft = (device, resetActive = true) => {
+  const rack = parsedRacks.value[selectedDeviceRackIndex.value]
+  selectedDeviceDraft.label = device?.label || ''
+  selectedDeviceDraft.height = Number(device?.height || 1)
+  selectedDeviceDraft.startU = getCurrentDeviceStartU(rack, selectedDeviceItemIndex.value)
+  selectedDeviceDraft.memo = getDeviceFreeMemo(device)
+  selectedDeviceDraft.sourceRef = device?.sourceRef || null
+  selectedDeviceDraft.customType = device?.customType || ''
+  assignHardwareInfo(selectedDeviceDraft.hardwareInfo, device?.hardwareInfo)
+  selectedDeviceDraft.specs = getDeviceSpecRows(device).length ? getDeviceSpecRows(device) : []
+  selectedDeviceDraft.quickLinks = cloneQuickLinksForEdit(getQuickLinks(device))
+  selectedDeviceDraftBaseline.value = JSON.stringify(getSideDraftSnapshot())
+  if (resetActive) activeInlineField.value = ''
+}
+
+const sidePanelDevice = computed(() => ({
+  ...(selectedDevice.value || {}),
+  label: selectedDeviceDraft.label,
+  height: selectedDeviceDraft.height,
+  customType: selectedDeviceDraft.customType,
+  sourceRef: selectedDeviceDraft.sourceRef,
+  hardwareInfo: selectedDeviceDraft.hardwareInfo,
+  specs: selectedDeviceDraft.specs,
+  memo: selectedDeviceDraft.memo,
+  quickLinks: selectedDeviceDraft.quickLinks
+}))
+
+const selectedDeviceCustomLinks = computed(() => {
+  if (selectedDeviceRackIndex.value < 0 || selectedDeviceItemIndex.value < 0) return []
+  const rack = parsedRacks.value[selectedDeviceRackIndex.value]
+  const item = rack?.items?.[selectedDeviceItemIndex.value]
+  const merged = [...getQuickLinks(item), ...getQuickLinks({ quickLinks: selectedDeviceDraft.quickLinks })]
+  const seen = new Set()
+  return merged.filter(link => {
+    const key = `${String(link.label || '').trim()}|${String(link.url || '').trim()}`
+    if (!link.url || seen.has(key)) return false
+    seen.add(key)
+    return true
+  })
+})
+
+const draftPositionLabel = computed(() => {
+  const startU = Number(selectedDeviceDraft.startU || 1)
+  const height = Number(selectedDeviceDraft.height || 1)
+  return height > 1 ? `${startU}-${startU + height - 1}U` : `${startU}U`
+})
+
+const finishInlineEdit = () => {
+  if (!activeInlineField.value) return
+  applyInlineDeviceChangesToRack()
+  activeInlineField.value = ''
+}
+
+const markInlineDraftChanged = () => {
+  // v-model already updates the draft. Keep the editor open until the user leaves the section.
+}
+
+const activateInlineField = (field) => {
+  if (activeInlineField.value === field) {
+    finishInlineEdit()
+    return
   }
-  return hostId || sourceRef
+  if (activeInlineField.value) applyInlineDeviceChangesToRack()
+  activeInlineField.value = field
+  if (field === 'specs' && !selectedDeviceDraft.specs.length) addInlineSpecRow()
+  if (field === 'quickLinks' && !selectedDeviceDraft.quickLinks.length) addInlineQuickLink()
+}
+
+const addInlineSpecRow = () => {
+  selectedDeviceDraft.specs.push(makeMemoRow())
+  applyInlineDeviceChangesToRack()
+}
+
+const removeInlineSpecRow = (idx) => {
+  selectedDeviceDraft.specs.splice(idx, 1)
+  if (!selectedDeviceDraft.specs.length) addInlineSpecRow()
+  applyInlineDeviceChangesToRack()
+}
+
+const addInlineQuickLink = () => {
+  selectedDeviceDraft.quickLinks.push(makeQuickLinkRow())
+  applyInlineDeviceChangesToRack()
+}
+
+const deviceTypeLabelKeys = {
+  server: 'rackDiagram.deviceTypeServer',
+  blade: 'rackDiagram.deviceTypeBlade',
+  switch: 'rackDiagram.deviceTypeSwitch',
+  router: 'rackDiagram.deviceTypeRouter',
+  loadbalancer: 'rackDiagram.deviceTypeLoadBalancer',
+  storage: 'rackDiagram.deviceTypeStorage',
+  nas: 'rackDiagram.deviceTypeNas',
+  firewall: 'rackDiagram.deviceTypeFirewall',
+  monitoring: 'rackDiagram.deviceTypeMonitoring',
+  kvm: 'rackDiagram.deviceTypeKvm',
+  cooling: 'rackDiagram.deviceTypeCooling',
+  patch: 'rackDiagram.deviceTypePatch',
+  pdu: 'rackDiagram.deviceTypePdu',
+  ups: 'rackDiagram.deviceTypeUps',
+  blank: 'rackDiagram.deviceTypeBlank',
+  custom: 'rackDiagram.deviceTypeCustom'
+}
+const selectedDeviceTypeLabel = computed(() => {
+  const type = selectedDevice.value?.type
+  return type ? t(deviceTypeLabelKeys[type] || 'rackDiagram.deviceTypeCustom') : '-'
+})
+const selectedDeviceIp = computed(() => selectedDeviceHost.value?.ipaddress || '')
+const selectedDeviceStatusLabel = computed(() => {
+  const state = selectedDeviceHostInfo.value.find(row => row.label === t('label.state'))?.value
+  return state && state !== '-' ? state : ''
 })
 const selectedDeviceHostInfo = computed(() => {
   const host = selectedDeviceHost.value
@@ -832,6 +1699,86 @@ const selectedDeviceHostInfo = computed(() => {
     { label: t('label.hypervisor'), value: host.hypervisor || '-' }
   ]
 })
+const selectedDeviceHostInfoCompact = computed(() => {
+  const hiddenLabels = new Set([
+    t('label.ip'),
+    t('label.state'),
+    t('label.resourcestate'),
+    t('label.powerstate')
+  ])
+  return selectedDeviceHostInfo.value.filter(row => !hiddenLabels.has(row.label))
+})
+const selectedDeviceLinkedAsset = computed(() => {
+  const sourceRef = selectedDeviceDraft.sourceRef
+  if (!sourceRef) return { name: '-', ip: '', copyText: '' }
+  const selected = inventoryOptions.value.find(o => o.value === sourceRef)
+  if (selected?.meta) {
+    const name = selected.meta.name || selected.label || sourceRef
+    const ip = selected.meta.ip || ''
+    return { name, ip, copyText: ip ? `${name} / ${ip}` : name }
+  }
+  if (String(sourceRef).startsWith('host:')) {
+    const hostId = String(sourceRef).split(':')[1] || ''
+    const host = selectedDeviceHost.value || hostCache.value[hostId]
+    if (host) {
+      const name = host.name || host.hostname || host.id || hostId
+      const ip = host.ipaddress || ''
+      return { name, ip, copyText: ip ? `${name} / ${ip}` : name }
+    }
+  }
+  return { name: sourceRef, ip: '', copyText: sourceRef }
+})
+const selectedDeviceLinkedAssetName = computed(() => selectedDeviceLinkedAsset.value.name)
+const selectedDeviceLinkedAssetIp = computed(() => selectedDeviceLinkedAsset.value.ip)
+
+const copyTextToClipboard = async (text) => {
+  const value = String(text || '').trim()
+  if (!value) return
+  try {
+    await navigator.clipboard.writeText(value)
+    message.success(t('message.success.copy.clipboard'))
+  } catch (e) {
+    const textarea = document.createElement('textarea')
+    textarea.value = value
+    textarea.style.position = 'fixed'
+    textarea.style.opacity = '0'
+    document.body.appendChild(textarea)
+    textarea.select()
+    document.execCommand('copy')
+    document.body.removeChild(textarea)
+    message.success(t('message.success.copy.clipboard'))
+  }
+}
+
+const openAssetLinkModal = () => {
+  assetLinkDraft.value = selectedDeviceDraft.sourceRef || undefined
+  if (!inventoryOptions.value.length) buildInventoryOptions()
+  assetLinkModalVisible.value = true
+}
+
+const closeAssetLinkModal = () => {
+  assetLinkModalVisible.value = false
+}
+
+const submitAssetLinkModal = async () => {
+  selectedDeviceDraft.sourceRef = assetLinkDraft.value || null
+  selectedDeviceHost.value = null
+  if (selectedDeviceDraft.sourceRef && String(selectedDeviceDraft.sourceRef).startsWith('host:')) {
+    const hostId = String(selectedDeviceDraft.sourceRef).split(':')[1] || ''
+    if (hostId) {
+      try {
+        selectedDeviceHost.value = await fetchHostById(hostId)
+      } catch (e) {
+        selectedDeviceHost.value = null
+      }
+    }
+  }
+  closeAssetLinkModal()
+}
+
+const openQuickLink = (link) => {
+  if (link?.url) window.open(link.url, '_blank')
+}
 
 const updateSidePanePosition = () => {
   const layout = rackDetailLayoutRef.value
@@ -877,6 +1824,9 @@ watch(zoomPercent, (val) => {
 watch(selectedDevice, async (device) => {
   nextTick(() => updateSidePanePosition())
   selectedDeviceHost.value = null
+  deviceInfoActiveTab.value = 'summary'
+  syncSelectedDeviceDraft(device)
+  syncSideMemoFields(device)
   const sourceRef = String(device?.sourceRef || '')
   if (!sourceRef.startsWith('host:')) return
   const hostId = sourceRef.split(':')[1] || ''
@@ -968,22 +1918,27 @@ const fetchRackData = () => {
 const saveRackData = () => {
   if (!currentZoneId.value) {
     message.error(t('rackDiagram.msg.noZoneToSave'))
-    return
+    return Promise.resolve(false)
+  }
+  if (selectedDevice.value && activeInlineField.value) {
+    applyInlineDeviceChangesToRack()
   }
 
   saving.value = true
   const jsonContent = JSON.stringify(parsedRacks.value)
 
-  api('updateRackLayout', {
+  return api('updateRackLayout', {
     zoneid: currentZoneId.value,
     name: 'default',
     content: jsonContent
   }).then(json => {
     message.success(t('rackDiagram.msg.rackSaved'))
     isDirty.value = false // 저장 성공 시 변경 상태 뱃지 숨김
+    return true
   }).catch(error => {
     console.error('랙 데이터 저장 실패:', error)
     message.error(t('rackDiagram.msg.rackSaveFailed'))
+    return false
   }).finally(() => {
     saving.value = false
   })
@@ -1299,6 +2254,28 @@ const selectDevice = (rIndex, iIndex) => {
 const clearSelectedDevice = () => {
   selectedDeviceRackIndex.value = -1
   selectedDeviceItemIndex.value = -1
+  activeInlineField.value = ''
+  selectedDeviceDraftBaseline.value = ''
+}
+
+const openSelectedDeviceModal = () => {
+  if (selectedDeviceRackIndex.value < 0 || selectedDeviceItemIndex.value < 0) return
+  if (activeInlineField.value) finishInlineEdit()
+  openDeviceModal(selectedDeviceRackIndex.value, selectedDeviceItemIndex.value)
+}
+
+const isSelectedItem = (rIndex, iIndex) => {
+  return selectedDeviceRackIndex.value === rIndex && selectedDeviceItemIndex.value === iIndex
+}
+
+const isSelectedRulerUnit = (rack, rIndex, rulerIndex) => {
+  if (selectedDeviceRackIndex.value !== rIndex || selectedDeviceItemIndex.value < 0) return false
+  const item = rack?.items?.[selectedDeviceItemIndex.value]
+  if (!item || item.type === 'gap') return false
+  const itemTopIndex = rack.items
+    .slice(0, selectedDeviceItemIndex.value)
+    .reduce((sum, current) => sum + Number(current.height || 0), 0) + 1
+  return rulerIndex >= itemTopIndex && rulerIndex < itemTopIndex + Number(item.height || 0)
 }
 
 const getRackUsedU = (rack) => {
@@ -1314,6 +2291,23 @@ const getRackUsagePercent = (rack) => {
   if (!total) return 0
   return Math.round((getRackUsedU(rack) / total) * 100)
 }
+const rackAggregate = computed(() => {
+  const racks = parsedRacks.value || []
+  const totalRacks = racks.length
+  const totalDevices = racks.reduce((sum, rack) => sum + getRackDeviceCount(rack), 0)
+  const totalUsedU = racks.reduce((sum, rack) => sum + getRackUsedU(rack), 0)
+  const totalHeight = racks.reduce((sum, rack) => sum + Number(rack?.totalHeight || 0), 0)
+  const totalFreeU = Math.max(0, totalHeight - totalUsedU)
+  const averageUsage = totalHeight ? Math.round((totalUsedU / totalHeight) * 100) : 0
+  return {
+    totalRacks,
+    totalDevices,
+    totalUsedU,
+    totalHeight,
+    totalFreeU,
+    averageUsage
+  }
+})
 const formatRackDate = (value) => {
   if (!value) return '-'
   const date = new Date(value)
@@ -1388,7 +2382,8 @@ const deviceForm = reactive({
   height: 1,
   customType: '',
   memo: '',
-  sourceRef: undefined
+  sourceRef: undefined,
+  hardwareInfo: createEmptyHardwareInfo()
 })
 
 const inventoryLoading = ref(false)
@@ -1402,12 +2397,32 @@ const hostVmFallbackList = ref([])
 const dragSource = ref({ rIndex: -1, iIndex: -1 })
 const quickLinksError = ref('')
 const quickLinkRows = ref([])
+const deviceSpecColumns = computed(() => ([
+  { title: t('rackDiagram.memoKey'), key: 'key', dataIndex: 'key', width: '40%' },
+  { title: t('rackDiagram.memoValue'), key: 'value', dataIndex: 'value' },
+  { title: t('rackDiagram.quickLinkAction'), key: 'action', dataIndex: 'action', width: 56 }
+]))
 const quickLinkColumns = computed(() => ([
   { title: t('rackDiagram.quickLinkName'), key: 'label', dataIndex: 'label', width: '35%' },
   { title: t('rackDiagram.quickLinkUrl'), key: 'url', dataIndex: 'url' },
   { title: t('rackDiagram.quickLinkAction'), key: 'action', dataIndex: 'action', width: 56 }
 ]))
 
+const addDeviceSpecRow = () => {
+  deviceSpecRows.value.push(makeMemoRow())
+}
+
+const removeDeviceSpecRow = (index) => {
+  deviceSpecRows.value.splice(index, 1)
+  if (!deviceSpecRows.value.length) deviceSpecRows.value.push(makeMemoRow())
+}
+
+const getCleanSpecRows = (rows) => {
+  return rows
+    .map(row => ({ key: String(row.key || '').trim(), value: String(row.value || '').trim() }))
+    .filter(row => row.key || row.value)
+}
+
 const makeQuickLinkRow = (label = '', url = '') => ({
   key: `${Date.now()}-${Math.random().toString(16).slice(2)}`,
   label,
@@ -1423,7 +2438,7 @@ const removeQuickLinkRow = (index) => {
   if (!quickLinkRows.value.length) quickLinkRows.value.push(makeQuickLinkRow())
 }
 // 샘플 VM 목록
-const ENABLE_VM_FALLBACK_MOCK = true
+const ENABLE_VM_FALLBACK_MOCK = false
 const HOST_ACTIVE_VM_STATES = new Set(['running', 'starting', 'stopping', 'migrating'])
 
 const buildVmMockList = (hostId, hostName = 'sample') => {
@@ -1454,18 +2469,6 @@ const filteredHostVmList = computed(() => {
   return merged.filter(vm => HOST_ACTIVE_VM_STATES.has(String(vm?.state || '').toLowerCase()))
 })
 
-const mergeAssetMemo = (existingMemo, linesToAdd) => {
-  const memo = existingMemo || ''
-  const marker = '[LinkedAsset]'
-  const cleaned = memo
-    .split('\n')
-    .filter(line => !line.startsWith(marker))
-    .join('\n')
-    .trim()
-  const linked = linesToAdd.map(line => `${marker} ${line}`).join('\n')
-  return [cleaned, linked].filter(Boolean).join('\n')
-}
-
 const buildInventoryOptions = async () => {
   if (!currentZoneId.value) return
   inventoryLoading.value = true
@@ -1497,18 +2500,8 @@ const handleSourceChange = (value) => {
   const selected = inventoryOptions.value.find(o => o.value === value)
   if (!selected) return
 
-  if (!deviceForm.label || Object.values(defaultLabelKeys).map(key => t(key)).includes(deviceForm.label)) {
-    deviceForm.label = selected.meta.name
-  }
-
-  const lines = [
-    `Type=${selected.meta.kind}`,
-    `Name=${selected.meta.name}`,
-    `Id=${selected.meta.id}`
-  ]
-  if (selected.meta.ip) lines.push(`IP=${selected.meta.ip}`)
-  deviceForm.memo = mergeAssetMemo(deviceForm.memo, lines)
-}
+  deviceForm.label = selected.meta?.name || selected.label || deviceForm.label
+}
 
 const getLinkedHostId = (item) => {
   if (!item?.sourceRef || typeof item.sourceRef !== 'string') return null
@@ -1628,6 +2621,94 @@ const placeDeviceAtStartU = (rack, gapIndex, startU, device) => {
   return true
 }
 
+const buildInlineDeviceItem = () => {
+  if (!selectedDevice.value) return null
+  const rawLabel = String(selectedDeviceDraft.label || '').trim()
+  const finalLabel = rawLabel || getDefaultLabel(selectedDevice.value.type) || t('rackDiagram.newDevice')
+  const height = Number(selectedDeviceDraft.height || 0)
+
+  if (selectedDevice.value.type !== 'blank' && !finalLabel) {
+    message.warning(t('rackDiagram.msg.enterDeviceName'))
+    return null
+  }
+  if (finalLabel.length > 60) {
+    message.warning(t('rackDiagram.msg.deviceNameMax'))
+    return null
+  }
+  if (!Number.isInteger(height) || height <= 0) {
+    message.warning(t('rackDiagram.msg.deviceHeightInteger'))
+    return null
+  }
+
+  const cleanHardwareInfo = validateHardwareInfo(selectedDeviceDraft.hardwareInfo)
+  if (!cleanHardwareInfo) return null
+
+  const quickLinkParsed = parseQuickLinksRowsWithValidation(selectedDeviceDraft.quickLinks)
+  if (quickLinkParsed.errors.length > 0) {
+    message.warning(quickLinkParsed.errors[0])
+    activeInlineField.value = 'quickLinks'
+    return null
+  }
+
+  return {
+    ...selectedDevice.value,
+    label: finalLabel,
+    height,
+    customType: String(selectedDeviceDraft.customType || '').trim(),
+    memo: stripLinkedAssetMemo(selectedDeviceDraft.memo),
+    hardwareInfo: cleanHardwareInfo,
+    specs: getCleanSpecRows(selectedDeviceDraft.specs),
+    sourceRef: selectedDevice.value.type === 'server' ? (selectedDeviceDraft.sourceRef || null) : null,
+    quickLinks: quickLinkParsed.links
+  }
+}
+
+const applyInlineDeviceChangesToRack = () => {
+  if (!selectedDevice.value || selectedDeviceRackIndex.value < 0 || selectedDeviceItemIndex.value < 0) return
+  const rack = parsedRacks.value[selectedDeviceRackIndex.value]
+  const oldItem = rack?.items?.[selectedDeviceItemIndex.value]
+  if (!rack || !oldItem || oldItem.type === 'gap') return
+
+  const newItem = buildInlineDeviceItem()
+  if (!newItem) return
+
+  const desiredBottomU = Number(selectedDeviceDraft.startU || 1)
+  const desiredStartIndex = Number(rack.totalHeight || 0) - (desiredBottomU + Number(newItem.height || 0) - 1)
+  if (!Number.isInteger(desiredStartIndex) || desiredStartIndex < 0) {
+    message.warning(t('rackDiagram.msg.notEnoughGapBelow'))
+    return
+  }
+
+  const backupItems = JSON.stringify(rack.items)
+  const token = `${Date.now()}-${Math.random().toString(36).slice(2)}`
+  const deviceToPlace = { ...newItem, __inlineToken: token }
+
+  rack.items.splice(selectedDeviceItemIndex.value, 1, { type: 'gap', height: Number(oldItem.height || 0) })
+  compactGaps(rack)
+
+  const best = findBestStartUInRack(rack, Number(deviceToPlace.height || 0), desiredStartIndex)
+  if (!best || best.startU !== desiredStartIndex) {
+    rack.items = JSON.parse(backupItems)
+    message.warning(t('rackDiagram.msg.notEnoughGapBelow'))
+    return
+  }
+
+  const placed = placeDeviceAtStartU(rack, best.index, best.startU, deviceToPlace)
+  if (!placed) {
+    rack.items = JSON.parse(backupItems)
+    message.warning(t('rackDiagram.msg.dropCalcFailed'))
+    return
+  }
+
+  const newIndex = rack.items.findIndex(item => item.__inlineToken === token)
+  if (newIndex > -1) {
+    delete rack.items[newIndex].__inlineToken
+    selectedDeviceItemIndex.value = newIndex
+  }
+  syncSelectedDeviceDraft(rack.items[selectedDeviceItemIndex.value], false)
+  nextTick(() => updateSidePanePosition())
+}
+
 const onDropRackFrame = (targetRIndex, event) => {
   const { rIndex: sourceRIndex, iIndex: sourceIIndex } = dragSource.value
   dragSource.value = { rIndex: -1, iIndex: -1 }
@@ -1727,32 +2808,40 @@ const openLinkedHostVmModal = async (item) => {
     const host = await fetchHostById(hostId)
     hostVmModalTitle.value = `${t('rackDiagram.hostVmList')} - ${host?.name || host?.hostname || hostId}`
     const hostIdStr = String(hostId)
+    const isActiveHostVm = (vm) => {
+      const vmState = String(vm?.state || '').toLowerCase()
+      return HOST_ACTIVE_VM_STATES.has(vmState)
+    }
     const isVmAssignedToHost = (vm) => {
       const vmHostId = String(vm?.hostid || '')
-      const vmState = String(vm?.state || '').toLowerCase()
       // 정책: 현재 host_id가 해당 호스트 + 활성 상태 VM만 표시
-      return vmHostId === hostIdStr && HOST_ACTIVE_VM_STATES.has(vmState)
+      return vmHostId === hostIdStr && isActiveHostVm(vm)
     }
-
-    // 1) hostid 직접 조회
-    const directJson = await api('listVirtualMachines', {
+    const readVmList = (json) => json?.listvirtualmachinesresponse?.virtualmachine || []
+    const hostVmListParams = {
       hostid: hostId,
       listall: true,
-      projectid: '-1',
-      details: 'min',
-      pagesize: 500
-    })
-    let vms = (directJson?.listvirtualmachinesresponse?.virtualmachine || []).filter(isVmAssignedToHost)
+      details: 'group,nics,secgrp,tmpl,servoff,diskoff,iso,volume,affgrp,backoff',
+      isvnf: false,
+      page: 1,
+      pagesize: 500,
+      showIcon: true
+    }
+
+    // 호스트 상세 메뉴의 VM 목록 호출과 동일한 파라미터를 사용한다.
+    const directJson = await api('listVirtualMachines', hostVmListParams)
+    let vms = readVmList(directJson).filter(isActiveHostVm)
 
     // 2) hostid 조회가 비면 전체에서 host 매핑 기준으로 재탐색
     if (!vms.length) {
       const allJson = await api('listVirtualMachines', {
         listall: true,
-        projectid: '-1',
-        details: 'min',
+        details: hostVmListParams.details,
+        isvnf: false,
+        page: 1,
         pagesize: 500
       })
-      const allVms = allJson?.listvirtualmachinesresponse?.virtualmachine || []
+      const allVms = readVmList(allJson)
       vms = allVms.filter(isVmAssignedToHost)
     }
 
@@ -1794,6 +2883,36 @@ const isRunningVm = (vm) => {
   return String(vm?.state || '').toLowerCase() === 'running'
 }
 
+const collectVmIpAddresses = (vm) => {
+  const nics = Array.isArray(vm?.nic) ? vm.nic : []
+  const ips = []
+  const pushIp = (ip) => {
+    const value = String(ip || '').trim()
+    if (value && !ips.includes(value)) ips.push(value)
+  }
+
+  const defaultNic = nics.find(nic => nic?.isdefault === true || String(nic?.isdefault).toLowerCase() === 'true')
+  pushIp(defaultNic?.ipaddress)
+
+  const guestNic = nics.find(nic => String(nic?.type || '').toLowerCase() === 'guest' && nic?.ipaddress)
+  pushIp(guestNic?.ipaddress)
+
+  nics.forEach(nic => {
+    pushIp(nic?.ipaddress)
+    const secondaryIps = Array.isArray(nic?.secondaryip) ? nic.secondaryip : []
+    secondaryIps.forEach(ip => pushIp(ip?.ipaddress || ip?.ip))
+  })
+
+  return ips
+}
+
+const getVmPrimaryIpText = (vm) => {
+  const ips = collectVmIpAddresses(vm)
+  if (!ips.length) return '-'
+  const moreCount = ips.length - 1
+  return moreCount > 0 ? `${ips[0]} ${t('rackDiagram.moreIpCount', { count: moreCount })}` : ips[0]
+}
+
 const goToVmDetail = (vm) => {
   const vmId = vm?.id
   if (!vmId) return
@@ -1864,10 +2983,12 @@ const openDeviceModal = (rIndex, iIndex) => {
   if (item.type === 'gap') {
     deviceForm.type = 'server'
     deviceForm.label = ''
-    deviceForm.height = 1
+    deviceForm.height = Math.min(2, maxAllowedHeight.value)
     deviceForm.customType = ''
     deviceForm.memo = ''
     deviceForm.sourceRef = undefined
+    assignHardwareInfo(deviceForm.hardwareInfo, null)
+    deviceSpecRows.value = [makeMemoRow()]
     quickLinkRows.value = [makeQuickLinkRow()]
     quickLinksError.value = ''
   } else {
@@ -1876,8 +2997,10 @@ const openDeviceModal = (rIndex, iIndex) => {
     deviceForm.label = item.label || ''
     deviceForm.height = item.height
     deviceForm.customType = item.customType || ''
-    deviceForm.memo = item.memo || ''
+    deviceForm.memo = getDeviceFreeMemo(item)
     deviceForm.sourceRef = item.sourceRef || undefined
+    assignHardwareInfo(deviceForm.hardwareInfo, item.hardwareInfo)
+    deviceSpecRows.value = getDeviceSpecRows(item).length ? getDeviceSpecRows(item) : [makeMemoRow()]
     quickLinkRows.value = getQuickLinks(item).length
       ? getQuickLinks(item).map(link => makeQuickLinkRow(link.label || '', link.url || ''))
       : [makeQuickLinkRow()]
@@ -1898,6 +3021,9 @@ const handleTypeChange = (newType) => {
   if (isLabelEmpty || isLabelDefault) {
     deviceForm.label = getDefaultLabel(newType) || ''
   }
+  if (newType === 'server') {
+    deviceForm.height = Math.min(2, maxAllowedHeight.value)
+  }
   if (newType !== 'server') {
     deviceForm.sourceRef = undefined
   }
@@ -1938,19 +3064,24 @@ const submitDeviceModal = () => {
     message.warning(t('rackDiagram.msg.deviceHeightInteger'))
     return
   }
+  const cleanHardwareInfo = validateHardwareInfo(deviceForm.hardwareInfo)
+  if (!cleanHardwareInfo) return
   const quickLinkParsed = parseQuickLinksRowsWithValidation(quickLinkRows.value)
   if (quickLinkParsed.errors.length > 0) {
     quickLinksError.value = quickLinkParsed.errors[0]
     return
   }
   quickLinksError.value = ''
+  const cleanSpecs = getCleanSpecRows(deviceSpecRows.value)
 
   const newItem = {
     type: deviceForm.type,
     label: finalLabel,
     height: deviceForm.height,
     customType: finalCustomType,
-    memo: deviceForm.memo,
+    memo: stripLinkedAssetMemo(deviceForm.memo),
+    hardwareInfo: cleanHardwareInfo,
+    specs: cleanSpecs,
     sourceRef: deviceForm.sourceRef || null,
     quickLinks: quickLinkParsed.links
   }
@@ -1997,6 +3128,9 @@ const submitDeviceModal = () => {
       }
     }
   }
+  if (selectedDeviceRackIndex.value === rIndex && selectedDeviceItemIndex.value === iIndex && rack.items[iIndex]?.type !== 'gap') {
+    syncSelectedDeviceDraft(rack.items[iIndex])
+  }
   closeDeviceModal()
 }
 
@@ -2592,17 +3726,21 @@ onBeforeUnmount(() => {
   flex-wrap: wrap !important;
   gap: 12px; /* 줄바꿈 되었을 때 위아래 여백 확보 */
 
+  --rack-toolbar-control-height: 22px;
   background: #ffffff;
   padding: 12px 16px;
   border-radius: 8px;
   border: 1px solid #e8e8e8;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
   margin-bottom: 16px;
 }
 
-.toolbar-left, .toolbar-right {
+.toolbar-left,
+.toolbar-actions,
+.toolbar-zoom {
   display: flex;
   align-items: center;
+  min-height: 32px;
 }
 
 .toolbar-detail {
@@ -2613,235 +3751,1097 @@ onBeforeUnmount(() => {
   min-width: 0;
 }
 
-/* 버튼 사이 구분선 스타일 */
-.toolbar-divider {
-  background-color: #d9d9d9;
-  height: 20px;
-  margin: 0 4px;
+.toolbar-actions {
+  flex: 0 0 auto;
 }
 
-/* 화면 배율 텍스트 */
-.zoom-label {
-  font-weight: bold;
-  color: #595959;
-  margin-right: 8px;
-  font-size: 13px;
+.toolbar-zoom {
+  flex: 0 0 auto;
+  gap: 8px;
+  margin-left: 12px;
 }
 
-/* 랙 캔버스 배경 */
-.rack-canvas {
-  overflow: visible;
-  min-height: 600px;
-  padding: 20px;
-  scrollbar-width: thin;
-  scrollbar-color: #888 #eef0f4;
-  background: radial-gradient(circle, #f0f2f5 0%, #e6e9ed 100%);
+.toolbar-container :deep(.ant-btn),
+.toolbar-container :deep(.ant-input-number) {
+  height: 32px;
 }
 
-.rack-list-view {
-  min-height: 600px;
-  padding: 8px 4px 12px;
+.toolbar-left :deep(.ant-space),
+.toolbar-left :deep(.ant-space-item) {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  height: 20px;
 }
 
-.rack-list-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 12px;
+.toolbar-left :deep(.ant-input-search) {
+  width: 100%;
 }
 
-.rack-list-card {
-  border-radius: 10px;
-  position: relative;
-  min-height: 218px;
-  transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+.toolbar-left :deep(.ant-input-search .ant-input) {
+  height: var(--rack-toolbar-control-height);
+  line-height: calc(var(--rack-toolbar-control-height) - 2px);
+  padding-top: 4px;
+  padding-bottom: 4px;
+  box-sizing: border-box;
 }
 
-.rack-list-card :deep(.ant-card-body) {
-  height: 100%;
+.toolbar-left :deep(.ant-input-search .ant-input-group-addon) {
+  height: var(--rack-toolbar-control-height);
+  padding: 0;
+  line-height: calc(var(--rack-toolbar-control-height) - 2px);
+  vertical-align: top;
+  box-sizing: border-box;
 }
 
-.rack-list-card-actions {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 2;
+.toolbar-left :deep(.ant-input-search-button) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--rack-toolbar-control-height);
+  padding: 0;
+  line-height: calc(var(--rack-toolbar-control-height) - 2px);
+  box-sizing: border-box;
 }
 
-.rack-list-more-btn {
-  color: #64748b !important;
+.rack-diagram-root :deep(.ant-input-search > .ant-input-group > .ant-input-group-addon:last-child .ant-input-search-button:not(.ant-btn-primary)) {
+  height: 32px;
 }
 
-.rack-list-more-btn:hover {
-  color: #334155 !important;
-  background: #f1f5f9 !important;
+.toolbar-container :deep(.ant-input-number-input) {
+  height: var(--rack-toolbar-control-height);
+  padding: 0 8px;
+  line-height: calc(var(--rack-toolbar-control-height) - 2px);
+  box-sizing: border-box;
 }
 
-.rack-list-card-match {
-  position: absolute;
-  top: 10px;
-  right: 10px;
+.rack-diagram-root :deep(.ant-input-number-sm input) {
+  height: var(--rack-toolbar-control-height);
+  padding: 0 8px;
 }
 
-.rack-list-card--matched {
-  border-color: #91caff;
-  box-shadow: 0 0 0 1px rgba(22, 119, 255, 0.18) inset;
+.toolbar-container :deep(.ant-btn) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.rack-list-card--dimmed {
-  opacity: 0.52;
+.autogen-action-dropdown__trigger {
+  display: inline-block;
 }
 
-.add-rack-btn {
-  border-radius: 8px !important;
-  font-weight: 600;
-  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.22);
+.autogen-action-dropdown__button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 }
 
-.rack-list-card-title {
-  font-size: 16px;
-  font-weight: 700;
-  color: #1f2937;
-  line-height: 1.35;
-  min-height: 22px;
-  max-width: 100%;
-  padding-right: 28px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.rack-toolbar-action-dropdown__content {
+  min-width: 156px;
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid #d9d9d9;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  padding: 8px;
 }
 
-.rack-list-card-body {
+.rack-toolbar-action-list {
   display: flex;
-  align-items: flex-start;
-  gap: 0;
-}
-
-.rack-list-card-rack-icon {
-  width: 59px;
-  height: 59px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 59px;
-  margin-right: 12px;
-  color: #1f2937;
+  flex-direction: column;
+  width: auto;
+  max-width: none;
 }
 
-.rack-list-card-rack-icon svg {
+.rack-toolbar-action-list :deep(.ant-tooltip-disabled-compatible-wrapper) {
   width: 100%;
-  height: 100%;
-}
-
-.rack-list-card-content {
-  flex: 1;
-  min-width: 0;
-  padding-right: 34px;
 }
 
-.rack-list-card-meta {
-  margin-top: 4px;
-  font-size: 13px;
-  color: #6b7280;
-  display: block;
-  min-width: 0;
+.rack-toolbar-action-list :deep(.action-button-item--dataview) {
+  display: flex !important;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  margin-left: 0 !important;
+  border: none;
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
-.rack-list-card-meta-location-row {
-  margin-top: 2px;
+.rack-toolbar-action-list :deep(.action-button-item--dataview:not(.ant-btn-disabled):hover),
+.rack-toolbar-action-list :deep(.action-button-item--dataview:not(.ant-btn-disabled):focus) {
+  background-color: #e6f4ff;
+  border-color: transparent;
+  color: #0958d9;
 }
 
-.rack-list-card-location {
-  display: inline-block;
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.rack-toolbar-action-list :deep(.action-button-item__icon) {
+  font-size: 16px;
 }
 
-.rack-list-card-usage {
-  margin-top: 12px;
-  font-size: 15px;
+.rack-toolbar-action-list :deep(.action-button-item__label) {
+  margin-left: 8px;
   font-weight: 500;
-  color: #1f2937;
 }
 
-.rack-list-progress {
-  margin-top: 10px;
+.rack-toolbar-action-list :deep(.action-button-item--dataview:not(.ant-btn-disabled):hover .action-button-item__label),
+.rack-toolbar-action-list :deep(.action-button-item--dataview:not(.ant-btn-disabled):hover .action-button-item__icon),
+.rack-toolbar-action-list :deep(.action-button-item--dataview:not(.ant-btn-disabled):focus .action-button-item__label),
+.rack-toolbar-action-list :deep(.action-button-item--dataview:not(.ant-btn-disabled):focus .action-button-item__icon) {
+  color: #0958d9;
 }
 
-.rack-list-card-usage-detail {
-  margin-top: 8px;
-  font-size: 13px;
-  color: #4b5563;
+.rack-toolbar-action-divider {
+  height: 1px;
+  margin: 6px 0;
+  background: #f0f0f0;
 }
 
-.rack-list-card-extra {
-  margin-top: 12px;
-  font-size: 12px;
-  color: #64748b;
+:global(.autogen-action-dropdown .rack-toolbar-action-dropdown__content) {
+  min-width: 156px;
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid #d9d9d9;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  padding: 8px;
 }
 
-.rack-detail-layout {
+:global(.autogen-action-dropdown .rack-toolbar-action-list) {
   display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  position: relative;
-  min-width: 0;
+  flex-direction: column;
+  width: auto;
+  max-width: none;
 }
 
-.rack-main-pane {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow-x: auto;
-  overflow-y: visible;
-  padding-bottom: 8px;
+:global(.autogen-action-dropdown .rack-toolbar-action-list .ant-tooltip-disabled-compatible-wrapper) {
+  width: 100%;
 }
 
-.rack-side-pane-slot {
-  width: clamp(300px, 24vw, 420px);
-  flex: 0 0 clamp(300px, 24vw, 420px);
-  position: relative;
-  align-self: flex-start;
+:global(.autogen-action-dropdown .rack-toolbar-action-list .action-button-item--dataview) {
+  display: flex !important;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  margin-left: 0 !important;
+  border: none;
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
-.rack-side-pane {
-  width: 100%;
-  position: -webkit-sticky;
-  position: sticky;
-  top: 64px;
-  align-self: flex-start;
-  height: fit-content;
-  max-height: none;
-  overflow: visible;
-  max-width: 100%;
-  z-index: 20;
+:global(.autogen-action-dropdown .rack-toolbar-action-list .action-button-item--dataview:not(.ant-btn-disabled):hover),
+:global(.autogen-action-dropdown .rack-toolbar-action-list .action-button-item--dataview:not(.ant-btn-disabled):focus) {
+  background-color: #e6f4ff;
+  border-color: transparent;
+  color: #0958d9;
 }
 
-.rack-side-pane.is-fixed {
-  position: fixed !important;
-  z-index: 40;
+:global(.autogen-action-dropdown .rack-toolbar-action-list .action-button-item__icon) {
+  font-size: 16px;
 }
 
-.rack-side-pane.is-bottom {
-  position: absolute !important;
-  top: auto !important;
-  left: 0;
-  right: 0;
-  bottom: 0;
+:global(.autogen-action-dropdown .rack-toolbar-action-list .action-button-item__label) {
+  margin-left: 8px;
+  font-weight: 500;
 }
 
-.rack-side-pane-card :deep(.ant-card-head) {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  background: #fff;
+:global(.autogen-action-dropdown .rack-toolbar-action-list .action-button-item--dataview:not(.ant-btn-disabled):hover .action-button-item__label),
+:global(.autogen-action-dropdown .rack-toolbar-action-list .action-button-item--dataview:not(.ant-btn-disabled):hover .action-button-item__icon),
+:global(.autogen-action-dropdown .rack-toolbar-action-list .action-button-item--dataview:not(.ant-btn-disabled):focus .action-button-item__label),
+:global(.autogen-action-dropdown .rack-toolbar-action-list .action-button-item--dataview:not(.ant-btn-disabled):focus .action-button-item__icon) {
+  color: #0958d9;
 }
 
-.device-info-row {
-  margin-bottom: 8px;
-  font-size: 12px;
+:global(.autogen-action-dropdown .rack-toolbar-action-divider) {
+  height: 1px;
+  margin: 6px 0;
+  background: #f0f0f0;
+}
+
+/* 버튼 사이 구분선 스타일 */
+.toolbar-divider {
+  background-color: #d9d9d9;
+  height: 20px;
+  margin: 0 4px;
+}
+
+/* 화면 배율 텍스트 */
+.zoom-label {
+  font-weight: bold;
+  color: #595959;
+  font-size: 13px;
+  line-height: 32px;
+  white-space: nowrap;
+}
+
+.zoom-input {
+  width: 70px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.zoom-slider-wrap {
+  width: 120px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  height: 32px;
+}
+
+.zoom-slider-wrap :deep(.ant-slider) {
+  width: 100%;
+  margin: 0;
+}
+
+/* 랙 캔버스 배경 */
+.rack-canvas {
+  overflow: visible;
+  min-height: 600px;
+  padding: 20px;
+  scrollbar-width: thin;
+  scrollbar-color: #888 #eef0f4;
+  background: radial-gradient(circle, #f0f2f5 0%, #e6e9ed 100%);
+}
+
+.rack-list-view {
+  min-height: 600px;
+  padding: 8px 4px 12px;
+}
+
+.rack-list-summary-card {
+  margin-bottom: 14px;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
+}
+
+.rack-list-summary-card :deep(.ant-card-body) {
+  padding: 12px 22px;
+}
+
+.rack-list-summary-title {
+  color: #111827;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.4;
+  flex: 0 0 auto;
+  padding-right: 30px;
+  margin-right: 16px;
+  border-right: 1px solid #eef2f7;
+}
+
+.rack-list-summary-metrics {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-width: 0;
+  width: 100%;
+}
+
+.rack-list-summary-metric {
+  min-width: 140px;
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 26px;
+  flex: 1 1 150px;
+}
+
+.rack-list-summary-metric:nth-of-type(4),
+.rack-list-summary-metric:nth-of-type(5) {
+  flex-basis: 180px;
+  min-width: 170px;
+}
+
+.rack-list-summary-metric + .rack-list-summary-metric {
+  border-left: 1px solid #eef2f7;
+}
+
+.rack-list-summary-label {
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.25;
+  white-space: nowrap;
+}
+
+.rack-list-summary-value {
+  color: #0f172a;
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 1.25;
+  white-space: nowrap;
+}
+
+.rack-list-summary-text {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.rack-list-summary-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 32px;
+  color: #1677ff;
+  background: rgba(22, 119, 255, 0.09);
+}
+
+.rack-list-summary-icon :deep(.anticon) {
+  font-size: 16px;
+}
+
+.rack-list-summary-rack-icon :deep(.rack-card-icon) {
+  width: 18px;
+  height: 22px;
+}
+
+.rack-list-summary-progress {
+  width: 104px;
+  margin-left: 10px;
+  flex: 0 0 104px;
+}
+
+.rack-list-summary-progress :deep(.ant-progress-inner) {
+  background-color: #e5e7eb;
+}
+
+.rack-list-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.rack-list-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  position: relative;
+  min-height: 250px;
+  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
+  transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.rack-list-card:hover {
+  border-color: #bfdbfe;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
+}
+
+.rack-list-card :deep(.ant-card-body) {
+  height: 100%;
+  padding: 24px 26px;
+}
+
+.rack-list-card-actions {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 2;
+}
+
+.rack-list-more-btn {
+  color: #64748b !important;
+}
+
+.rack-list-more-btn:hover {
+  color: #334155 !important;
+  background: #f1f5f9 !important;
+}
+
+.rack-list-more-btn :deep(.anticon-more svg) {
+  width: 3em;
+  height: 3em;
+}
+
+.rack-list-card-match {
+  position: absolute;
+  top: 10px;
+  right: 44px;
+  z-index: 1;
+  max-width: calc(100% - 72px);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.rack-list-card-match :deep(.ant-tag) {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 0;
+}
+
+.rack-list-card--matched {
+  border-color: #91caff;
+  box-shadow: 0 0 0 1px rgba(22, 119, 255, 0.18) inset;
+}
+
+.rack-list-card--dimmed {
+  opacity: 0.52;
+}
+
+.rack-list-card-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1f2937;
+  line-height: 1.35;
+  min-height: 24px;
+  max-width: min(100%, 280px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rack-list-card-body {
+  display: flex;
+  align-items: flex-start;
+  gap: 0;
+  height: 100%;
+}
+
+.rack-list-card-rack-icon {
+  width: 59px;
+  height: 92px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 59px;
+  margin-right: 12px;
+  color: #1f2937;
+}
+
+.rack-list-card-rack-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.rack-list-card-content {
+  flex: 1;
+  min-width: 0;
+  padding-right: 34px;
+}
+
+.rack-list-card-title-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.rack-list-card-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex: 0 0 auto;
+  color: #334155;
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.rack-list-card-status-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #10b981;
+}
+
+.rack-list-card-usage {
+  margin-top: 24px;
+  color: #475569;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.rack-list-card-progress-row {
+  display: grid;
+  grid-template-columns: minmax(120px, 1fr) auto;
+  align-items: center;
+  gap: 28px;
+  margin-top: 8px;
+}
+
+.rack-list-card-usage-detail {
+  color: #475569;
+  font-size: 15px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.rack-list-progress {
+  min-width: 0;
+  margin: 0;
+}
+
+.rack-list-card-stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0;
+  margin-top: 24px;
+  padding-top: 18px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.rack-list-card-stat {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.rack-list-card-stat + .rack-list-card-stat {
+  padding-left: 24px;
+  border-left: 1px solid #e5e7eb;
+}
+
+.rack-list-card-stat-label {
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.rack-list-card-stat strong {
+  color: #0f172a;
+  font-size: 16px;
+  line-height: 20px;
+}
+
+.rack-list-card-footer {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  margin-top: 20px;
+  padding-top: 14px;
+  border-top: 1px solid #e5e7eb;
+  font-size: 12px;
+  color: #64748b;
+  min-width: 0;
+}
+
+.rack-list-card-footer > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+.rack-list-card-location {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.rack-list-add-card {
+  min-height: 250px;
+  border: 1px dashed #cbd5e1;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.62);
+  color: #0f172a;
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  font-size: 15px;
+  font-weight: 700;
+  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
+}
+
+.rack-list-add-card:hover {
+  border-color: #1677ff;
+  color: #1677ff;
+  background: rgba(22, 119, 255, 0.04);
+}
+
+.rack-list-add-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #1677ff;
+  background: rgba(22, 119, 255, 0.10);
+  font-size: 22px;
+}
+
+.rack-detail-layout {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  position: relative;
+  min-width: 0;
+}
+
+.rack-main-pane {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: visible;
+  padding-bottom: 8px;
+}
+
+.rack-side-pane-slot {
+  width: clamp(300px, 24vw, 420px);
+  flex: 0 0 clamp(300px, 24vw, 420px);
+  position: relative;
+  align-self: flex-start;
+}
+
+.rack-side-pane {
+  width: 100%;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 64px;
+  align-self: flex-start;
+  height: fit-content;
+  max-height: none;
+  overflow: visible;
+  max-width: 100%;
+  z-index: 20;
+}
+
+.rack-side-pane.is-fixed {
+  position: fixed !important;
+  z-index: 40;
+}
+
+.rack-side-pane.is-bottom {
+  position: absolute !important;
+  top: auto !important;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.rack-side-pane-card {
+  border-radius: 8px;
+  border-color: rgba(0,0,0,0.06);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
+  overflow: hidden;
+}
+
+.rack-side-pane-card :deep(.ant-card-head) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+  border-bottom-color: rgba(0, 0, 0, 0.06);
+}
+
+.rack-side-pane-card :deep(.ant-card-body) {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 132px);
+  min-height: 0;
+  overflow: hidden;
+}
+
+.device-summary-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 16px;
+  margin-bottom: 14px;
+  border: 1px solid rgba(22, 119, 255, 0.12);
+  border-radius: 8px;
+  background: linear-gradient(135deg, rgba(22, 119, 255, 0.08), rgba(22, 119, 255, 0.02));
+  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
+}
+
+.device-summary-icon {
+  width: 32px;
+  height: 32px;
+  flex: 0 0 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.device-summary-icon :deep(svg) {
+  width: 100%;
+  height: 100%;
+}
+
+.device-summary-main {
+  min-width: 0;
+  flex: 1;
+}
+
+.device-summary-title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.device-summary-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #111827;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.device-summary-badge {
+  flex: 0 0 auto;
+  padding: 1px 7px;
+  border-radius: 10px;
+  background: #f5f5f5;
+  color: #595959;
+  border: 1px solid #d9d9d9;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.device-summary-subtitle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 4px;
+  color: #374151;
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.device-status-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.device-status-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #22c55e;
+}
+
+.device-info-section {
+  border: 1px solid rgba(0,0,0,0.06);
+  border-radius: 8px;
+  background: #fff;
+  padding: 10px 12px;
+  margin-bottom: 10px;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
+}
+
+.device-info-tabs :deep(.ant-tabs-nav) {
+  flex: 0 0 auto;
+  margin-bottom: 12px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.device-info-tabs {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.device-info-tabs :deep(.ant-tabs-content-holder) {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.device-info-tabs :deep(.ant-tabs-content),
+.device-info-tabs :deep(.ant-tabs-tabpane) {
+  height: 100%;
+  min-height: 0;
+}
+
+.device-info-tabs :deep(.ant-tabs-tabpane) {
+  overflow: auto;
+  padding-right: 2px;
+}
+
+.device-info-tabs :deep(.ant-tabs-tab) {
+  padding: 8px 0;
+}
+
+.device-inline-form {
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid #edf2f7;
+}
+
+.device-inline-row {
+  display: grid;
+  grid-template-columns: 128px minmax(0, 1fr);
+  align-items: center;
+  min-height: 34px;
+  border-bottom: 1px solid #edf2f7;
+}
+
+.device-inline-row > label {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 6px 8px;
+  margin: 0;
+  color: #475569;
+  font-size: 13px;
+  font-weight: 600;
+  background: #f8fafc;
+}
+
+.device-inline-row > div,
+.device-inline-row > .ant-input,
+.device-inline-row > .ant-select {
+  min-width: 0;
+  margin: 6px 8px;
+}
+
+.device-readonly-value {
+  color: #334155;
+  font-size: 13px;
+  word-break: break-word;
+}
+
+.device-inline-clickable {
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.device-inline-clickable:hover {
+  color: #1677ff;
+  background: rgba(22, 119, 255, 0.06);
+}
+
+.device-inline-title-input {
+  max-width: 220px;
+}
+
+.device-info-section-title {
+  margin-bottom: 8px;
+  color: #111827;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.device-info-section-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.device-info-section-heading .device-info-section-title {
+  margin-bottom: 0;
+}
+
+.device-section-edit-btn {
+  color: #64748b !important;
+}
+
+.device-section-edit-btn:hover {
+  color: #1677ff !important;
+  background: rgba(22, 119, 255, 0.06) !important;
+}
+
+.device-link-section-edit-btn {
+  float: right;
+  margin-top: -4px;
+}
+
+.device-info-table {
+  border-top: 1px solid #edf2f7;
+}
+
+.device-host-compact-table {
+  margin-top: 10px;
+}
+
+.device-info-table-row {
+  display: grid;
+  grid-template-columns: 112px minmax(0, 1fr);
+  border-bottom: 1px solid #edf2f7;
+  min-height: 28px;
+}
+
+.device-info-table-row:last-child {
+  border-bottom: 0;
+}
+
+.device-info-table-row > div {
+  padding: 6px 8px;
+  min-width: 0;
+  color: #334155;
+  font-size: 13px;
+  word-break: break-word;
+}
+
+.device-info-table-row > div:first-child {
+  color: #475569;
+  font-weight: 600;
+  background: #f8fafc;
+}
+
+.device-memo-edit-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.device-memo-subtitle {
+  color: #475569;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.device-memo-free-title {
+  margin-top: 4px;
+}
+
+.device-memo-table {
+  border: 1px solid rgba(0,0,0,0.06);
+  border-radius: 8px;
+  overflow: hidden;
+  background: #fff;
+}
+
+.device-memo-table-head,
+.device-memo-table-row {
+  display: grid;
+  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr) 48px;
+  align-items: center;
+}
+
+.device-memo-table-read .device-memo-table-head,
+.device-memo-table-read .device-memo-table-row {
+  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr);
+}
+
+.device-memo-table-head {
+  background: #f8fafc;
+  color: #475569;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.device-memo-table-head > div,
+.device-memo-table-row > * {
+  padding: 6px;
+  border-right: 1px solid rgba(0,0,0,0.06);
+}
+
+.device-memo-table-head > div:last-child,
+.device-memo-table-row > *:last-child {
+  border-right: 0;
+}
+
+.device-memo-table-row {
+  border-top: 1px solid rgba(0,0,0,0.06);
+  min-height: 34px;
+}
+
+.device-memo-table-read .device-memo-table-row:hover {
+  background: #fafcff;
+}
+
+.device-memo-cell-text {
+  min-width: 0;
+  color: #334155;
+  font-size: 13px;
+  line-height: 1.45;
+  word-break: break-word;
+  background: transparent;
+}
+
+.device-memo-row-delete {
+  justify-self: center;
+}
+
+.device-memo-empty {
+  padding: 10px 0;
+}
+
+.device-memo-empty :deep(.ant-empty) {
+  margin: 0;
+}
+
+.device-free-memo-read {
+  min-height: 62px;
+  padding: 8px 10px;
+  border: 1px solid rgba(0,0,0,0.06);
+  border-radius: 8px;
+  background: #fff;
+  color: #334155;
+  font-size: 13px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.device-linked-asset-card {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 9px;
+  border: 1px solid rgba(0,0,0,0.06);
+  border-radius: 8px;
+  background: #fff;
+}
+
+.device-linked-asset-main {
+  min-width: 0;
+  flex: 1;
+}
+
+.device-linked-asset-name {
+  color: #334155;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.45;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.device-linked-asset-ip {
+  margin-top: 2px;
+  color: #64748b;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.device-linked-asset-copy {
+  flex: 0 0 auto;
+}
+
+.device-info-copy-value {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.device-info-copy-value > span,
+.device-info-copy-value :deep(.ant-tooltip-open) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.device-memo-add-btn {
+  align-self: flex-start;
+}
+
+.device-info-row {
+  margin-bottom: 8px;
+  font-size: 12px;
   color: #374151;
   word-break: break-word;
 }
@@ -2859,8 +4859,126 @@ onBeforeUnmount(() => {
 
 .device-info-actions {
   display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  flex: 0 0 auto;
+  position: sticky;
+  bottom: 0;
+  z-index: 3;
+  margin: 12px -12px -12px;
+  padding: 12px;
+  border: 1px solid rgba(0,0,0,0.06);
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 0;
+  border-radius: 8px;
+  background: #f8fafc;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
+}
+
+.device-info-actions-title {
+  flex: 0 0 100%;
+  color: #111827;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.device-link-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.device-link-group-title {
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.device-link-group-title-spaced {
+  margin-top: 4px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(0,0,0,0.06);
+}
+
+.device-link-button {
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between !important;
+  width: 100%;
+  min-height: 30px;
+  height: 30px;
+  padding: 0 10px !important;
+  border-color: rgba(0,0,0,0.06) !important;
+  border-radius: 8px !important;
+  background: transparent !important;
+  color: #334155 !important;
+  box-shadow: none !important;
+}
+
+.device-link-button:hover,
+.device-link-button:focus {
+  border-color: rgba(22,119,255,0.18) !important;
+  background: rgba(22,119,255,0.06) !important;
+  color: #1677ff !important;
+}
+
+.device-link-button-main {
+  display: inline-flex;
+  align-items: center;
   gap: 8px;
+  min-width: 0;
+}
+
+.device-link-button-main > span:last-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.device-link-button-arrow {
+  flex: 0 0 auto;
+  color: #94a3b8;
+  font-size: 12px;
+}
+
+.device-infra-asset-actions {
   margin-top: 12px;
+  padding: 12px 0 4px;
+  border-top: 1px solid rgba(0,0,0,0.06);
+}
+
+.device-infra-asset-action-help {
+  margin-bottom: 8px;
+  color: #94a3b8;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.device-link-asset-change-btn {
+  margin-top: 0;
+}
+
+.device-link-list-read {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.device-inline-link-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.device-inline-link-row {
+  display: grid;
+  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr) 34px;
+  gap: 6px;
+  align-items: center;
 }
 
 .device-info-close-btn {
@@ -2884,17 +5002,6 @@ onBeforeUnmount(() => {
   color: #334155;
 }
 
-.device-memo-linked {
-  background: transparent;
-  border-radius: 6px;
-  padding: 0;
-}
-
-.device-memo-linked-title {
-  display: none;
-}
-
-.device-memo-linked-list,
 .device-host-info-list {
   display: flex;
   flex-direction: column;
@@ -2904,6 +5011,43 @@ onBeforeUnmount(() => {
   color: #334155;
 }
 
+.device-config-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.device-config-section {
+  border-radius: 8px;
+  border-color: rgba(0,0,0,0.06);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
+}
+
+.device-config-section :deep(.ant-card-head) {
+  min-height: 38px;
+  padding: 0 14px;
+  border-bottom-color: rgba(0,0,0,0.06);
+}
+
+.device-config-section :deep(.ant-card-head-title) {
+  padding: 9px 0;
+  color: #111827;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.device-config-section :deep(.ant-card-body) {
+  padding: 14px;
+}
+
+.device-config-section :deep(.ant-form-item:last-child) {
+  margin-bottom: 0;
+}
+
+.device-config-section-form-item :deep(.ant-form-item-label) {
+  display: none;
+}
+
 .quick-links-editor {
   display: flex;
   flex-direction: column;
@@ -2914,6 +5058,25 @@ onBeforeUnmount(() => {
   align-self: flex-start;
 }
 
+.device-hardware-form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.device-hardware-form-row {
+  display: grid;
+  grid-template-columns: 128px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+}
+
+.device-hardware-form-row > label {
+  color: #475569;
+  font-size: 13px;
+  font-weight: 600;
+}
+
 /* 랙 컨테이너 (가로 정렬) */
 .rack-container {
   display: flex;
@@ -3035,7 +5198,7 @@ onBeforeUnmount(() => {
   align-items: center;
   flex-wrap: nowrap;
   gap: 6px;
-  margin-top: 4px;
+  margin-top: 25px;
   color: #6b7280;
   font-size: 14px;
   font-weight: 500;
@@ -3125,6 +5288,14 @@ onBeforeUnmount(() => {
   border-top: 1px dotted rgba(15, 23, 42, 0.12);
 }
 
+.ruler-number-selected {
+  color: #1677ff;
+  background: rgba(22, 119, 255, 0.06);
+  border-left: 1px solid #1677ff;
+  border-top: 1px solid #1677ff;
+  border-bottom: 1px solid #1677ff;
+}
+
 /* 랙 내부 프레임 */
 .rack-frame {
   width: 560px;
@@ -3151,6 +5322,21 @@ onBeforeUnmount(() => {
   margin-bottom: 0;
 }
 
+.rack-item-hoverable:hover {
+  background: rgba(15, 23, 42, 0.025);
+}
+
+.rack-item-selected,
+.rack-item-selected:hover {
+  border: 1px solid #1677ff;
+  background: rgba(22, 119, 255, 0.06);
+  z-index: 3;
+}
+
+.rack-item-selected::after {
+  content: none;
+}
+
 .rack-item::after {
   content: "";
   position: absolute;
@@ -3211,6 +5397,15 @@ onBeforeUnmount(() => {
   box-shadow: none;
 }
 
+.device-content-selected,
+.device-content-selected:hover {
+  background: rgba(22, 119, 255, 0.06) !important;
+}
+
+.device-content-selected .device-name-tag {
+  color: #1677ff;
+}
+
 .device-content::before {
   content: none;
 }
@@ -3418,14 +5613,14 @@ onBeforeUnmount(() => {
 }
 
 .tag-badge {
-  background: #1f2937;
-  color: #ffffff;
-  padding: 2px 6px;
+  background: #f5f5f5;
+  color: #595959;
+  padding: 1px 5px;
   border-radius: 10px;
   flex: 0 0 auto;
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 700;
-  border: 1px solid rgba(255, 255, 255, 0.18);
+  border: 1px solid #d9d9d9;
 }
 
 /* 액션 버튼 (호버 시에만 표시) */
@@ -3533,7 +5728,7 @@ onBeforeUnmount(() => {
   border: 1px solid #d9e2ec;
   border-radius: 10px;
   background: #f9fbff;
-  padding: 10px 12px;
+  padding: 8px 12px;
   cursor: pointer;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
@@ -3560,10 +5755,14 @@ onBeforeUnmount(() => {
   color: #9ca3af;
 }
 
+.host-vm-card-inactive .host-vm-ip {
+  color: #9ca3af;
+}
+
 .host-vm-icon {
   font-size: 22px;
   color: #3b82f6;
-  margin-bottom: 6px;
+  margin-bottom: 4px;
 }
 
 .host-vm-name {
@@ -3575,9 +5774,23 @@ onBeforeUnmount(() => {
 }
 
 .host-vm-meta {
-  margin-top: 4px;
+  margin-top: 2px;
   font-size: 12px;
   color: #6b7280;
+  line-height: 16px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.host-vm-ip {
+  margin-top: 2px;
+  font-size: 12px;
+  line-height: 16px;
+  color: #4b5563;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /* dark mode in this project is attached on body */
@@ -3605,6 +5818,36 @@ onBeforeUnmount(() => {
   border-color: #3a4654;
 }
 
+.rack-diagram-root.is-dark .rack-list-summary-card {
+  background: #1f2732;
+  border-color: #3a4654;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
+}
+
+.rack-diagram-root.is-dark .rack-list-summary-title,
+.rack-diagram-root.is-dark .rack-list-summary-label,
+.rack-diagram-root.is-dark .rack-list-summary-value {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.rack-diagram-root.is-dark .rack-list-summary-desc,
+.rack-diagram-root.is-dark .rack-list-summary-label {
+  color: rgba(255, 255, 255, 0.62);
+}
+
+.rack-diagram-root.is-dark .rack-list-summary-title {
+  border-right-color: #334155;
+}
+
+.rack-diagram-root.is-dark .rack-list-summary-icon {
+  background: rgba(22, 119, 255, 0.16);
+  color: #8cc8ff;
+}
+
+.rack-diagram-root.is-dark .rack-list-summary-metric + .rack-list-summary-metric {
+  border-left-color: #334155;
+}
+
 .rack-diagram-root.is-dark .rack-list-card--matched {
   border-color: #4c93ff;
   box-shadow: 0 0 0 1px rgba(76, 147, 255, 0.32) inset;
@@ -3627,7 +5870,9 @@ onBeforeUnmount(() => {
   color: rgba(255, 255, 255, 0.9);
 }
 
-.rack-diagram-root.is-dark .rack-list-card-meta,
+.rack-diagram-root.is-dark .rack-list-card-status,
+.rack-diagram-root.is-dark .rack-list-card-stat-label,
+.rack-diagram-root.is-dark .rack-list-card-footer,
 .rack-diagram-root.is-dark .rack-list-card-usage-detail,
 .rack-diagram-root.is-dark .rack-list-card-extra {
   color: rgba(255, 255, 255, 0.65);
@@ -3637,6 +5882,33 @@ onBeforeUnmount(() => {
   color: rgba(255, 255, 255, 0.9);
 }
 
+.rack-diagram-root.is-dark .rack-list-card-stat strong {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.rack-diagram-root.is-dark .rack-list-card-stats,
+.rack-diagram-root.is-dark .rack-list-card-footer,
+.rack-diagram-root.is-dark .rack-list-card-stat + .rack-list-card-stat {
+  border-color: #334155;
+}
+
+.rack-diagram-root.is-dark .rack-list-add-card {
+  background: rgba(31, 39, 50, 0.7);
+  border-color: #475569;
+  color: rgba(255, 255, 255, 0.86);
+}
+
+.rack-diagram-root.is-dark .rack-list-add-card:hover {
+  background: rgba(22, 119, 255, 0.10);
+  border-color: #4c93ff;
+  color: #8cc8ff;
+}
+
+.rack-diagram-root.is-dark .rack-list-add-icon {
+  background: rgba(22, 119, 255, 0.16);
+  color: #8cc8ff;
+}
+
 .rack-diagram-root.is-dark .device-info-row {
   color: rgba(255, 255, 255, 0.78);
 }
@@ -3649,6 +5921,60 @@ onBeforeUnmount(() => {
   background: #1f2732;
 }
 
+.rack-diagram-root.is-dark .rack-side-pane-card {
+  background: #1f2732;
+  border-color: #3a4654;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+}
+
+.rack-diagram-root.is-dark .device-summary-header,
+.rack-diagram-root.is-dark .device-info-section,
+.rack-diagram-root.is-dark .device-info-actions,
+.rack-diagram-root.is-dark .device-memo-table,
+.rack-diagram-root.is-dark .device-free-memo-read,
+.rack-diagram-root.is-dark .device-linked-asset-card {
+  background: #202938;
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.rack-diagram-root.is-dark .device-memo-table-head,
+.rack-diagram-root.is-dark .device-inline-row > label,
+.rack-diagram-root.is-dark .device-info-table-row > div:first-child {
+  background: #253144;
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.rack-diagram-root.is-dark .device-memo-cell-text,
+.rack-diagram-root.is-dark .device-free-memo-read,
+.rack-diagram-root.is-dark .device-linked-asset-name,
+.rack-diagram-root.is-dark .device-readonly-value,
+.rack-diagram-root.is-dark .device-info-table-row > div {
+  color: rgba(255, 255, 255, 0.82);
+}
+
+.rack-diagram-root.is-dark .device-linked-asset-ip {
+  color: rgba(255, 255, 255, 0.62);
+}
+
+.rack-diagram-root.is-dark .device-summary-badge,
+.rack-diagram-root.is-dark .tag-badge {
+  background: #2b3544;
+  color: rgba(255, 255, 255, 0.78);
+  border-color: #465366;
+}
+
+.rack-diagram-root.is-dark .device-memo-table-head > div,
+.rack-diagram-root.is-dark .device-memo-table-row > *,
+.rack-diagram-root.is-dark .device-memo-table-row,
+.rack-diagram-root.is-dark .device-inline-form,
+.rack-diagram-root.is-dark .device-inline-row,
+.rack-diagram-root.is-dark .device-info-table,
+.rack-diagram-root.is-dark .device-info-table-row,
+.rack-diagram-root.is-dark .device-info-tabs :deep(.ant-tabs-nav),
+.rack-diagram-root.is-dark .device-link-group-title-spaced {
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
 .rack-diagram-root.is-dark .device-info-close-btn {
   color: rgba(255, 255, 255, 0.7) !important;
 }
@@ -3664,6 +5990,41 @@ onBeforeUnmount(() => {
 }
 
 @media (max-width: 980px) {
+  .rack-list-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .rack-list-summary-metrics {
+    flex-wrap: wrap;
+    align-items: flex-start;
+    row-gap: 8px;
+  }
+
+  .rack-list-summary-title {
+    flex: 1 0 100%;
+    border-right: 0;
+    padding-right: 0;
+    margin-right: 0;
+  }
+
+  .rack-list-summary-metric {
+    padding: 0 14px 0 0;
+  }
+
+  .rack-list-summary-metric + .rack-list-summary-metric {
+    border-left: 0;
+  }
+
+  .rack-list-card-progress-row {
+    grid-template-columns: 1fr;
+    gap: 6px;
+  }
+
+  .rack-list-card-footer {
+    flex-wrap: wrap;
+    gap: 8px 14px;
+  }
+
   .rack-side-pane-slot {
     width: 280px;
     flex: 0 0 280px;
@@ -3683,6 +6044,10 @@ onBeforeUnmount(() => {
   color: rgba(255, 255, 255, 0.65);
 }
 
+.rack-diagram-root.is-dark .host-vm-ip {
+  color: rgba(255, 255, 255, 0.72);
+}
+
 .rack-diagram-root.is-dark .toolbar-container :deep(.ant-input),
 .rack-diagram-root.is-dark .toolbar-container :deep(.ant-input-number),
 .rack-diagram-root.is-dark .toolbar-container :deep(.ant-input-number-input),
diff --git a/ui/src/views/infra/zone/components/RackListCardIcon.vue b/ui/src/views/infra/zone/components/RackListCardIcon.vue
index 5294f30e4d5b..02afff85c0c3 100644
--- a/ui/src/views/infra/zone/components/RackListCardIcon.vue
+++ b/ui/src/views/infra/zone/components/RackListCardIcon.vue
@@ -2,66 +2,110 @@
   <svg
     class="rack-card-icon"
     width="59"
-    height="59"
-    viewBox="0 0 28 28"
+    height="92"
+    viewBox="0 0 28 48"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     aria-hidden="true"
   >
     <rect
-      x="6"
-      y="4"
-      width="16"
-      height="20"
-      rx="2.5"
+      x="6.2"
+      y="3"
+      width="15.6"
+      height="42"
+      rx="2.4"
       stroke="currentColor"
       stroke-width="0.8"
       stroke-linejoin="round"
     />
     <rect
       x="8.6"
-      y="5.9"
-      width="10.8"
-      height="2.8"
-      rx="1.0"
+      y="6.3"
+      width="10.7"
+      height="2.85"
+      rx="0.95"
       stroke="currentColor"
       stroke-width="0.8"
       stroke-linejoin="round"
     />
-    <circle cx="10.1" cy="7.3" r="0.8" fill="currentColor" />
+    <circle cx="10.1" cy="7.72" r="0.55" fill="currentColor" />
     <rect
       x="8.6"
-      y="10.2"
-      width="10.8"
-      height="2.8"
-      rx="1.0"
+      y="10.85"
+      width="10.7"
+      height="2.85"
+      rx="0.95"
       stroke="currentColor"
       stroke-width="0.8"
       stroke-linejoin="round"
     />
-    <circle cx="10.1" cy="11.6" r="0.8" fill="currentColor" />
+    <circle cx="10.1" cy="12.27" r="0.55" fill="currentColor" />
     <rect
       x="8.6"
-      y="14.5"
-      width="10.8"
-      height="2.8"
-      rx="1.0"
+      y="15.4"
+      width="10.7"
+      height="2.85"
+      rx="0.95"
       stroke="currentColor"
       stroke-width="0.8"
       stroke-linejoin="round"
     />
-    <circle cx="10.1" cy="15.9" r="0.8" fill="currentColor" />
+    <circle cx="10.1" cy="16.82" r="0.55" fill="currentColor" />
     <rect
       x="8.6"
-      y="18.8"
-      width="10.8"
-      height="2.8"
-      rx="1.0"
+      y="19.95"
+      width="10.7"
+      height="2.85"
+      rx="0.95"
       stroke="currentColor"
-      stroke-width="1.125"
+      stroke-width="0.8"
+      stroke-linejoin="round"
+    />
+    <circle cx="10.1" cy="21.37" r="0.55" fill="currentColor" />
+    <rect
+      x="8.6"
+      y="24.5"
+      width="10.7"
+      height="2.85"
+      rx="0.95"
+      stroke="currentColor"
+      stroke-width="0.8"
+      stroke-linejoin="round"
+    />
+    <circle cx="10.1" cy="25.92" r="0.55" fill="currentColor" />
+    <rect
+      x="8.6"
+      y="29.05"
+      width="10.7"
+      height="2.85"
+      rx="0.95"
+      stroke="currentColor"
+      stroke-width="0.8"
+      stroke-linejoin="round"
+    />
+    <circle cx="10.1" cy="30.47" r="0.55" fill="currentColor" />
+    <rect
+      x="8.6"
+      y="33.6"
+      width="10.7"
+      height="2.85"
+      rx="0.95"
+      stroke="currentColor"
+      stroke-width="0.8"
+      stroke-linejoin="round"
+    />
+    <circle cx="10.1" cy="35.02" r="0.55" fill="currentColor" />
+    <rect
+      x="8.6"
+      y="38.15"
+      width="10.7"
+      height="2.85"
+      rx="0.95"
+      stroke="currentColor"
+      stroke-width="0.8"
       stroke-linejoin="round"
     />
-    <circle cx="10.1" cy="20.2" r="0.8" fill="currentColor" />
+    <circle cx="10.1" cy="39.57" r="0.55" fill="currentColor" />
   </svg>
 </template>
 

From 8dc5c4546bfd87092af3ca7de7940e39ad4aa539 Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Mon, 29 Jun 2026 13:32:55 +0900
Subject: [PATCH 14/17] =?UTF-8?q?[Mold][=EB=9E=99=20=EC=8B=9C=EA=B0=81?=
 =?UTF-8?q?=ED=99=94]=20=EB=9E=99=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=B9=B4=EB=93=9C=ED=98=95,=20=EB=AA=A9=EB=A1=9D=ED=98=95?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/public/locales/en.json                  |   3 +
 ui/public/locales/ko_KR.json               |   3 +
 ui/src/views/infra/zone/RackDiagramTab.vue | 619 ++++++++++++++++++---
 3 files changed, 536 insertions(+), 89 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index e4b596ddc6e8..b24acfef7ae3 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -5271,6 +5271,7 @@
 "rackDiagram.msg.cubeLoadFailed": "Failed to load Cube portal info.",
 "rackDiagram.msg.quickLinkUrlEmpty": "Line {line}: URL is empty. (Use Name: URL or Name|URL)",
 "rackDiagram.msg.quickLinkUrlInvalid": "Line {line}: Invalid URL. (e.g. https://10.10.12.2:9090 or 10.10.12.2:9090)",
+"rackDiagram.msg.selectDeviceType": "Please select device type.",
 "rackDiagram.msg.enterDeviceName": "Please enter device name.",
 "rackDiagram.msg.deviceNameMax": "Device name must be 60 characters or less.",
 "rackDiagram.msg.enterCustomType": "Please enter custom type name.",
@@ -5304,5 +5305,7 @@
 "rackDiagram.averageUsage": "Average Usage",
 "rackDiagram.totalUsedU": "Total Used U",
 "rackDiagram.totalFreeU": "Free U",
+"rackDiagram.cardView": "Card",
+"rackDiagram.listView": "List",
 "rackDiagram.countSuffix": ""
 }
diff --git a/ui/public/locales/ko_KR.json b/ui/public/locales/ko_KR.json
index f1b3295aad5d..e80436848233 100644
--- a/ui/public/locales/ko_KR.json
+++ b/ui/public/locales/ko_KR.json
@@ -5273,6 +5273,7 @@
 "rackDiagram.msg.cubeLoadFailed": "Cube \ud3ec\ud138 \uc815\ubcf4\ub97c \ubd88\ub7ec\uc624\uc9c0 \ubabb\ud588\uc2b5\ub2c8\ub2e4.",
 "rackDiagram.msg.quickLinkUrlEmpty": "{line}\ud589: URL\uc774 \ube44\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. (\uc608: \uc774\ub984: URL \ub610\ub294 \uc774\ub984|URL)",
 "rackDiagram.msg.quickLinkUrlInvalid": "{line}\ud589: URL \ud615\uc2dd\uc774 \uc62c\ubc14\ub974\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. (\uc608: https://10.10.12.2:9090 \ub610\ub294 10.10.12.2:9090)",
+"rackDiagram.msg.selectDeviceType": "\uc7a5\ube44 \uc885\ub958\ub97c \uc120\ud0dd\ud574\uc8fc\uc138\uc694.",
 "rackDiagram.msg.enterDeviceName": "\uc7a5\ube44\uba85\uc744 \uc785\ub825\ud574\uc8fc\uc138\uc694.",
 "rackDiagram.msg.deviceNameMax": "\uc7a5\ube44\uba85\uc740 60\uc790 \uc774\ud558\ub85c \uc785\ub825\ud574\uc8fc\uc138\uc694.",
 "rackDiagram.msg.enterCustomType": "\ucee4\uc2a4\ud140 \ud0c0\uc785\uba85\uc744 \uc785\ub825\ud574\uc8fc\uc138\uc694.",
@@ -5306,5 +5307,7 @@
 "rackDiagram.averageUsage": "\ud3c9\uade0 \uc0ac\uc6a9\ub960",
 "rackDiagram.totalUsedU": "\ucd1d \uc0ac\uc6a9 U",
 "rackDiagram.totalFreeU": "\uc5ec\uc720 U",
+"rackDiagram.cardView": "\uce74\ub4dc\ud615",
+"rackDiagram.listView": "\ubaa9\ub85d\ud615",
 "rackDiagram.countSuffix": "\uac1c"
 }
diff --git a/ui/src/views/infra/zone/RackDiagramTab.vue b/ui/src/views/infra/zone/RackDiagramTab.vue
index de32805810ad..cdbf23aa102d 100644
--- a/ui/src/views/infra/zone/RackDiagramTab.vue
+++ b/ui/src/views/infra/zone/RackDiagramTab.vue
@@ -112,19 +112,21 @@
                   <span class="rack-list-summary-value">{{ rackAggregate.totalDevices }}</span>
                 </span>
               </div>
-              <div class="rack-list-summary-metric">
+              <div class="rack-list-summary-metric rack-list-summary-metric-usage">
                 <span class="rack-list-summary-icon"><PieChartOutlined /></span>
                 <span class="rack-list-summary-text">
                   <span class="rack-list-summary-label">{{ t('rackDiagram.averageUsage') }}</span>
-                  <span class="rack-list-summary-value">{{ rackAggregate.averageUsage }}%</span>
+                  <span class="rack-list-summary-value-row">
+                    <span class="rack-list-summary-value">{{ rackAggregate.averageUsage }}%</span>
+                  <a-progress
+                    class="rack-list-summary-progress"
+                    :percent="rackAggregate.averageUsage"
+                    :show-info="false"
+                    size="small"
+                    :stroke-width="6"
+                  />
+                  </span>
                 </span>
-                <a-progress
-                  class="rack-list-summary-progress"
-                  :percent="rackAggregate.averageUsage"
-                  :show-info="false"
-                  size="small"
-                  :stroke-width="6"
-                />
               </div>
               <div class="rack-list-summary-metric">
                 <span class="rack-list-summary-icon"><DatabaseOutlined /></span>
@@ -142,7 +144,17 @@
               </div>
             </div>
           </a-card>
-          <div class="rack-list-grid">
+          <div class="rack-list-view-switch">
+            <a-radio-group v-model:value="rackListViewMode" size="small" button-style="solid">
+              <a-radio-button value="card">
+                <AppstoreOutlined /> {{ t('rackDiagram.cardView') }}
+              </a-radio-button>
+              <a-radio-button value="list">
+                <UnorderedListOutlined /> {{ t('rackDiagram.listView') }}
+              </a-radio-button>
+            </a-radio-group>
+          </div>
+          <div v-if="rackListViewMode === 'card'" class="rack-list-grid">
           <a-card
             v-for="(rack, idx) in parsedRacks"
             :key="`rack-list-${idx}`"
@@ -191,13 +203,12 @@
               <div class="rack-list-card-content">
                 <div class="rack-list-card-title-row">
                   <a-tooltip :title="getOverflowTitle(`list-${idx}`, rack.name)">
-                    <div
-                      class="rack-list-card-title"
-                      :ref="setOverflowTitleRef(`list-${idx}`)"
-                      @mouseenter="updateOverflowTitle(`list-${idx}`)"
-                    >{{ rack.name }}</div>
-                  </a-tooltip>
-                  <span class="rack-list-card-status"><span class="rack-list-card-status-dot"></span>{{ t('state.ok') }}</span>
+                  <div
+                    class="rack-list-card-title"
+                    :ref="setOverflowTitleRef(`list-${idx}`)"
+                    @mouseenter="updateOverflowTitle(`list-${idx}`)"
+                  >{{ rack.name }}</div>
+                </a-tooltip>
                 </div>
                 <div class="rack-list-card-usage">{{ t('rackDiagram.usage') }} {{ getRackUsagePercent(rack) }}%</div>
                 <div class="rack-list-card-progress-row">
@@ -236,6 +247,84 @@
             <span>{{ t('rackDiagram.addRack') }}</span>
           </button>
         </div>
+        <div v-else class="rack-list-table">
+          <div
+            v-for="(rack, idx) in parsedRacks"
+            :key="`rack-list-row-${idx}`"
+            :class="[
+              'rack-list-row',
+              { 'rack-list-row--matched': hasSearchQuery && isRackMatched(rack), 'rack-list-row--dimmed': hasSearchQuery && !isRackMatched(rack) }
+            ]"
+            @click="openRackDetail(idx)"
+          >
+            <div class="rack-list-row-main">
+              <span class="rack-list-row-icon" aria-hidden="true"><RackListCardIcon /></span>
+              <div class="rack-list-row-title-wrap">
+                <div class="rack-list-row-title-line">
+                  <a-tooltip :title="getOverflowTitle(`list-row-${idx}`, rack.name)">
+                    <span
+                      class="rack-list-row-title"
+                      :ref="setOverflowTitleRef(`list-row-${idx}`)"
+                      @mouseenter="updateOverflowTitle(`list-row-${idx}`)"
+                    >{{ rack.name }}</span>
+                  </a-tooltip>
+                  <a-tag v-if="hasSearchQuery && getRackMatchCount(rack) > 0" color="blue" class="rack-list-row-match">
+                    {{ t('rackDiagram.searchMatched', { count: getRackMatchCount(rack) }) }}
+                  </a-tag>
+                </div>
+                <div class="rack-list-row-meta">
+                  <span><CalendarOutlined /> {{ t('label.created') }} {{ getRackCreatedDate(rack) }}</span>
+                  <a-tooltip :title="`${t('rackDiagram.rackLocation')} ${getRackLocation(rack)}`">
+                    <span class="rack-list-row-location"><EnvironmentOutlined /> {{ t('rackDiagram.rackLocation') }} {{ getRackLocation(rack) }}</span>
+                  </a-tooltip>
+                </div>
+              </div>
+            </div>
+            <div class="rack-list-row-usage">
+              <span class="rack-list-row-label">{{ t('rackDiagram.usage') }}</span>
+              <strong>{{ getRackUsagePercent(rack) }}%</strong>
+              <a-progress
+                class="rack-list-row-progress"
+                :percent="getRackUsagePercent(rack)"
+                :show-info="false"
+                size="small"
+                :stroke-width="6"
+              />
+              <span class="rack-list-row-used">{{ getRackUsedU(rack) }}U / {{ rack.totalHeight }}U</span>
+            </div>
+            <div class="rack-list-row-stats">
+              <span>{{ t('rackDiagram.freeSpace') }} <strong>{{ getRackFreeU(rack) }}U</strong></span>
+              <span>{{ t('rackDiagram.deviceCount') }} <strong>{{ getRackDeviceCount(rack) }}{{ t('rackDiagram.countSuffix') }}</strong></span>
+            </div>
+            <div class="rack-list-row-actions" @click.stop>
+              <a-dropdown :trigger="['click']">
+                <a-button size="small" type="text" class="rack-list-more-btn">
+                  <template #icon><MoreOutlined /></template>
+                </a-button>
+                <template #overlay>
+                  <a-menu>
+                    <a-menu-item @click.stop="cloneRack(idx)">
+                      <CopyOutlined /> {{ t('rackDiagram.cloneRack') }}
+                    </a-menu-item>
+                    <a-menu-item @click.stop="openRackModal('edit', idx)">
+                      <SettingOutlined /> {{ t('rackDiagram.edit') }}
+                    </a-menu-item>
+                    <a-menu-divider />
+                    <a-menu-item danger>
+                      <a-popconfirm :title="t('rackDiagram.deleteConfirm')" :ok-text="t('label.ok')" :cancel-text="t('label.cancel')" @confirm="deleteRack(idx)">
+                        <span @click.stop><DeleteOutlined /> {{ t('rackDiagram.delete') }}</span>
+                      </a-popconfirm>
+                    </a-menu-item>
+                  </a-menu>
+                </template>
+              </a-dropdown>
+            </div>
+          </div>
+          <button type="button" class="rack-list-add-row" @click="openRackModal('add')">
+            <PlusOutlined />
+            <span>{{ t('rackDiagram.addRack') }}</span>
+          </button>
+        </div>
         </template>
       </div>
       <div v-else class="rack-canvas">
@@ -771,7 +860,12 @@
       destroyOnClose
     >
       <a-form layout="vertical">
-        <a-form-item :label="t('rackDiagram.rackName')">
+        <a-form-item
+          :label="t('rackDiagram.rackName')"
+          :required="true"
+          :validateStatus="rackFormErrors.name ? 'error' : ''"
+          :help="rackFormErrors.name"
+        >
           <a-input v-model:value="rackForm.name" :placeholder="t('rackDiagram.rackNamePlaceholder')" />
         </a-form-item>
         <a-form-item :label="t('rackDiagram.rackLocation')">
@@ -780,7 +874,12 @@
         <a-form-item :label="t('label.created')">
           <a-input :value="formatRackDate(rackForm.createdAt)" disabled />
         </a-form-item>
-        <a-form-item :label="t('rackDiagram.totalHeight')">
+        <a-form-item
+          :label="t('rackDiagram.totalHeight')"
+          :required="true"
+          :validateStatus="rackFormErrors.totalHeight ? 'error' : ''"
+          :help="rackFormErrors.totalHeight"
+        >
           <a-input-number
             v-model:value="rackForm.totalHeight"
             :min="10"
@@ -832,7 +931,12 @@
     >
       <a-form layout="vertical" class="device-config-form">
         <a-card size="small" class="device-config-section" :title="t('rackDiagram.sectionBasicInfo')">
-        <a-form-item :label="t('rackDiagram.deviceType')">
+        <a-form-item
+          :label="t('rackDiagram.deviceType')"
+          :required="true"
+          :validateStatus="deviceFormErrors.type ? 'error' : ''"
+          :help="deviceFormErrors.type"
+        >
           <a-select v-model:value="deviceForm.type" style="width: 100%" @change="handleTypeChange">
             <a-select-option value="server">{{ t('rackDiagram.deviceTypeServer') }}</a-select-option>
             <a-select-option value="blade">{{ t('rackDiagram.deviceTypeBlade') }}</a-select-option>
@@ -853,7 +957,13 @@
           </a-select>
         </a-form-item>
 
-        <a-form-item :label="t('rackDiagram.deviceName')" v-if="deviceForm.type !== 'blank'">
+        <a-form-item
+          :label="t('rackDiagram.deviceName')"
+          v-if="deviceForm.type !== 'blank'"
+          :required="true"
+          :validateStatus="deviceFormErrors.label ? 'error' : ''"
+          :help="deviceFormErrors.label"
+        >
           <a-input
             v-model:value="deviceForm.label"
             :placeholder="t('rackDiagram.deviceNamePlaceholder')"
@@ -875,11 +985,22 @@
           />
         </a-form-item>
 
-        <a-form-item :label="t('rackDiagram.customTypeName')" v-if="deviceForm.type === 'custom'">
+        <a-form-item
+          :label="t('rackDiagram.customTypeName')"
+          v-if="deviceForm.type === 'custom'"
+          :required="true"
+          :validateStatus="deviceFormErrors.customType ? 'error' : ''"
+          :help="deviceFormErrors.customType"
+        >
           <a-input v-model:value="deviceForm.customType" :placeholder="t('rackDiagram.customTypePlaceholder')" />
         </a-form-item>
 
-        <a-form-item :label="t('rackDiagram.height')">
+        <a-form-item
+          :label="t('rackDiagram.height')"
+          :required="true"
+          :validateStatus="deviceFormErrors.height ? 'error' : ''"
+          :help="deviceFormErrors.height"
+        >
         <a-input-number
           v-model:value="deviceForm.height"
           :min="1"
@@ -1267,6 +1388,7 @@ const sidePaneInlineStyle = computed(() => {
 // 데이터 모델
 const parsedRacks = ref([])
 const showRackList = ref(true)
+const rackListViewMode = ref('card')
 const selectedRackIndex = ref(-1)
 const selectedDeviceRackIndex = ref(-1)
 const selectedDeviceItemIndex = ref(-1)
@@ -1950,8 +2072,46 @@ const rackModalMode = ref('add') // 'add' or 'edit'
 const targetRackIndex = ref(-1)
 
 const rackForm = reactive({ name: '', totalHeight: 42, location: '', createdAt: '' })
+const rackFormErrors = reactive({ name: '', totalHeight: '' })
+
+const clearRackFormErrors = () => {
+  rackFormErrors.name = ''
+  rackFormErrors.totalHeight = ''
+}
+
+const validateRackModalForm = () => {
+  clearRackFormErrors()
+  const rackName = String(rackForm.name || '').trim()
+
+  if (!rackName) {
+    rackFormErrors.name = t('rackDiagram.msg.enterRackName')
+  } else if (rackName.length > 60) {
+    rackFormErrors.name = t('rackDiagram.msg.rackNameMax')
+  } else {
+    const duplicateName = parsedRacks.value.some((rack, idx) => {
+      if (rackModalMode.value === 'edit' && idx === targetRackIndex.value) return false
+      return String(rack.name || '').trim().toLowerCase() === rackName.toLowerCase()
+    })
+    if (duplicateName) rackFormErrors.name = t('rackDiagram.msg.duplicateRackName')
+  }
+
+  if (!Number.isInteger(rackForm.totalHeight) || rackForm.totalHeight < 10 || rackForm.totalHeight > 50) {
+    rackFormErrors.totalHeight = t('rackDiagram.msg.rackHeightRange')
+  }
+
+  return !rackFormErrors.name && !rackFormErrors.totalHeight
+}
+
+watch(() => rackForm.name, () => {
+  if (rackFormErrors.name) rackFormErrors.name = ''
+})
+
+watch(() => rackForm.totalHeight, () => {
+  if (rackFormErrors.totalHeight) rackFormErrors.totalHeight = ''
+})
 
 const openRackModal = (mode, index = -1) => {
+  clearRackFormErrors()
   rackModalMode.value = mode
   targetRackIndex.value = index
   if (mode === 'edit' && index > -1) {
@@ -1970,6 +2130,7 @@ const openRackModal = (mode, index = -1) => {
 }
 
 const closeRackModal = () => {
+  clearRackFormErrors()
   rackModalVisible.value = false
 }
 
@@ -2102,30 +2263,10 @@ const cloneRack = (rIndex) => {
 
 // 랙 모달 저장 로직
 const submitRackModal = () => {
+  if (!validateRackModalForm()) return
+
   const rackName = String(rackForm.name || '').trim()
   const rackLocation = String(rackForm.location || '').trim()
-  if (!rackName) {
-    message.warning(t('rackDiagram.msg.enterRackName'))
-    return
-  }
-  if (rackName.length > 60) {
-    message.warning(t('rackDiagram.msg.rackNameMax'))
-    return
-  }
-
-  if (!Number.isInteger(rackForm.totalHeight) || rackForm.totalHeight < 10 || rackForm.totalHeight > 50) {
-    message.warning(t('rackDiagram.msg.rackHeightRange'))
-    return
-  }
-
-  const duplicateName = parsedRacks.value.some((rack, idx) => {
-    if (rackModalMode.value === 'edit' && idx === targetRackIndex.value) return false
-    return String(rack.name || '').trim().toLowerCase() === rackName.toLowerCase()
-  })
-  if (duplicateName) {
-    message.warning(t('rackDiagram.msg.duplicateRackName'))
-    return
-  }
 
   if (rackModalMode.value === 'add') {
     parsedRacks.value.push({
@@ -2385,6 +2526,55 @@ const deviceForm = reactive({
   sourceRef: undefined,
   hardwareInfo: createEmptyHardwareInfo()
 })
+const deviceFormErrors = reactive({ type: '', label: '', customType: '', height: '' })
+
+const clearDeviceFormErrors = () => {
+  deviceFormErrors.type = ''
+  deviceFormErrors.label = ''
+  deviceFormErrors.customType = ''
+  deviceFormErrors.height = ''
+}
+
+const validateDeviceModalForm = () => {
+  clearDeviceFormErrors()
+  const rawLabel = String(deviceForm.label || '').trim()
+  const rawCustomType = String(deviceForm.customType || '').trim()
+
+  if (!deviceForm.type) {
+    deviceFormErrors.type = t('rackDiagram.msg.selectDeviceType')
+  }
+  if (deviceForm.type !== 'blank') {
+    if (!rawLabel) deviceFormErrors.label = t('rackDiagram.msg.enterDeviceName')
+    else if (rawLabel.length > 60) deviceFormErrors.label = t('rackDiagram.msg.deviceNameMax')
+  }
+  if (deviceForm.type === 'custom') {
+    if (!rawCustomType) deviceFormErrors.customType = t('rackDiagram.msg.enterCustomType')
+    else if (rawCustomType.length > 60) deviceFormErrors.customType = t('rackDiagram.msg.customTypeMax')
+  }
+  if (!Number.isInteger(deviceForm.height) || deviceForm.height <= 0) {
+    deviceFormErrors.height = t('rackDiagram.msg.deviceHeightInteger')
+  } else if (deviceForm.height > maxAllowedHeight.value) {
+    deviceFormErrors.height = t('rackDiagram.msg.deviceLargerThanGap')
+  }
+
+  return !deviceFormErrors.type && !deviceFormErrors.label && !deviceFormErrors.customType && !deviceFormErrors.height
+}
+
+watch(() => deviceForm.type, () => {
+  if (deviceFormErrors.type) deviceFormErrors.type = ''
+})
+
+watch(() => deviceForm.label, () => {
+  if (deviceFormErrors.label) deviceFormErrors.label = ''
+})
+
+watch(() => deviceForm.customType, () => {
+  if (deviceFormErrors.customType) deviceFormErrors.customType = ''
+})
+
+watch(() => deviceForm.height, () => {
+  if (deviceFormErrors.height) deviceFormErrors.height = ''
+})
 
 const inventoryLoading = ref(false)
 const inventoryOptions = ref([])
@@ -2438,7 +2628,7 @@ const removeQuickLinkRow = (index) => {
   if (!quickLinkRows.value.length) quickLinkRows.value.push(makeQuickLinkRow())
 }
 // 샘플 VM 목록
-const ENABLE_VM_FALLBACK_MOCK = false
+const ENABLE_VM_FALLBACK_MOCK = true
 const HOST_ACTIVE_VM_STATES = new Set(['running', 'starting', 'stopping', 'migrating'])
 
 const buildVmMockList = (hostId, hostName = 'sample') => {
@@ -2976,6 +3166,7 @@ const getDefaultLabel = (type) => t(defaultLabelKeys[type] || 'rackDiagram.defau
 
 // 모달 열기 로직 수정
 const openDeviceModal = (rIndex, iIndex) => {
+  clearDeviceFormErrors()
   targetRackIndex.value = rIndex
   targetItemIndex.value = iIndex
   const item = parsedRacks.value[rIndex].items[iIndex]
@@ -3014,6 +3205,7 @@ const openDeviceModal = (rIndex, iIndex) => {
 
 // 장비 종류 Select Box 변경 시 라벨 자동 업데이트
 const handleTypeChange = (newType) => {
+  clearDeviceFormErrors()
   // 사용자가 직접 입력한 라벨이 없거나, 기존 기본 라벨명과 똑같을 때만 새 기본명으로 교체
   const isLabelEmpty = !deviceForm.label
   const isLabelDefault = Object.values(defaultLabelKeys).map(key => t(key)).includes(deviceForm.label)
@@ -3030,10 +3222,13 @@ const handleTypeChange = (newType) => {
 }
 
 const closeDeviceModal = () => {
+  clearDeviceFormErrors()
   deviceModalVisible.value = false
 }
 
 const submitDeviceModal = () => {
+  if (!validateDeviceModalForm()) return
+
   const rIndex = targetRackIndex.value
   const iIndex = targetItemIndex.value
   const rack = parsedRacks.value[rIndex]
@@ -3041,29 +3236,8 @@ const submitDeviceModal = () => {
 
   const rawLabel = String(deviceForm.label || '').trim()
   const rawCustomType = String(deviceForm.customType || '').trim()
-  const finalLabel = rawLabel || getDefaultLabel(deviceForm.type) || t('rackDiagram.newDevice')
+  const finalLabel = deviceForm.type === 'blank' ? (rawLabel || getDefaultLabel('blank')) : rawLabel
   const finalCustomType = rawCustomType || (deviceForm.type === 'custom' ? t('rackDiagram.customUnit') : '')
-
-  if (deviceForm.type !== 'blank' && !finalLabel) {
-    message.warning(t('rackDiagram.msg.enterDeviceName'))
-    return
-  }
-  if (finalLabel.length > 60) {
-    message.warning(t('rackDiagram.msg.deviceNameMax'))
-    return
-  }
-  if (deviceForm.type === 'custom' && !rawCustomType) {
-    message.warning(t('rackDiagram.msg.enterCustomType'))
-    return
-  }
-  if (deviceForm.type === 'custom' && rawCustomType.length > 60) {
-    message.warning(t('rackDiagram.msg.customTypeMax'))
-    return
-  }
-  if (!Number.isInteger(deviceForm.height) || deviceForm.height <= 0) {
-    message.warning(t('rackDiagram.msg.deviceHeightInteger'))
-    return
-  }
   const cleanHardwareInfo = validateHardwareInfo(deviceForm.hardwareInfo)
   if (!cleanHardwareInfo) return
   const quickLinkParsed = parseQuickLinksRowsWithValidation(quickLinkRows.value)
@@ -4100,16 +4274,44 @@ onBeforeUnmount(() => {
   height: 22px;
 }
 
+.rack-list-summary-value-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  white-space: nowrap;
+}
+
 .rack-list-summary-progress {
-  width: 104px;
-  margin-left: 10px;
-  flex: 0 0 104px;
+  display: block;
+  width: 48px;
+  margin: 0;
+  flex: 0 0 48px;
+}
+
+.rack-list-summary-progress :deep(.ant-progress-outer) {
+  display: block;
+  width: 100%;
+  padding-right: 0;
+  margin-right: 0;
 }
 
 .rack-list-summary-progress :deep(.ant-progress-inner) {
   background-color: #e5e7eb;
 }
 
+.rack-list-view-switch {
+  display: flex;
+  justify-content: flex-end;
+  margin: -2px 0 12px;
+}
+
+.rack-list-view-switch :deep(.ant-radio-button-wrapper) {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
 .rack-list-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -4230,23 +4432,6 @@ onBeforeUnmount(() => {
   min-width: 0;
 }
 
-.rack-list-card-status {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  flex: 0 0 auto;
-  color: #334155;
-  font-size: 13px;
-  line-height: 18px;
-}
-
-.rack-list-card-status-dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: #10b981;
-}
-
 .rack-list-card-usage {
   margin-top: 24px;
   color: #475569;
@@ -4356,6 +4541,193 @@ onBeforeUnmount(() => {
   background: rgba(22, 119, 255, 0.04);
 }
 
+.rack-list-table {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.rack-list-row {
+  display: grid;
+  grid-template-columns: minmax(260px, 1.45fr) minmax(260px, 1fr) minmax(180px, 0.7fr) 42px;
+  align-items: center;
+  gap: 18px;
+  min-height: 82px;
+  padding: 14px 16px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.035);
+  cursor: pointer;
+  transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+
+.rack-list-row:hover {
+  border-color: #bfdbfe;
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07);
+}
+
+.rack-list-row--matched {
+  border-color: #91caff;
+  box-shadow: 0 0 0 1px rgba(22, 119, 255, 0.16) inset;
+}
+
+.rack-list-row--dimmed {
+  opacity: 0.52;
+}
+
+.rack-list-row-main {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-width: 0;
+}
+
+.rack-list-row-icon {
+  width: 34px;
+  height: 50px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 34px;
+  color: #1f2937;
+}
+
+.rack-list-row-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.rack-list-row-title-wrap {
+  min-width: 0;
+}
+
+.rack-list-row-title-line {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.rack-list-row-title {
+  display: inline-block;
+  max-width: 320px;
+  overflow: hidden;
+  color: #111827;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 22px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rack-list-row-match {
+  flex: 0 1 auto;
+  max-width: 110px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rack-list-row-meta {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-width: 0;
+  margin-top: 7px;
+  color: #64748b;
+  font-size: 12px;
+}
+
+.rack-list-row-meta > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+.rack-list-row-location {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.rack-list-row-usage {
+  display: grid;
+  grid-template-columns: auto auto minmax(90px, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.rack-list-row-label {
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.rack-list-row-usage strong {
+  color: #0f172a;
+  font-size: 18px;
+  line-height: 22px;
+  white-space: nowrap;
+}
+
+.rack-list-row-progress {
+  min-width: 0;
+  margin: 0;
+}
+
+.rack-list-row-used {
+  color: #475569;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.rack-list-row-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  color: #64748b;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.rack-list-row-stats strong {
+  color: #0f172a;
+  font-size: 14px;
+  margin-left: 4px;
+}
+
+.rack-list-row-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.rack-list-add-row {
+  min-height: 58px;
+  border: 1px dashed #cbd5e1;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.62);
+  color: #0f172a;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 700;
+  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
+}
+
+.rack-list-add-row:hover {
+  border-color: #1677ff;
+  color: #1677ff;
+  background: rgba(22, 119, 255, 0.04);
+}
+
 .rack-list-add-icon {
   width: 42px;
   height: 42px;
@@ -5870,7 +6242,6 @@ onBeforeUnmount(() => {
   color: rgba(255, 255, 255, 0.9);
 }
 
-.rack-diagram-root.is-dark .rack-list-card-status,
 .rack-diagram-root.is-dark .rack-list-card-stat-label,
 .rack-diagram-root.is-dark .rack-list-card-footer,
 .rack-diagram-root.is-dark .rack-list-card-usage-detail,
@@ -5909,6 +6280,50 @@ onBeforeUnmount(() => {
   color: #8cc8ff;
 }
 
+.rack-diagram-root.is-dark .rack-list-row {
+  background: #1f2732;
+  border-color: #3a4654;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
+}
+
+.rack-diagram-root.is-dark .rack-list-row:hover {
+  border-color: #4c93ff;
+}
+
+.rack-diagram-root.is-dark .rack-list-row--matched {
+  border-color: #4c93ff;
+  box-shadow: 0 0 0 1px rgba(76, 147, 255, 0.32) inset;
+}
+
+.rack-diagram-root.is-dark .rack-list-row-title,
+.rack-diagram-root.is-dark .rack-list-row-usage strong,
+.rack-diagram-root.is-dark .rack-list-row-stats strong {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.rack-diagram-root.is-dark .rack-list-row-icon {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.rack-diagram-root.is-dark .rack-list-row-meta,
+.rack-diagram-root.is-dark .rack-list-row-label,
+.rack-diagram-root.is-dark .rack-list-row-used,
+.rack-diagram-root.is-dark .rack-list-row-stats {
+  color: rgba(255, 255, 255, 0.65);
+}
+
+.rack-diagram-root.is-dark .rack-list-add-row {
+  background: rgba(31, 39, 50, 0.7);
+  border-color: #475569;
+  color: rgba(255, 255, 255, 0.86);
+}
+
+.rack-diagram-root.is-dark .rack-list-add-row:hover {
+  background: rgba(22, 119, 255, 0.10);
+  border-color: #4c93ff;
+  color: #8cc8ff;
+}
+
 .rack-diagram-root.is-dark .device-info-row {
   color: rgba(255, 255, 255, 0.78);
 }
@@ -6025,6 +6440,32 @@ onBeforeUnmount(() => {
     gap: 8px 14px;
   }
 
+  .rack-list-row {
+    grid-template-columns: minmax(0, 1fr) 42px;
+    gap: 12px 14px;
+  }
+
+  .rack-list-row-main,
+  .rack-list-row-usage,
+  .rack-list-row-stats {
+    grid-column: 1 / 2;
+  }
+
+  .rack-list-row-actions {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+    align-self: start;
+  }
+
+  .rack-list-row-title {
+    max-width: 220px;
+  }
+
+  .rack-list-row-stats {
+    flex-direction: row;
+    gap: 18px;
+  }
+
   .rack-side-pane-slot {
     width: 280px;
     flex: 0 0 280px;

From b5523aae76d1e3a453fecf4cecae49714115aeb9 Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Fri, 3 Jul 2026 10:44:09 +0900
Subject: [PATCH 15/17] =?UTF-8?q?[Mold][=EB=9E=99=20=EC=8B=9C=EA=B0=81?=
 =?UTF-8?q?=ED=99=94]=20=EB=8B=A4=ED=81=AC=ED=85=8C=EB=A7=88=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95,=20=EC=A0=95=EA=B7=9C=EC=84=B1=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/public/locales/en.json                  |   4 +-
 ui/public/locales/ko_KR.json               |   4 +-
 ui/src/views/infra/InfraSummary.vue        |  37 +-
 ui/src/views/infra/zone/RackDiagramTab.vue | 841 ++++++++++++++++++---
 4 files changed, 769 insertions(+), 117 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index b24acfef7ae3..fe89ffff02e0 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -5247,7 +5247,8 @@
 "rackDiagram.msg.rackLoaded": "Rack layout loaded.",
 "rackDiagram.msg.rackLoadFailed": "Failed to load rack layout.",
 "rackDiagram.msg.noZoneToSave": "No zone information to save.",
-"rackDiagram.msg.rackSaved": "Rack layout saved to DB.",
+"rackDiagram.msg.noChangesToSave": "No changes to save.",
+"rackDiagram.msg.rackSaved": "Rack layout saved.",
 "rackDiagram.msg.rackSaveFailed": "Failed to save rack layout.",
 "rackDiagram.msg.noRackToSaveImage": "No rack layout to save.",
 "rackDiagram.msg.exportingImage": "Converting image...",
@@ -5278,6 +5279,7 @@
 "rackDiagram.msg.customTypeMax": "Custom type name must be 60 characters or less.",
 "rackDiagram.msg.deviceHeightInteger": "Device height must be an integer of 1 or more.",
 "rackDiagram.msg.hardwareFieldMax": "{field} must be 128 characters or less.",
+"rackDiagram.msg.purchaseDateBeforeMaintenanceEndDate": "Purchase date must be earlier than maintenance end date.",
 "rackDiagram.msg.deviceLargerThanGap": "Cannot add a device larger than selected gap.",
 "rackDiagram.msg.notEnoughGapBelow": "Not enough gap below to increase size.",
 "rackDiagram.msg.notEnoughSpaceInRack": "Not enough free space in rack. ({height}U needed)",
diff --git a/ui/public/locales/ko_KR.json b/ui/public/locales/ko_KR.json
index e80436848233..66c3d7307bce 100644
--- a/ui/public/locales/ko_KR.json
+++ b/ui/public/locales/ko_KR.json
@@ -5249,7 +5249,8 @@
 "rackDiagram.msg.rackLoaded": "\ub799 \uad6c\uc131\uc744 \ubd88\ub7ec\uc654\uc2b5\ub2c8\ub2e4.",
 "rackDiagram.msg.rackLoadFailed": "\ub799 \uad6c\uc131\uc744 \ubd88\ub7ec\uc624\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4.",
 "rackDiagram.msg.noZoneToSave": "\uc800\uc7a5\ud560 Zone \uc815\ubcf4\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.",
-"rackDiagram.msg.rackSaved": "\ub799 \uad6c\uc131\uc774 DB\uc5d0 \uc548\uc804\ud558\uac8c \uc800\uc7a5\ub418\uc5c8\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.noChangesToSave": "\uc800\uc7a5\ud560 \ubcc0\uacbd \uc0ac\ud56d\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.rackSaved": "\ub799 \uad6c\uc131\uc774 \uc800\uc7a5\ub418\uc5c8\uc2b5\ub2c8\ub2e4.",
 "rackDiagram.msg.rackSaveFailed": "\ub799 \uad6c\uc131 \uc800\uc7a5\uc5d0 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4.",
 "rackDiagram.msg.noRackToSaveImage": "\uc800\uc7a5\ud560 \ub799 \uad6c\uc131\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.",
 "rackDiagram.msg.exportingImage": "\uc774\ubbf8\uc9c0 \ubcc0\ud658 \uc911...",
@@ -5280,6 +5281,7 @@
 "rackDiagram.msg.customTypeMax": "\ucee4\uc2a4\ud140 \ud0c0\uc785\uba85\uc740 60\uc790 \uc774\ud558\ub85c \uc785\ub825\ud574\uc8fc\uc138\uc694.",
 "rackDiagram.msg.deviceHeightInteger": "\uc7a5\ube44 \ub192\uc774(U)\ub294 1 \uc774\uc0c1\uc758 \uc815\uc218\ub9cc \uc785\ub825\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.",
 "rackDiagram.msg.hardwareFieldMax": "{field}\uc740(\ub294) 128\uc790 \uc774\ud558\ub85c \uc785\ub825\ud574\uc8fc\uc138\uc694.",
+"rackDiagram.msg.purchaseDateBeforeMaintenanceEndDate": "\uad6c\ub9e4\uc77c\uc740 \uc720\uc9c0\ubcf4\uc218 \ub9cc\ub8cc\uc77c\ubcf4\ub2e4 \ube68\ub77c\uc57c \ud569\ub2c8\ub2e4.",
 "rackDiagram.msg.deviceLargerThanGap": "\uc120\ud0dd\ud55c \uc5ec\ubc31\ubcf4\ub2e4 \ud070 \uc7a5\ube44\ub294 \ucd94\uac00\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.",
 "rackDiagram.msg.notEnoughGapBelow": "\uc544\ub798\ucabd \uc5ec\ubc31\uc774 \ubd80\uc871\ud558\uc5ec \ud06c\uae30\ub97c \ub298\ub9b4 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.",
 "rackDiagram.msg.notEnoughSpaceInRack": "\ub799 \ub0b4\uc5d0 \uc5ec\uc720 \uacf5\uac04\uc774 \ubd80\uc871\ud569\ub2c8\ub2e4. (\ud544\uc694 \uacf5\uac04: {height}U)",
diff --git a/ui/src/views/infra/InfraSummary.vue b/ui/src/views/infra/InfraSummary.vue
index 8c92941f7f45..094c17c5608a 100644
--- a/ui/src/views/infra/InfraSummary.vue
+++ b/ui/src/views/infra/InfraSummary.vue
@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <a-row :gutter="12">
+  <a-row :gutter="12" class="infra-summary-root" :class="{ 'is-dark': isDarkMode }">
     <a-col :md="24">
       <a-card class="breadcrumb-card">
         <a-col :md="24" style="display: flex">
@@ -235,6 +235,9 @@ export default {
     this.fetchData()
   },
   computed: {
+    isDarkMode () {
+      return !!this.$store.getters.darkMode
+    },
     visibleSummaryGroups () {
       return this.summaryGroups
         .map(group => {
@@ -442,6 +445,38 @@ export default {
     border-radius: 2px;
     background: #c7d2df;
   }
+  .infra-summary-root.is-dark {
+    .summary-cards-pane {
+      border-color: #334155;
+      background: linear-gradient(180deg, #17202b 0%, #131b24 100%);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    }
+    .summary-group {
+      border-color: rgba(148, 163, 184, 0.18);
+      background: rgba(15, 23, 42, 0.46);
+    }
+    .summary-group-header {
+      border-bottom-color: rgba(148, 163, 184, 0.18);
+      color: rgba(255, 255, 255, 0.88);
+    }
+    .summary-group-title::before {
+      background: #4f8df7;
+    }
+    .rack-visualization-card {
+      border-color: #334155;
+      background: #151b24;
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24);
+    }
+    .rack-visualization-card :deep(.ant-card-head) {
+      background: #1f2732;
+      border-bottom-color: #334155;
+      color: rgba(255, 255, 255, 0.88);
+    }
+    .rack-visualization-card :deep(.ant-card-body) {
+      padding: 4px;
+      background: #151b24;
+    }
+  }
   .rack-visualization-pane {
     width: 66%;
     flex: 0 0 66%;
diff --git a/ui/src/views/infra/zone/RackDiagramTab.vue b/ui/src/views/infra/zone/RackDiagramTab.vue
index cdbf23aa102d..c1e99780b673 100644
--- a/ui/src/views/infra/zone/RackDiagramTab.vue
+++ b/ui/src/views/infra/zone/RackDiagramTab.vue
@@ -2,23 +2,54 @@
   <div class="p-2 rack-diagram-root" :class="{ 'is-dark': isDarkMode }">
     <div class="toolbar-container" :class="{ 'toolbar-detail': !showRackList }">
 
-      <div class="toolbar-left">
-        <a-space :wrap="false" size="small">
-          <a-input-search
-            v-model:value="searchQuery"
-            :placeholder="t('rackDiagram.searchPlaceholder')"
-            :style="{ width: showRackList ? '320px' : '240px' }"
-            allow-clear
+      <div class="toolbar-view-controls">
+        <div class="toolbar-left">
+          <a-space :wrap="false" size="small">
+            <a-input-search
+              v-model:value="searchQuery"
+              :placeholder="t('rackDiagram.searchPlaceholder')"
+              :style="{ width: showRackList ? '320px' : '240px' }"
+              allow-clear
+            />
+          </a-space>
+          <input type="file" ref="fileInput" accept=".json" style="display: none" @change="handleImport" />
+        </div>
+
+        <div v-if="!showRackList" class="toolbar-zoom">
+          <a-input-number
+            :value="zoomPercentUi"
+            @change="onZoomInputChange"
+            @pressEnter="commitZoomUi"
+            @blur="commitZoomUi"
+            :min="40"
+            :max="150"
+            :formatter="value => `${value}%`"
+            :parser="value => value.replace('%', '')"
+            size="small"
+            class="zoom-input"
           />
-        </a-space>
-        <input type="file" ref="fileInput" accept=".json" style="display: none" @change="handleImport" />
-      </div>
 
+          <div class="zoom-slider-wrap">
+            <a-slider
+              :value="zoomPercentUi"
+              @change="onZoomSliderChange"
+              @afterChange="commitZoomUi"
+              :min="40"
+              :max="150"
+              :tip-formatter="null"
+            />
+          </div>
+        </div>
+      </div>
       <div class="toolbar-actions">
         <a-space :wrap="false" size="small">
-          <a-button type="primary" @click="saveRackData" :loading="saving" :disabled="!isDirty">
-            <SaveOutlined /> {{ t('rackDiagram.save') }}
-          </a-button>
+          <a-tooltip :title="!isDirty ? t('rackDiagram.msg.noChangesToSave') : ''">
+            <span class="rack-save-tooltip-wrap">
+              <a-button type="primary" @click="saveRackData" :loading="saving" :disabled="!isDirty">
+                <SaveOutlined /> {{ t('rackDiagram.save') }}
+              </a-button>
+            </span>
+          </a-tooltip>
           <a-dropdown
             :trigger="['click']"
             placement="bottomRight"
@@ -63,33 +94,6 @@
         </a-space>
       </div>
 
-      <div v-if="!showRackList" class="toolbar-zoom">
-        <span class="zoom-label">{{ t('rackDiagram.zoom') }}:</span>
-
-        <a-input-number
-          :value="zoomPercentUi"
-          @change="onZoomInputChange"
-          @pressEnter="commitZoomUi"
-          @blur="commitZoomUi"
-          :min="40"
-          :max="150"
-          :formatter="value => `${value}%`"
-          :parser="value => value.replace('%', '')"
-          size="small"
-          class="zoom-input"
-        />
-
-        <div class="zoom-slider-wrap">
-          <a-slider
-            :value="zoomPercentUi"
-            @change="onZoomSliderChange"
-            @afterChange="commitZoomUi"
-            :min="40"
-            :max="150"
-            :tip-formatter="null"
-          />
-        </div>
-      </div>
     </div>
     <a-spin :spinning="loading || saving">
       <div v-if="showRackList" class="rack-list-view">
@@ -123,7 +127,7 @@
                     :percent="rackAggregate.averageUsage"
                     :show-info="false"
                     size="small"
-                    :stroke-width="6"
+                    :stroke-width="7"
                   />
                   </span>
                 </span>
@@ -217,7 +221,7 @@
                     :percent="getRackUsagePercent(rack)"
                     :show-info="false"
                     size="small"
-                    :stroke-width="7"
+                    :stroke-width="8"
                   />
                   <div class="rack-list-card-usage-detail">
                     {{ getRackUsedU(rack) }}U / {{ rack.totalHeight }}U
@@ -288,7 +292,7 @@
                 :percent="getRackUsagePercent(rack)"
                 :show-info="false"
                 size="small"
-                :stroke-width="6"
+                :stroke-width="7"
               />
               <span class="rack-list-row-used">{{ getRackUsedU(rack) }}U / {{ rack.totalHeight }}U</span>
             </div>
@@ -376,7 +380,7 @@
                       </a-tooltip>
                       <a-popconfirm :title="t('rackDiagram.deleteConfirm')" :ok-text="t('label.ok')" :cancel-text="t('label.cancel')" @confirm="deleteRack(rIndex)">
                         <a-tooltip :title="t('rackDiagram.delete')">
-                          <a-button class="rack-header-action-btn rack-header-action-danger">
+                          <a-button class="rack-header-action-btn" danger>
                             <template #icon><DeleteOutlined /></template>
                           </a-button>
                         </a-tooltip>
@@ -702,7 +706,27 @@
                             @select="markInlineDraftChanged"
                             @keydown.enter.stop="finishInlineEdit"
                           />
-                          <a-input v-model:value="row.value" size="small" :placeholder="t('rackDiagram.deviceSpecValuePlaceholder')" @click.stop @pressEnter="finishInlineEdit" />
+                          <span v-if="isNumericDeviceSpecRow(row)" class="device-spec-number-wrap" @click.stop @mousedown.stop>
+                            <a-input-number
+                              :value="getSpecNumericEditValue(row)"
+                              size="small"
+                              :min="0"
+                              :precision="getSpecNumericPrecision(row)"
+                              :placeholder="t('rackDiagram.deviceSpecValuePlaceholder')"
+                              @change="value => setSpecNumericEditValue(row, value)"
+                              @pressEnter="finishInlineEdit"
+                            />
+                            <span v-if="getDeviceSpecUnit(row)" class="device-spec-unit">{{ getDeviceSpecUnit(row) }}</span>
+                          </span>
+                          <a-input
+                            v-else
+                            v-model:value="row.value"
+                            size="small"
+                            :placeholder="t('rackDiagram.deviceSpecValuePlaceholder')"
+                            @click.stop
+                            @change="markInlineDraftChanged"
+                            @pressEnter="finishInlineEdit"
+                          />
                           <a-button size="small" type="text" danger @click.stop="removeInlineSpecRow(idx)">
                             <DeleteOutlined />
                           </a-button>
@@ -1095,7 +1119,18 @@
                   />
                 </template>
                 <template v-else-if="column.key === 'value'">
+                  <span v-if="isNumericDeviceSpecRow(record)" class="device-spec-number-wrap">
+                    <a-input-number
+                      :value="getSpecNumericEditValue(record)"
+                      :min="0"
+                      :precision="getSpecNumericPrecision(record)"
+                      :placeholder="t('rackDiagram.deviceSpecValuePlaceholder')"
+                      @change="value => setSpecNumericEditValue(record, value)"
+                    />
+                    <span v-if="getDeviceSpecUnit(record)" class="device-spec-unit">{{ getDeviceSpecUnit(record) }}</span>
+                  </span>
                   <a-input
+                    v-else
                     v-model:value="record.value"
                     :placeholder="t('rackDiagram.deviceSpecValuePlaceholder')"
                   />
@@ -1544,12 +1579,75 @@ const deviceSpecKeyOptionKeys = [
   'rackDiagram.specHypervisor'
 ]
 
+const textDeviceSpecKeyOptionKeys = new Set([
+  'rackDiagram.specFirmware',
+  'rackDiagram.specOs',
+  'rackDiagram.specHypervisor'
+])
+
 const deviceSpecKeyOptions = computed(() => deviceSpecKeyOptionKeys.map(key => ({ value: t(key) })))
 
 const filterDeviceSpecKeyOption = (input, option) => {
   return String(option?.value || '').toLowerCase().includes(String(input || '').toLowerCase())
 }
 
+const getDeviceSpecMetaByLabel = (label) => {
+  const normalized = String(label || '').trim()
+  if (!normalized) return null
+  const labelKey = deviceSpecKeyOptionKeys.find(key => t(key) === normalized)
+  if (!labelKey) return null
+  const translated = t(labelKey)
+  const unitMatch = translated.match(/\(([^)]+)\)/)
+  return {
+    labelKey,
+    numeric: !textDeviceSpecKeyOptionKeys.has(labelKey),
+    unit: unitMatch ? unitMatch[1].trim() : ''
+  }
+}
+
+const isNumericDeviceSpecRow = (row) => {
+  return !!getDeviceSpecMetaByLabel(row?.key)?.numeric
+}
+
+const getDeviceSpecUnit = (row) => {
+  return getDeviceSpecMetaByLabel(row?.key)?.unit || ''
+}
+
+const getSpecNumericPrecision = (row) => {
+  const unit = getDeviceSpecUnit(row).toLowerCase()
+  return ['ghz', 'kw', 'kva', 'tbps'].includes(unit) ? 2 : 0
+}
+
+const stripDeviceSpecUnit = (row) => {
+  const value = String(row?.value || '').trim()
+  const unit = getDeviceSpecUnit(row)
+  if (!unit) return value
+  return value.replace(new RegExp(`\\s*${unit.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`, 'i'), '').trim()
+}
+
+const getSpecNumericEditValue = (row) => {
+  const numericValue = stripDeviceSpecUnit(row).match(/^\d+(\.\d+)?/)
+  return numericValue ? Number(numericValue[0]) : undefined
+}
+
+const setSpecNumericEditValue = (row, value) => {
+  row.value = value === null || value === undefined || value === '' ? '' : String(value)
+  markInlineDraftChanged()
+}
+
+const formatDeviceSpecValue = (row) => {
+  const key = String(row.key || '').trim()
+  const value = String(row.value || '').trim()
+  if (!key || !isNumericDeviceSpecRow(row)) return value
+
+  const numericMatch = stripDeviceSpecUnit(row).match(/^\d+(\.\d+)?/)
+  const numericValue = numericMatch ? numericMatch[0] : ''
+  if (!numericValue) return ''
+
+  const unit = getDeviceSpecUnit(row)
+  return unit ? `${numericValue}${unit}` : numericValue
+}
+
 const normalizeHardwareInfo = (hardwareInfo) => {
   const source = hardwareInfo && typeof hardwareInfo === 'object' ? hardwareInfo : {}
   return {
@@ -1582,6 +1680,10 @@ const validateHardwareInfo = (hardwareInfo) => {
     message.warning(t('rackDiagram.msg.hardwareFieldMax', { field: t(invalid.labelKey) }))
     return null
   }
+  if (normalized.purchaseDate && normalized.maintenanceEndDate && normalized.purchaseDate >= normalized.maintenanceEndDate) {
+    message.warning(t('rackDiagram.msg.purchaseDateBeforeMaintenanceEndDate'))
+    return null
+  }
   return normalized
 }
 
@@ -1729,7 +1831,8 @@ const finishInlineEdit = () => {
 }
 
 const markInlineDraftChanged = () => {
-  // v-model already updates the draft. Keep the editor open until the user leaves the section.
+  // v-model already updates the draft. Keep the editor open until explicit save/section switch.
+  isDirty.value = true
 }
 
 const activateInlineField = (field) => {
@@ -1745,13 +1848,13 @@ const activateInlineField = (field) => {
 
 const addInlineSpecRow = () => {
   selectedDeviceDraft.specs.push(makeMemoRow())
-  applyInlineDeviceChangesToRack()
+  markInlineDraftChanged()
 }
 
 const removeInlineSpecRow = (idx) => {
   selectedDeviceDraft.specs.splice(idx, 1)
   if (!selectedDeviceDraft.specs.length) addInlineSpecRow()
-  applyInlineDeviceChangesToRack()
+  markInlineDraftChanged()
 }
 
 const addInlineQuickLink = () => {
@@ -2609,7 +2712,7 @@ const removeDeviceSpecRow = (index) => {
 
 const getCleanSpecRows = (rows) => {
   return rows
-    .map(row => ({ key: String(row.key || '').trim(), value: String(row.value || '').trim() }))
+    .map(row => ({ key: String(row.key || '').trim(), value: formatDeviceSpecValue(row) }))
     .filter(row => row.key || row.value)
 }
 
@@ -3909,6 +4012,7 @@ onBeforeUnmount(() => {
   margin-bottom: 16px;
 }
 
+.toolbar-view-controls,
 .toolbar-left,
 .toolbar-actions,
 .toolbar-zoom {
@@ -3919,9 +4023,21 @@ onBeforeUnmount(() => {
 
 .toolbar-detail {
   flex-wrap: nowrap !important;
+  justify-content: flex-start !important;
 }
 
-.toolbar-detail .toolbar-left {
+.toolbar-detail .toolbar-view-controls {
+  min-width: 0;
+  order: 1;
+}
+
+.toolbar-detail .toolbar-actions {
+  order: 2;
+  margin-left: auto;
+}
+
+.toolbar-view-controls {
+  flex: 1 1 auto;
   min-width: 0;
 }
 
@@ -3929,10 +4045,16 @@ onBeforeUnmount(() => {
   flex: 0 0 auto;
 }
 
+.rack-save-tooltip-wrap {
+  display: inline-flex;
+}
+
 .toolbar-zoom {
   flex: 0 0 auto;
   gap: 8px;
-  margin-left: 12px;
+  margin-left: 14px;
+  padding-left: 14px;
+  border-left: 1px solid #e5e7eb;
 }
 
 .toolbar-container :deep(.ant-btn),
@@ -4138,14 +4260,6 @@ onBeforeUnmount(() => {
 }
 
 /* 화면 배율 텍스트 */
-.zoom-label {
-  font-weight: bold;
-  color: #595959;
-  font-size: 13px;
-  line-height: 32px;
-  white-space: nowrap;
-}
-
 .zoom-input {
   width: 70px;
   text-align: center;
@@ -4153,7 +4267,7 @@ onBeforeUnmount(() => {
 }
 
 .zoom-slider-wrap {
-  width: 120px;
+  width: 144px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -4188,7 +4302,7 @@ onBeforeUnmount(() => {
 }
 
 .rack-list-summary-card :deep(.ant-card-body) {
-  padding: 12px 22px;
+  padding: 15px 24px;
 }
 
 .rack-list-summary-title {
@@ -4206,6 +4320,7 @@ onBeforeUnmount(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-wrap: wrap;
   gap: 16px;
   min-width: 0;
   width: 100%;
@@ -4240,7 +4355,7 @@ onBeforeUnmount(() => {
 
 .rack-list-summary-value {
   color: #0f172a;
-  font-size: 17px;
+  font-size: 19px;
   font-weight: 700;
   line-height: 1.25;
   white-space: nowrap;
@@ -4254,24 +4369,24 @@ onBeforeUnmount(() => {
 }
 
 .rack-list-summary-icon {
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
   border-radius: 8px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  flex: 0 0 32px;
+  flex: 0 0 36px;
   color: #1677ff;
   background: rgba(22, 119, 255, 0.09);
 }
 
 .rack-list-summary-icon :deep(.anticon) {
-  font-size: 16px;
+  font-size: 18px;
 }
 
 .rack-list-summary-rack-icon :deep(.rack-card-icon) {
-  width: 18px;
-  height: 22px;
+  width: 21px;
+  height: 25px;
 }
 
 .rack-list-summary-value-row {
@@ -4346,6 +4461,15 @@ onBeforeUnmount(() => {
 
 .rack-list-more-btn {
   color: #64748b !important;
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  padding: 0 !important;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
 }
 
 .rack-list-more-btn:hover {
@@ -4353,9 +4477,14 @@ onBeforeUnmount(() => {
   background: #f1f5f9 !important;
 }
 
+.rack-list-more-btn :deep(.anticon) {
+  font-size: 20px;
+  line-height: 1;
+}
+
 .rack-list-more-btn :deep(.anticon-more svg) {
-  width: 3em;
-  height: 3em;
+  width: 1em;
+  height: 1em;
 }
 
 .rack-list-card-match {
@@ -4513,7 +4642,13 @@ onBeforeUnmount(() => {
   white-space: nowrap;
 }
 
+.rack-list-card-footer > span:first-child {
+  flex: 0 0 auto;
+}
+
 .rack-list-card-location {
+  flex: 1 1 auto;
+  max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -4647,7 +4782,13 @@ onBeforeUnmount(() => {
   white-space: nowrap;
 }
 
+.rack-list-row-meta > span:first-child {
+  flex: 0 0 auto;
+}
+
 .rack-list-row-location {
+  flex: 1 1 auto;
+  max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -4769,8 +4910,9 @@ onBeforeUnmount(() => {
   position: sticky;
   top: 64px;
   align-self: flex-start;
-  height: fit-content;
-  max-height: none;
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 80px);
   overflow: visible;
   max-width: 100%;
   z-index: 20;
@@ -4794,11 +4936,15 @@ onBeforeUnmount(() => {
   border-color: rgba(0,0,0,0.06);
   box-shadow: 0 1px 2px rgba(0,0,0,0.06);
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  max-height: inherit;
+  min-height: 0;
 }
 
 .rack-side-pane-card :deep(.ant-card-head) {
-  position: sticky;
-  top: 0;
+  flex: 0 0 auto;
+  position: relative;
   z-index: 2;
   background: #fff;
   border-bottom-color: rgba(0, 0, 0, 0.06);
@@ -4807,7 +4953,8 @@ onBeforeUnmount(() => {
 .rack-side-pane-card :deep(.ant-card-body) {
   display: flex;
   flex-direction: column;
-  max-height: calc(100vh - 132px);
+  flex: 1 1 auto;
+  max-height: none;
   min-height: 0;
   overflow: hidden;
 }
@@ -5130,6 +5277,35 @@ onBeforeUnmount(() => {
   background: transparent;
 }
 
+.device-spec-number-wrap {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+}
+
+.device-spec-number-wrap :deep(.ant-input-number) {
+  flex: 1 1 auto;
+  min-width: 0;
+  width: 100%;
+}
+
+.device-spec-unit {
+  flex: 0 0 auto;
+  min-width: 36px;
+  height: 24px;
+  margin-left: 6px;
+  padding: 0 7px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background: #f8fafc;
+  color: #475569;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 22px;
+  text-align: center;
+}
+
 .device-memo-row-delete {
   justify-self: center;
 }
@@ -5235,8 +5411,7 @@ onBeforeUnmount(() => {
   flex-wrap: wrap;
   gap: 8px;
   flex: 0 0 auto;
-  position: sticky;
-  bottom: 0;
+  position: relative;
   z-index: 3;
   margin: 12px -12px -12px;
   padding: 12px;
@@ -5535,34 +5710,22 @@ onBeforeUnmount(() => {
 }
 
 .rack-header-action-btn {
-  width: 46px !important;
-  height: 46px !important;
+  width: 48px !important;
+  height: 42px !important;
   padding: 0 !important;
-  border-radius: 8px !important;
-  border-color: #e5e7eb !important;
-  color: #111827 !important;
-  background: #fff !important;
+  border-radius: 6px !important;
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
 }
 
 .rack-header-action-btn :deep(.anticon) {
-  font-size: 18px;
+  font-size: 20px;
 }
 
 .rack-header-action-btn:hover {
-  color: #1677ff !important;
-  border-color: #1677ff !important;
-}
-
-.rack-header-action-danger {
-  color: #ff4d4f !important;
-}
-
-.rack-header-action-danger:hover {
-  color: #ff4d4f !important;
-  border-color: #ff4d4f !important;
+  color: #1677ff;
+  border-color: #1677ff;
 }
 
 .rack-header-meta-row {
@@ -6176,8 +6339,8 @@ onBeforeUnmount(() => {
   background-color: #4a515a !important;
 }
 
-.rack-diagram-root.is-dark .zoom-label {
-  color: rgba(255, 255, 255, 0.85) !important;
+.rack-diagram-root.is-dark .toolbar-zoom {
+  border-left-color: #4a515a;
 }
 
 .rack-diagram-root.is-dark .rack-canvas {
@@ -6185,15 +6348,47 @@ onBeforeUnmount(() => {
   background: radial-gradient(circle, #232a33 0%, #1b2129 100%);
 }
 
+.rack-diagram-root.is-dark .rack-list-view {
+  background: #151b24;
+}
+
 .rack-diagram-root.is-dark .rack-list-card {
-  background: #1f2732;
-  border-color: #3a4654;
+  background: #1f2732 !important;
+  border-color: #3a4654 !important;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
+}
+
+.rack-diagram-root.is-dark :deep(.rack-list-card.ant-card) {
+  background: #1f2732 !important;
+  border-color: #3a4654 !important;
+}
+
+.rack-diagram-root.is-dark :deep(.rack-list-card.ant-card > .ant-card-body) {
+  background: transparent !important;
+}
+
+.rack-diagram-root.is-dark .rack-list-card:hover {
+  border-color: #4c93ff !important;
+  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
+}
+
+.rack-diagram-root.is-dark .rack-list-card :deep(.ant-card-body) {
+  color: rgba(255, 255, 255, 0.86);
 }
 
 .rack-diagram-root.is-dark .rack-list-summary-card {
-  background: #1f2732;
-  border-color: #3a4654;
-  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
+  background: #1f2732 !important;
+  border-color: #3a4654 !important;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
+}
+
+.rack-diagram-root.is-dark :deep(.rack-list-summary-card.ant-card) {
+  background: #1f2732 !important;
+  border-color: #3a4654 !important;
+}
+
+.rack-diagram-root.is-dark :deep(.rack-list-summary-card.ant-card > .ant-card-body) {
+  background: transparent !important;
 }
 
 .rack-diagram-root.is-dark .rack-list-summary-title,
@@ -6212,10 +6407,33 @@ onBeforeUnmount(() => {
 }
 
 .rack-diagram-root.is-dark .rack-list-summary-icon {
-  background: rgba(22, 119, 255, 0.16);
+  background: rgba(22, 119, 255, 0.20);
   color: #8cc8ff;
 }
 
+.rack-diagram-root.is-dark .rack-list-summary-progress :deep(.ant-progress-inner),
+.rack-diagram-root.is-dark .rack-list-progress :deep(.ant-progress-inner),
+.rack-diagram-root.is-dark .rack-list-row-progress :deep(.ant-progress-inner) {
+  background-color: #334155;
+}
+
+.rack-diagram-root.is-dark .rack-list-view-switch :deep(.ant-radio-button-wrapper) {
+  background: #1f2732;
+  border-color: #3a4654;
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.rack-diagram-root.is-dark .rack-list-view-switch :deep(.ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked):hover) {
+  color: #8cc8ff;
+  border-color: #4c93ff;
+}
+
+.rack-diagram-root.is-dark .rack-list-view-switch :deep(.ant-radio-button-wrapper-checked) {
+  background: #1677ff;
+  border-color: #1677ff;
+  color: #fff;
+}
+
 .rack-diagram-root.is-dark .rack-list-summary-metric + .rack-list-summary-metric {
   border-left-color: #334155;
 }
@@ -6235,22 +6453,22 @@ onBeforeUnmount(() => {
 }
 
 .rack-diagram-root.is-dark .rack-list-card-title {
-  color: rgba(255, 255, 255, 0.9);
+  color: rgba(255, 255, 255, 0.94);
 }
 
 .rack-diagram-root.is-dark .rack-list-card-rack-icon {
-  color: rgba(255, 255, 255, 0.9);
+  color: rgba(255, 255, 255, 0.82);
 }
 
 .rack-diagram-root.is-dark .rack-list-card-stat-label,
 .rack-diagram-root.is-dark .rack-list-card-footer,
 .rack-diagram-root.is-dark .rack-list-card-usage-detail,
 .rack-diagram-root.is-dark .rack-list-card-extra {
-  color: rgba(255, 255, 255, 0.65);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .rack-diagram-root.is-dark .rack-list-card-usage {
-  color: rgba(255, 255, 255, 0.9);
+  color: rgba(255, 255, 255, 0.82);
 }
 
 .rack-diagram-root.is-dark .rack-list-card-stat strong {
@@ -6264,7 +6482,7 @@ onBeforeUnmount(() => {
 }
 
 .rack-diagram-root.is-dark .rack-list-add-card {
-  background: rgba(31, 39, 50, 0.7);
+  background: rgba(31, 39, 50, 0.72);
   border-color: #475569;
   color: rgba(255, 255, 255, 0.86);
 }
@@ -6281,8 +6499,8 @@ onBeforeUnmount(() => {
 }
 
 .rack-diagram-root.is-dark .rack-list-row {
-  background: #1f2732;
-  border-color: #3a4654;
+  background: #1f2732 !important;
+  border-color: #3a4654 !important;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
 }
 
@@ -6298,18 +6516,18 @@ onBeforeUnmount(() => {
 .rack-diagram-root.is-dark .rack-list-row-title,
 .rack-diagram-root.is-dark .rack-list-row-usage strong,
 .rack-diagram-root.is-dark .rack-list-row-stats strong {
-  color: rgba(255, 255, 255, 0.92);
+  color: rgba(255, 255, 255, 0.94);
 }
 
 .rack-diagram-root.is-dark .rack-list-row-icon {
-  color: rgba(255, 255, 255, 0.9);
+  color: rgba(255, 255, 255, 0.82);
 }
 
 .rack-diagram-root.is-dark .rack-list-row-meta,
 .rack-diagram-root.is-dark .rack-list-row-label,
 .rack-diagram-root.is-dark .rack-list-row-used,
 .rack-diagram-root.is-dark .rack-list-row-stats {
-  color: rgba(255, 255, 255, 0.65);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .rack-diagram-root.is-dark .rack-list-add-row {
@@ -6334,6 +6552,11 @@ onBeforeUnmount(() => {
 
 .rack-diagram-root.is-dark .rack-side-pane-card :deep(.ant-card-head) {
   background: #1f2732;
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
+.rack-diagram-root.is-dark .rack-side-pane-card :deep(.ant-card-head-title) {
+  color: rgba(255, 255, 255, 0.92);
 }
 
 .rack-diagram-root.is-dark .rack-side-pane-card {
@@ -6342,6 +6565,10 @@ onBeforeUnmount(() => {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
 }
 
+.rack-diagram-root.is-dark .rack-side-pane-card :deep(.ant-card-body) {
+  background: #151b24;
+}
+
 .rack-diagram-root.is-dark .device-summary-header,
 .rack-diagram-root.is-dark .device-info-section,
 .rack-diagram-root.is-dark .device-info-actions,
@@ -6352,6 +6579,73 @@ onBeforeUnmount(() => {
   border-color: rgba(255, 255, 255, 0.08);
 }
 
+.rack-diagram-root.is-dark .device-summary-title,
+.rack-diagram-root.is-dark .device-info-section-title {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.rack-diagram-root.is-dark .device-summary-subtitle {
+  color: rgba(255, 255, 255, 0.66);
+}
+
+.rack-diagram-root.is-dark .device-status-inline {
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.rack-diagram-root.is-dark .device-info-tabs :deep(.ant-tabs-nav) {
+  background: transparent;
+}
+
+.rack-diagram-root.is-dark .device-info-tabs :deep(.ant-tabs-tab) {
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.rack-diagram-root.is-dark .device-info-tabs :deep(.ant-tabs-tab:hover) {
+  color: #8cc8ff;
+}
+
+.rack-diagram-root.is-dark .device-info-tabs :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+  color: #4c93ff;
+}
+
+.rack-diagram-root.is-dark .device-info-tabs :deep(.ant-tabs-ink-bar) {
+  background: #4c93ff;
+}
+
+.rack-diagram-root.is-dark .device-info-tabs :deep(.ant-tabs-content-holder),
+.rack-diagram-root.is-dark .device-info-tabs :deep(.ant-tabs-content),
+.rack-diagram-root.is-dark .device-info-tabs :deep(.ant-tabs-tabpane) {
+  background: #151b24;
+}
+
+.rack-diagram-root.is-dark .rack-side-pane :deep(.ant-input),
+.rack-diagram-root.is-dark .rack-side-pane :deep(.ant-input-number),
+.rack-diagram-root.is-dark .rack-side-pane :deep(.ant-select-selector),
+.rack-diagram-root.is-dark .rack-side-pane :deep(.ant-picker),
+.rack-diagram-root.is-dark .rack-side-pane :deep(textarea.ant-input) {
+  background: #17202b !important;
+  border-color: #465366 !important;
+  color: rgba(255, 255, 255, 0.86) !important;
+}
+
+.rack-diagram-root.is-dark .rack-side-pane :deep(.ant-input::placeholder),
+.rack-diagram-root.is-dark .rack-side-pane :deep(textarea.ant-input::placeholder) {
+  color: rgba(255, 255, 255, 0.38) !important;
+}
+
+.rack-diagram-root.is-dark .rack-side-pane :deep(.ant-empty-description) {
+  color: rgba(255, 255, 255, 0.58);
+}
+
+.rack-diagram-root.is-dark .device-section-edit-btn {
+  color: rgba(255, 255, 255, 0.62) !important;
+}
+
+.rack-diagram-root.is-dark .device-section-edit-btn:hover {
+  color: #8cc8ff !important;
+  background: rgba(76, 147, 255, 0.12) !important;
+}
+
 .rack-diagram-root.is-dark .device-memo-table-head,
 .rack-diagram-root.is-dark .device-inline-row > label,
 .rack-diagram-root.is-dark .device-info-table-row > div:first-child {
@@ -6367,6 +6661,12 @@ onBeforeUnmount(() => {
   color: rgba(255, 255, 255, 0.82);
 }
 
+.rack-diagram-root.is-dark .device-spec-unit {
+  background: #263244;
+  border-color: #465366;
+  color: rgba(255, 255, 255, 0.72);
+}
+
 .rack-diagram-root.is-dark .device-linked-asset-ip {
   color: rgba(255, 255, 255, 0.62);
 }
@@ -6390,6 +6690,32 @@ onBeforeUnmount(() => {
   border-color: rgba(255, 255, 255, 0.08);
 }
 
+.rack-diagram-root.is-dark .device-link-group-title {
+  color: rgba(255, 255, 255, 0.66);
+}
+
+.rack-diagram-root.is-dark .device-link-button {
+  border-color: rgba(255, 255, 255, 0.08) !important;
+  background: rgba(15, 23, 42, 0.14) !important;
+  color: rgba(255, 255, 255, 0.80) !important;
+}
+
+.rack-diagram-root.is-dark .device-link-button:hover,
+.rack-diagram-root.is-dark .device-link-button:focus {
+  border-color: rgba(76, 147, 255, 0.34) !important;
+  background: rgba(76, 147, 255, 0.14) !important;
+  color: #8cc8ff !important;
+}
+
+.rack-diagram-root.is-dark .device-link-button-arrow {
+  color: rgba(255, 255, 255, 0.66);
+}
+
+.rack-diagram-root.is-dark .device-link-button:hover .device-link-button-arrow,
+.rack-diagram-root.is-dark .device-link-button:focus .device-link-button-arrow {
+  color: #8cc8ff;
+}
+
 .rack-diagram-root.is-dark .device-info-close-btn {
   color: rgba(255, 255, 255, 0.7) !important;
 }
@@ -6399,23 +6725,310 @@ onBeforeUnmount(() => {
   background: #273244 !important;
 }
 
+.rack-diagram-root.is-dark .rack-wrapper {
+  background: #1f2732;
+  border-color: #3a4654;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.26);
+}
+
+.rack-diagram-root.is-dark .rack-header {
+  background: #202938;
+  border-color: #3a4654;
+  border-bottom-color: #4c93ff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
+}
+
+.rack-diagram-root.is-dark .rack-header-title {
+  color: rgba(255, 255, 255, 0.94);
+}
+
+.rack-diagram-root.is-dark .rack-header-meta-row,
+.rack-diagram-root.is-dark .rack-header-meta-divider {
+  color: rgba(255, 255, 255, 0.64);
+}
+
+.rack-diagram-root.is-dark .rack-header-meta-item :deep(.anticon) {
+  color: rgba(255, 255, 255, 0.52);
+}
+
+.rack-diagram-root.is-dark .rack-header-action-separator {
+  background: #3a4654;
+}
+
+.rack-diagram-root.is-dark .rack-header-action-btn {
+  background: #1b2430;
+  border-color: #465366;
+  color: rgba(255, 255, 255, 0.82);
+}
+
+.rack-diagram-root.is-dark .rack-header-action-btn:hover {
+  color: #8cc8ff;
+  border-color: #4c93ff;
+}
+
+.rack-diagram-root.is-dark .rack-body {
+  background: #1b2430;
+  border-color: #3a4654;
+}
+
+.rack-diagram-root.is-dark .rack-ruler {
+  background: #202938;
+  border-right-color: #3a4654;
+}
+
+.rack-diagram-root.is-dark .ruler-number {
+  color: rgba(255, 255, 255, 0.58);
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
+.rack-diagram-root.is-dark .ruler-number:first-child {
+  border-top-color: rgba(255, 255, 255, 0.08);
+}
+
+.rack-diagram-root.is-dark .ruler-number-selected {
+  color: #8cc8ff;
+  background: rgba(22, 119, 255, 0.20);
+  border-color: #4c93ff;
+}
+
+.rack-diagram-root.is-dark .rack-frame {
+  background: #17202b !important;
+  border-color: #3a4654 !important;
+}
+
+.rack-diagram-root.is-dark .rack-item {
+  background: #17202b;
+  border-bottom-color: #334155;
+}
+
+.rack-diagram-root.is-dark .rack-item::after {
+  background: #334155;
+}
+
+.rack-diagram-root.is-dark .rack-item:not(.rack-item-selected) {
+  box-shadow: inset 44px 0 0 rgba(31, 41, 55, 0.42);
+}
+
+.rack-diagram-root.is-dark .rack-item-hoverable:hover {
+  background: rgba(76, 147, 255, 0.08);
+}
+
+.rack-diagram-root.is-dark .rack-item-selected,
+.rack-diagram-root.is-dark .rack-item-selected:hover {
+  border-color: #4c93ff;
+  background: rgba(22, 119, 255, 0.20);
+  box-shadow: inset 44px 0 0 rgba(22, 119, 255, 0.20);
+}
+
+.rack-diagram-root.is-dark .device-content {
+  background: linear-gradient(90deg, #202938 0, #202938 74px, #17202b 74px, #17202b 100%) !important;
+}
+
+.rack-diagram-root.is-dark .device-content-selected,
+.rack-diagram-root.is-dark .device-content-selected:hover {
+  background: linear-gradient(90deg, rgba(22, 119, 255, 0.24) 0, rgba(22, 119, 255, 0.24) 74px, rgba(22, 119, 255, 0.14) 74px, rgba(22, 119, 255, 0.14) 100%) !important;
+}
+
+.rack-diagram-root.is-dark .gap-content {
+  background: repeating-linear-gradient(
+    45deg,
+    #17202b,
+    #17202b 10px,
+    #1f2a38 10px,
+    #1f2a38 20px
+  ) !important;
+  color: rgba(255, 255, 255, 0.68);
+  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.24);
+}
+
+.rack-diagram-root.is-dark .gap-content:hover {
+  background: #202938 !important;
+  color: #8cc8ff;
+}
+
+.rack-diagram-root.is-dark .pattern-blank {
+  background-image: repeating-linear-gradient(-45deg, #1f2a38 0, #1f2a38 6px, #17202b 6px, #17202b 12px);
+}
+
+.rack-diagram-root.is-dark .device-top-line {
+  opacity: 0.95;
+}
+
+.rack-diagram-root.is-dark .device-icon-overlay {
+  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
+}
+
+.rack-diagram-root.is-dark .device-pattern :deep(.panel-shell) {
+  fill: #263241;
+  stroke: #4a5a6d;
+}
+
+.rack-diagram-root.is-dark .device-pattern :deep(.detail-fill),
+.rack-diagram-root.is-dark .device-pattern :deep(.bay),
+.rack-diagram-root.is-dark .device-pattern :deep(.drive),
+.rack-diagram-root.is-dark .device-pattern :deep(.screen),
+.rack-diagram-root.is-dark .device-pattern :deep(.blade-slot) {
+  fill: #607086;
+  stroke: #7f8da0;
+}
+
+.rack-diagram-root.is-dark .device-pattern :deep(.detail-soft) {
+  fill: #334155;
+}
+
+.rack-diagram-root.is-dark .device-pattern :deep(.thin),
+.rack-diagram-root.is-dark .device-pattern :deep(.vent),
+.rack-diagram-root.is-dark .device-pattern :deep(.line),
+.rack-diagram-root.is-dark .device-pattern :deep(.block),
+.rack-diagram-root.is-dark .device-pattern :deep(.light),
+.rack-diagram-root.is-dark .device-pattern :deep(.detail-mid) {
+  fill: #74849a;
+}
+
+.rack-diagram-root.is-dark .device-pattern :deep(.port),
+.rack-diagram-root.is-dark .device-pattern :deep(.jack),
+.rack-diagram-root.is-dark .device-pattern :deep(.sfp),
+.rack-diagram-root.is-dark .device-pattern :deep(.key),
+.rack-diagram-root.is-dark .device-pattern :deep(.port-shell),
+.rack-diagram-root.is-dark .device-pattern :deep(.outlet-shell),
+.rack-diagram-root.is-dark .device-pattern :deep(.plug-shell),
+.rack-diagram-root.is-dark .device-pattern :deep(.outlet) {
+  fill: #202938;
+  stroke: #8b9bb0;
+}
+
+.rack-diagram-root.is-dark .device-pattern :deep(.hole),
+.rack-diagram-root.is-dark .device-pattern :deep(.port-hole),
+.rack-diagram-root.is-dark .device-pattern :deep(.detail-dark),
+.rack-diagram-root.is-dark .device-pattern :deep(.battery) {
+  fill: #cbd5e1;
+}
+
+.rack-diagram-root.is-dark .device-pattern :deep(.dot),
+.rack-diagram-root.is-dark .device-pattern :deep(.plug-slot) {
+  fill: #cbd5e1;
+}
+
+.rack-diagram-root.is-dark .device-pattern :deep(.ring),
+.rack-diagram-root.is-dark .device-pattern :deep(.fan),
+.rack-diagram-root.is-dark .device-pattern :deep(.fan-ring),
+.rack-diagram-root.is-dark .device-pattern :deep(.stroke),
+.rack-diagram-root.is-dark .device-pattern :deep(.fan-line),
+.rack-diagram-root.is-dark .device-pattern :deep(.detail-line) {
+  stroke: #94a3b8;
+}
+
+.rack-diagram-root.is-dark .tag-text {
+  color: rgba(255, 255, 255, 0.92);
+}
+
 .rack-diagram-root.is-dark .tag-content {
-  background: rgba(15, 23, 42, 0.52);
+  background: rgba(15, 23, 42, 0.72);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
 }
 
+@media (min-width: 981px) and (max-width: 1640px) {
+  .rack-list-summary-card :deep(.ant-card-body) {
+    padding: 18px 24px;
+  }
+
+  .rack-list-summary-metrics {
+    display: grid;
+    grid-template-columns: 100px repeat(2, minmax(180px, 1fr));
+    align-items: center;
+    gap: 16px 20px;
+  }
+
+  .rack-list-summary-title {
+    grid-row: 1 / span 3;
+    align-self: stretch;
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+    padding-right: 18px;
+    margin-right: 0;
+  }
+
+  .rack-list-summary-metric {
+    min-width: 0;
+    width: 100%;
+    padding: 0;
+    border-left: 0 !important;
+  }
+
+  .rack-list-summary-metric:nth-of-type(4),
+  .rack-list-summary-metric:nth-of-type(5) {
+    min-width: 0;
+  }
+
+  .rack-list-summary-metric:nth-of-type(6) {
+    grid-column: 2 / 3;
+  }
+
+  .rack-list-card-footer {
+    gap: 10px;
+  }
+
+  .rack-list-card-location {
+    max-width: 180px;
+  }
+
+  .rack-list-row {
+    grid-template-columns: minmax(0, 1fr) 56px;
+    align-items: start;
+    gap: 12px 16px;
+  }
+
+  .rack-list-row-main {
+    grid-column: 1 / 2;
+    min-width: 0;
+  }
+
+  .rack-list-row-actions {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+    align-self: start;
+    min-width: 56px;
+  }
+
+  .rack-list-row-usage,
+  .rack-list-row-stats {
+    grid-column: 1 / 3;
+  }
+
+  .rack-list-row-usage {
+    grid-template-columns: auto auto minmax(120px, 1fr) auto;
+    max-width: 100%;
+  }
+
+  .rack-list-row-stats {
+    flex-direction: row;
+    gap: 18px;
+  }
+
+  .rack-list-row-title {
+    max-width: min(420px, 100%);
+  }
+
+  .rack-list-row-location {
+    max-width: 360px;
+  }
+}
+
 @media (max-width: 980px) {
   .rack-list-grid {
     grid-template-columns: 1fr;
   }
 
   .rack-list-summary-metrics {
+    display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
     row-gap: 8px;
   }
 
   .rack-list-summary-title {
+    grid-row: auto;
     flex: 1 0 100%;
     border-right: 0;
     padding-right: 0;

From ae559845063bda8cee30297dd3986085dc8f1fce Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Fri, 3 Jul 2026 11:01:50 +0900
Subject: [PATCH 16/17] =?UTF-8?q?[Mold][=EB=9E=99=20=EC=8B=9C=EA=B0=81?=
 =?UTF-8?q?=ED=99=94]=20=EB=B0=B1=EC=95=A4=EB=93=9C=20=EA=B2=80=EC=A6=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../main/java/com/cloud/rack/RackLayoutDao.java | 17 +++++++++++++++++
 .../java/com/cloud/rack/RackLayoutDaoImpl.java  | 17 +++++++++++++++++
 .../com/cloud/rack/RackLayoutManagerImpl.java   | 17 +++++++++++++++++
 .../java/com/cloud/rack/RackLayoutService.java  | 17 +++++++++++++++++
 .../main/java/com/cloud/rack/RackLayoutVO.java  | 17 +++++++++++++++++
 .../command/admin/rack/ListRackLayoutsCmd.java  | 17 +++++++++++++++++
 .../command/admin/rack/UpdateRackLayoutCmd.java | 17 +++++++++++++++++
 .../api/response/RackLayoutResponse.java        | 17 +++++++++++++++++
 8 files changed, 136 insertions(+)

diff --git a/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutDao.java b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutDao.java
index 6985feb90346..6a16513b80bb 100644
--- a/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutDao.java
+++ b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutDao.java
@@ -1,3 +1,20 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
 package com.cloud.rack;
 
 import com.cloud.utils.db.GenericDao;
diff --git a/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutDaoImpl.java b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutDaoImpl.java
index db46e01ed7aa..609a7be87dc4 100644
--- a/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutDaoImpl.java
+++ b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutDaoImpl.java
@@ -1,3 +1,20 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
 package com.cloud.rack;
 
 import org.springframework.stereotype.Component;
diff --git a/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutManagerImpl.java b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutManagerImpl.java
index acca31279f1f..dcaeb4594d9b 100644
--- a/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutManagerImpl.java
+++ b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutManagerImpl.java
@@ -1,3 +1,20 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
 package com.cloud.rack;
 
 import java.util.ArrayList;
diff --git a/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutService.java b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutService.java
index 259c4089ffdc..7e069d92e96d 100644
--- a/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutService.java
+++ b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutService.java
@@ -1,3 +1,20 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
 package com.cloud.rack;
 
 import org.apache.cloudstack.api.command.admin.rack.ListRackLayoutsCmd;
diff --git a/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutVO.java b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutVO.java
index aaa26fc831ae..c3873b9e786f 100644
--- a/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutVO.java
+++ b/plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutVO.java
@@ -1,3 +1,20 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
 package com.cloud.rack;
 
 import java.util.Date;
diff --git a/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/command/admin/rack/ListRackLayoutsCmd.java b/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/command/admin/rack/ListRackLayoutsCmd.java
index bbcde6a03786..c811fc4e41f5 100644
--- a/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/command/admin/rack/ListRackLayoutsCmd.java
+++ b/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/command/admin/rack/ListRackLayoutsCmd.java
@@ -1,3 +1,20 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
 package org.apache.cloudstack.api.command.admin.rack;
 
 import javax.inject.Inject;
diff --git a/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/command/admin/rack/UpdateRackLayoutCmd.java b/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/command/admin/rack/UpdateRackLayoutCmd.java
index ec0281cc68d8..a77afd562938 100644
--- a/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/command/admin/rack/UpdateRackLayoutCmd.java
+++ b/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/command/admin/rack/UpdateRackLayoutCmd.java
@@ -1,3 +1,20 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
 package org.apache.cloudstack.api.command.admin.rack;
 
 import javax.inject.Inject;
diff --git a/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/response/RackLayoutResponse.java b/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/response/RackLayoutResponse.java
index 136f7f06aca0..1c354ab65eaa 100644
--- a/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/response/RackLayoutResponse.java
+++ b/plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/response/RackLayoutResponse.java
@@ -1,3 +1,20 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
 package org.apache.cloudstack.api.response;
 
 import org.apache.cloudstack.api.ApiConstants;

From 44af06a427ff446186d5bb9d376460657aee74d6 Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Fri, 3 Jul 2026 11:19:02 +0900
Subject: [PATCH 17/17] =?UTF-8?q?[Mold][=EB=9E=99=20=EC=8B=9C=EA=B0=81?=
 =?UTF-8?q?=ED=99=94]=20=EC=83=98=ED=94=8C=20=EA=B0=80=EC=83=81=EB=A8=B8?=
 =?UTF-8?q?=EC=8B=A0=20=EB=AA=A8=EB=93=9C=20false?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/views/infra/zone/RackDiagramTab.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/views/infra/zone/RackDiagramTab.vue b/ui/src/views/infra/zone/RackDiagramTab.vue
index c1e99780b673..4ccf6135e670 100644
--- a/ui/src/views/infra/zone/RackDiagramTab.vue
+++ b/ui/src/views/infra/zone/RackDiagramTab.vue
@@ -2730,8 +2730,8 @@ const removeQuickLinkRow = (index) => {
   quickLinkRows.value.splice(index, 1)
   if (!quickLinkRows.value.length) quickLinkRows.value.push(makeQuickLinkRow())
 }
-// 샘플 VM 목록
-const ENABLE_VM_FALLBACK_MOCK = true
+// 샘플(테스트) VM(가상머신) 목록
+const ENABLE_VM_FALLBACK_MOCK = false
 const HOST_ACTIVE_VM_STATES = new Set(['running', 'starting', 'stopping', 'migrating'])
 
 const buildVmMockList = (hostId, hostName = 'sample') => {