From f0f6e9ffeeedc6d7ede61ce197cbe99fa91b3c3d Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Thu, 16 Jul 2026 14:30:29 +0900
Subject: [PATCH 1/5] =?UTF-8?q?[Mold][=EB=9E=99=20=EC=8B=9C=EA=B0=81?=
 =?UTF-8?q?=ED=99=94]=201=EC=B0=A8=20UX=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F?=
 =?UTF-8?q?=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?=
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        |  59 ++-
 ui/src/views/infra/zone/RackDiagramTab.vue | 478 +++++++++++++++++----
 4 files changed, 466 insertions(+), 79 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 1b8302865a2b..1d7b798cc57e 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -5344,5 +5344,7 @@
 "rackDiagram.totalFreeU": "Free U",
 "rackDiagram.cardView": "Card",
 "rackDiagram.listView": "List",
-"rackDiagram.countSuffix": ""
+"rackDiagram.countSuffix": "",
+"rackDiagram.expandView": "Expand rack visualization",
+"rackDiagram.restoreSplitView": "Show summary panel"
 }
diff --git a/ui/public/locales/ko_KR.json b/ui/public/locales/ko_KR.json
index 6957a06fdd14..34835632c71a 100644
--- a/ui/public/locales/ko_KR.json
+++ b/ui/public/locales/ko_KR.json
@@ -5347,5 +5347,7 @@
 "rackDiagram.totalFreeU": "\uc5ec\uc720 U",
 "rackDiagram.cardView": "\uce74\ub4dc\ud615",
 "rackDiagram.listView": "\ubaa9\ub85d\ud615",
-"rackDiagram.countSuffix": "\uac1c"
+"rackDiagram.countSuffix": "\uac1c",
+"rackDiagram.expandView": "\ub799 \uc2dc\uac01\ud654 \ud655\uc7a5",
+"rackDiagram.restoreSplitView": "\uc694\uc57d \uc601\uc5ed \ud45c\uc2dc"
 }
diff --git a/ui/src/views/infra/InfraSummary.vue b/ui/src/views/infra/InfraSummary.vue
index 094c17c5608a..c6a84adf2bf4 100644
--- a/ui/src/views/infra/InfraSummary.vue
+++ b/ui/src/views/infra/InfraSummary.vue
@@ -148,8 +148,8 @@
       </a-card>
     </a-col>
     <a-col :xs="24">
-      <div class="infra-summary-layout">
-        <div class="summary-cards-pane">
+      <div class="infra-summary-layout" :class="{ 'is-rack-expanded': rackVisualizationExpanded }">
+        <div class="summary-cards-pane" :aria-hidden="rackVisualizationExpanded">
           <div
             v-for="group in visibleSummaryGroups"
             :key="group.key"
@@ -181,8 +181,10 @@
         </div>
         <div class="rack-visualization-pane">
           <a-card :bordered="false" class="rack-visualization-card">
-            <template #title>랙 시각화</template>
-            <rack-diagram-tab />
+            <template #title>{{ $t('rackDiagram.title') }}</template>
+            <rack-diagram-tab
+              @toggle-expand="rackVisualizationExpanded = $event"
+            />
           </a-card>
         </div>
       </div>
@@ -211,6 +213,7 @@ export default {
   data () {
     return {
       loading: true,
+      rackVisualizationExpanded: false,
       routes: {},
       sections: ['zones', 'pods', 'clusters', 'hosts', 'storagepools', 'imagestores', 'objectstores', 'systemvms', 'routers', 'cpusockets', 'managementservers', 'alerts', 'ilbvms', 'metrics'],
       summaryGroups: [
@@ -401,15 +404,46 @@ export default {
     display: flex;
     align-items: flex-start;
     gap: 12px;
+    transition: gap 0.28s cubic-bezier(0.22, 1, 0.36, 1);
   }
   .summary-cards-pane {
     width: 34%;
+    max-width: 34%;
     flex: 0 0 34%;
+    max-height: 5000px;
     padding: 10px;
+    overflow: hidden;
     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);
+    transition:
+      width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+      max-width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+      flex-basis 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+      max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+      padding 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+      opacity 0.2s ease,
+      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+      visibility 0s linear;
+  }
+
+  .infra-summary-layout.is-rack-expanded {
+    gap: 0;
+  }
+
+  .infra-summary-layout.is-rack-expanded .summary-cards-pane {
+    width: 0;
+    max-width: 0;
+    flex: 0 0 0;
+    max-height: 0;
+    padding: 0;
+    border-width: 0;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transform: translateX(-16px);
+    transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, 0s, 0.28s;
   }
   .summary-group {
     padding: 10px 10px 0;
@@ -481,6 +515,14 @@ export default {
     width: 66%;
     flex: 0 0 66%;
     min-width: 320px;
+    transition:
+      width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+      flex-basis 0.28s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  .infra-summary-layout.is-rack-expanded .rack-visualization-pane {
+    width: 100%;
+    flex: 1 1 100%;
+    min-width: 0;
   }
   .chart-card-inner {
     text-align: center;
@@ -528,10 +570,19 @@ export default {
     .summary-cards-pane,
     .rack-visualization-pane {
       width: 100%;
+      max-width: 100%;
       flex: 1 1 100%;
       min-width: 0;
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .infra-summary-layout,
+    .summary-cards-pane,
+    .rack-visualization-pane {
+      transition: none;
+    }
+  }
   .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 4ccf6135e670..fe589d842e48 100644
--- a/ui/src/views/infra/zone/RackDiagramTab.vue
+++ b/ui/src/views/infra/zone/RackDiagramTab.vue
@@ -91,13 +91,33 @@
               {{ t('label.actions') }}
             </a-button>
           </a-dropdown>
+          <span class="toolbar-expand-divider" aria-hidden="true"></span>
+          <a-tooltip :title="t(isExpanded ? 'rackDiagram.restoreSplitView' : 'rackDiagram.expandView')">
+            <a-button
+              type="default"
+              class="toolbar-expand-btn"
+              :aria-label="t(isExpanded ? 'rackDiagram.restoreSplitView' : 'rackDiagram.expandView')"
+              :aria-pressed="isExpanded"
+              @click="toggleExpandedView"
+            >
+              <template #icon>
+                <CompressOutlined v-if="isExpanded" />
+                <FullscreenOutlined v-else />
+              </template>
+            </a-button>
+          </a-tooltip>
         </a-space>
       </div>
 
     </div>
     <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-if="!parsedRacks.length" class="rack-list-grid rack-list-grid--empty">
+          <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 v-else>
           <a-card class="rack-list-summary-card" :bordered="false">
             <div class="rack-list-summary-metrics">
@@ -332,7 +352,10 @@
         </template>
       </div>
       <div v-else class="rack-canvas">
-        <div class="rack-detail-layout" ref="rackDetailLayoutRef">
+        <div
+          class="rack-detail-layout"
+          ref="rackDetailLayoutRef"
+        >
         <div class="rack-main-pane" ref="rackMainPaneRef">
         <div class="rack-zoom-wrapper" :style="zoomWrapperStyle">
 
@@ -346,14 +369,14 @@
                   <div class="rack-header-title-group">
                     <a-tooltip
                       placement="top"
-                      :title="getOverflowTitle(`detail-${rIndex}`, `${rack.name} (${rack.totalHeight}U)`)"
+                      :title="getOverflowTitle(`detail-${rIndex}`, rack.name)"
                     >
                       <span
                         class="rack-header-title"
                         :ref="setOverflowTitleRef(`detail-${rIndex}`)"
                         @mouseenter="updateOverflowTitle(`detail-${rIndex}`)"
                       >
-                        {{ rack.name }} ({{ rack.totalHeight }}U)
+                        {{ rack.name }}
                       </span>
                     </a-tooltip>
                   </div>
@@ -443,7 +466,13 @@
                     <div
                       v-else
                       class="device-content"
-                      :class="[`device-${item.type}`, { 'device-content-selected': isSelectedItem(rIndex, iIndex) }]"
+                      :class="[
+                        `device-${item.type}`,
+                        {
+                          'device-content-selected': isSelectedItem(rIndex, iIndex),
+                          'device-content-compact': Number(item.height) === 1
+                        }
+                      ]"
                       draggable="true"
                       @dragstart="onDragStart(rIndex, iIndex)"
                       @click="selectDevice(rIndex, iIndex)"
@@ -532,6 +561,12 @@
           </div>
         </div>
         </div>
+        <transition
+          name="rack-inspector"
+          @before-enter="handleSidePaneBeforeEnter"
+          @after-enter="handleSidePaneAfterEnter"
+          @after-leave="handleSidePaneAfterLeave"
+        >
         <div
           v-if="selectedDevice"
           ref="rackSidePaneSlotRef"
@@ -541,8 +576,7 @@
             ref="rackSidePaneRef"
             class="rack-side-pane"
             :class="{
-              'is-fixed': sidePaneMode === 'fixed',
-              'is-bottom': sidePaneMode === 'bottom'
+              'is-fixed': sidePaneMode === 'fixed'
             }"
             :style="sidePaneInlineStyle"
           >
@@ -694,16 +728,18 @@
                       </div>
                       <div v-for="(row, idx) in visibleDeviceSpecRows" :key="row.id" class="device-memo-table-row">
                         <template v-if="activeInlineField === 'specs'">
-                          <a-auto-complete
+                          <a-select
                             v-model:value="row.key"
                             :options="deviceSpecKeyOptions"
+                            :show-search="true"
+                            option-filter-prop="value"
                             :filter-option="filterDeviceSpecKeyOption"
                             size="small"
                             :placeholder="t('rackDiagram.deviceSpecKeyPlaceholder')"
                             style="width: 100%"
                             @click.stop
+                            @mousedown.stop
                             @change="markInlineDraftChanged"
-                            @select="markInlineDraftChanged"
                             @keydown.enter.stop="finishInlineEdit"
                           />
                           <span v-if="isNumericDeviceSpecRow(row)" class="device-spec-number-wrap" @click.stop @mousedown.stop>
@@ -870,6 +906,7 @@
           </a-card>
           </div>
         </div>
+        </transition>
         </div>
       </div>
     </a-spin>
@@ -1110,9 +1147,11 @@
             >
               <template #bodyCell="{ column, record, index }">
                 <template v-if="column.key === 'key'">
-                  <a-auto-complete
+                  <a-select
                     v-model:value="record.key"
                     :options="deviceSpecKeyOptions"
+                    :show-search="true"
+                    option-filter-prop="value"
                     :filter-option="filterDeviceSpecKeyOption"
                     :placeholder="t('rackDiagram.deviceSpecKeyPlaceholder')"
                     style="width: 100%"
@@ -1241,6 +1280,7 @@
         :placeholder="t('rackDiagram.selectHost')"
         allow-clear
         style="width: 100%"
+        @change="handleAssetLinkDraftChange"
       />
     </a-modal>
     <a-modal
@@ -1326,35 +1366,60 @@ import {
   PieChartOutlined,
   DatabaseOutlined,
   InboxOutlined,
-  DownOutlined
+  DownOutlined,
+  FullscreenOutlined,
+  CompressOutlined
 } from '@ant-design/icons-vue'
 
 // 전역 상태
 const loading = ref(false)
 const saving = ref(false)
+const isExpanded = ref(false)
 const zoomLevel = ref(0.65)
 const AUTO_ZOOM_MIN = 0.65
 const NORMAL_ZOOM_LEVEL = 0.96
 const AUTO_ZOOM_MAX = NORMAL_ZOOM_LEVEL
+const INSPECTOR_ZOOM_MIN = NORMAL_ZOOM_LEVEL * 0.4
+const INSPECTOR_FIT_GUTTER = 8
 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 sidePaneMode = ref('static') // static | fixed
 const sidePaneLeft = ref(0)
 const sidePaneWidth = ref(0)
 const SIDE_PANE_TOP = 64
 let resizeDebounceTimer = null
 let zoomRafId = 0
 let zoomApplyRafId = 0
+let zoomTransitionRafId = 0
+let rackMainPaneResizeObserver = null
+let expandedLayoutZoomTimer = null
 const router = useRouter()
 const store = useStore()
-const { proxy } = getCurrentInstance()
+const { proxy, emit } = getCurrentInstance()
 const t = (key, args) => proxy?.$t ? proxy.$t(key, args) : key
 const isDarkMode = computed(() => !!store.getters.darkMode)
 const RACK_UNIT_HEIGHT = 52
 
+const toggleExpandedView = () => {
+  isExpanded.value = !isExpanded.value
+  emit('toggle-expand', isExpanded.value)
+
+  if (expandedLayoutZoomTimer) clearTimeout(expandedLayoutZoomTimer)
+  nextTick(() => {
+    // 요약 패널 전환이 끝난 실제 너비를 기준으로 상세 랙 배율을 다시 맞춥니다.
+    expandedLayoutZoomTimer = setTimeout(() => {
+      expandedLayoutZoomTimer = null
+      if (showRackList.value) return
+      isAutoZoomEnabled.value = true
+      applyResponsiveZoom(true, true)
+      updateSidePanePosition()
+    }, 320)
+  })
+}
+
 // 슬라이더 및 입력창과 연동할 퍼센트 단위 변수
 const zoomPercent = computed({
   get: () => Math.round((zoomLevel.value / NORMAL_ZOOM_LEVEL) * 100),
@@ -1377,12 +1442,50 @@ const clampZoomPercent = (val) => {
 }
 
 const scheduleZoomApply = (percent) => {
+  if (zoomTransitionRafId) {
+    cancelAnimationFrame(zoomTransitionRafId)
+    zoomTransitionRafId = 0
+  }
   if (zoomApplyRafId) cancelAnimationFrame(zoomApplyRafId)
   zoomApplyRafId = requestAnimationFrame(() => {
     zoomPercent.value = percent
   })
 }
 
+const animateZoomLevel = (target, duration = 360) => {
+  if (zoomTransitionRafId) cancelAnimationFrame(zoomTransitionRafId)
+
+  const start = Number(zoomLevel.value || target)
+  const distance = target - start
+  if (Math.abs(distance) < 0.005) {
+    zoomLevel.value = target
+    zoomTransitionRafId = 0
+    return
+  }
+
+  const startedAt = performance.now()
+  let lastAppliedAt = 0
+  const step = (now) => {
+    const progress = Math.min(1, (now - startedAt) / duration)
+    const eased = 1 - Math.pow(1 - progress, 3)
+
+    // CSS zoom의 연속 재배치를 줄이기 위해 약 30fps로 제한합니다.
+    if (now - lastAppliedAt >= 32 || progress === 1) {
+      zoomLevel.value = start + distance * eased
+      lastAppliedAt = now
+    }
+
+    if (progress < 1) {
+      zoomTransitionRafId = requestAnimationFrame(step)
+    } else {
+      zoomLevel.value = target
+      zoomTransitionRafId = 0
+    }
+  }
+
+  zoomTransitionRafId = requestAnimationFrame(step)
+}
+
 const onZoomSliderChange = (val) => {
   zoomPercentUi.value = clampZoomPercent(val)
   scheduleZoomApply(zoomPercentUi.value)
@@ -1412,11 +1515,6 @@ const sidePaneInlineStyle = computed(() => {
       width: `${Math.round(sidePaneWidth.value)}px`
     }
   }
-  if (sidePaneMode.value === 'bottom') {
-    return {
-      width: `${Math.round(sidePaneWidth.value)}px`
-    }
-  }
   return {}
 })
 
@@ -1985,8 +2083,17 @@ const closeAssetLinkModal = () => {
   assetLinkModalVisible.value = false
 }
 
+const handleAssetLinkDraftChange = (value) => {
+  if (!value) return
+  const selected = inventoryOptions.value.find(o => o.value === value)
+  if (!selected) return
+  selectedDeviceDraft.label = selected.meta?.name || selected.label || selectedDeviceDraft.label
+}
+
 const submitAssetLinkModal = async () => {
+  const before = JSON.stringify(getSideDraftSnapshot())
   selectedDeviceDraft.sourceRef = assetLinkDraft.value || null
+  handleAssetLinkDraftChange(selectedDeviceDraft.sourceRef)
   selectedDeviceHost.value = null
   if (selectedDeviceDraft.sourceRef && String(selectedDeviceDraft.sourceRef).startsWith('host:')) {
     const hostId = String(selectedDeviceDraft.sourceRef).split(':')[1] || ''
@@ -1998,6 +2105,10 @@ const submitAssetLinkModal = async () => {
       }
     }
   }
+  applyInlineDeviceChangesToRack()
+  if (before !== JSON.stringify(getSideDraftSnapshot())) {
+    isDirty.value = true
+  }
   closeAssetLinkModal()
 }
 
@@ -2016,8 +2127,6 @@ const updateSidePanePosition = () => {
 
   const layoutRect = layout.getBoundingClientRect()
   const slotRect = slot.getBoundingClientRect()
-  const paneHeight = pane.offsetHeight
-  const limitBottom = layoutRect.bottom - SIDE_PANE_TOP
 
   sidePaneWidth.value = slotRect.width
 
@@ -2026,14 +2135,32 @@ const updateSidePanePosition = () => {
     return
   }
 
-  if (limitBottom <= paneHeight) {
-    sidePaneMode.value = 'bottom'
-    return
-  }
-
   sidePaneLeft.value = slotRect.left
   sidePaneMode.value = 'fixed'
 }
+
+const handleSidePaneBeforeEnter = (element) => {
+  if (!isAutoZoomEnabled.value) return
+  const layoutWidth = rackDetailLayoutRef.value?.clientWidth || 0
+  const measuredWidth = Number.parseFloat(window.getComputedStyle(element).width) || 0
+  const responsiveWidth = window.matchMedia('(max-width: 980px)').matches
+    ? 280
+    : Math.min(460, Math.max(320, layoutWidth * 0.42))
+  const inspectorWidth = measuredWidth > 1 ? measuredWidth : responsiveWidth
+  const targetMainPaneWidth = Math.max(0, layoutWidth - inspectorWidth - 12)
+  applyResponsiveZoom(false, true, targetMainPaneWidth)
+}
+
+const handleSidePaneAfterEnter = () => {
+  nextTick(() => {
+    applyResponsiveZoom(false, true)
+    updateSidePanePosition()
+  })
+}
+
+const handleSidePaneAfterLeave = () => {
+  nextTick(() => applyResponsiveZoom(false, true))
+}
 // 데이터 변경 여부 추적
 const isDirty = ref(false)
 
@@ -2050,6 +2177,10 @@ watch(selectedDevice, async (device) => {
   nextTick(() => updateSidePanePosition())
   selectedDeviceHost.value = null
   deviceInfoActiveTab.value = 'summary'
+  if (!device) {
+    activeInlineField.value = ''
+    return
+  }
   syncSelectedDeviceDraft(device)
   syncSideMemoFields(device)
   const sourceRef = String(device?.sourceRef || '')
@@ -2064,7 +2195,12 @@ watch(selectedDevice, async (device) => {
   }
 })
 
-watch(showRackList, () => nextTick(() => updateSidePanePosition()))
+watch(showRackList, () => {
+  nextTick(() => {
+    updateSidePanePosition()
+    syncRackMainPaneResizeObserver()
+  })
+})
 
 // 페이지 이탈 방지 이벤트 핸들러
 const handleBeforeUnload = (e) => {
@@ -2120,15 +2256,12 @@ const fetchRackData = () => {
 
     // DB에 저장된 데이터가 있고, 내용(content)이 존재하는 경우
     if (layouts && layouts.length > 0 && layouts[0].content) {
-      parsedRacks.value = JSON.parse(layouts[0].content)
+      parsedRacks.value = normalizeLoadedRackLayouts(JSON.parse(layouts[0].content))
       message.success(t('rackDiagram.msg.rackLoaded'))
     } else {
-      // DB에 데이터가 전혀 없는 경우 (최초 접속) -> 기본 빈 랙 생성
-      parsedRacks.value = [{
-        name: t('rackDiagram.defaultRackName'),
-        totalHeight: 42,
-        items: [{ type: 'gap', height: 42 }]
-      }]
+      // 최초 배포/접속 시에는 임의 랙을 만들지 않는다.
+      // 사용자가 명시적으로 "새 랙 추가"를 눌렀을 때만 생성일/위치가 있는 랙을 만든다.
+      parsedRacks.value = []
     }
     // 데이터를 방금 불러왔으므로 미저장 상태(isDirty) 초기화 (빈 줄 삭제함)
     nextTick(() => { isDirty.value = false })
@@ -2140,6 +2273,20 @@ const fetchRackData = () => {
   })
 }
 
+const isLegacyAutoEmptyRack = (rack) => {
+  if (!rack || String(rack.name || '') !== t('rackDiagram.defaultRackName')) return false
+  if (Number(rack.totalHeight) !== 42) return false
+  if (rack.createdAt || rack.created || rack.createDate || rack.location || rack.room || rack.position) return false
+  const items = Array.isArray(rack.items) ? rack.items : []
+  return items.length === 1 && items[0]?.type === 'gap' && Number(items[0]?.height) === 42
+}
+
+const normalizeLoadedRackLayouts = (layouts) => {
+  if (!Array.isArray(layouts)) return []
+  if (layouts.length === 1 && isLegacyAutoEmptyRack(layouts[0])) return []
+  return layouts
+}
+
 const saveRackData = () => {
   if (!currentZoneId.value) {
     message.error(t('rackDiagram.msg.noZoneToSave'))
@@ -2465,18 +2612,38 @@ const backToRackList = () => {
   showRackList.value = true
 }
 
-const applyResponsiveZoom = (force = false) => {
+const getRackNaturalWidth = () => {
+  const rackWrapper = rackMainPaneRef.value?.querySelector('.rack-wrapper')
+  if (!rackWrapper) return 0
+  return Number.parseFloat(window.getComputedStyle(rackWrapper).width) || rackWrapper.offsetWidth || 0
+}
+
+const applyResponsiveZoom = (force = false, animate = false, availableWidth = 0) => {
   if (showRackList.value) return
   if (!force && !isAutoZoomEnabled.value) return
 
-  const mainPaneWidth = rackMainPaneRef.value?.clientWidth || 0
+  const mainPaneWidth = availableWidth || 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
+  let nextZoom
+  if (selectedDevice.value) {
+    const rackNaturalWidth = getRackNaturalWidth()
+    if (!rackNaturalWidth) return
+    const fitWidth = Math.max(0, mainPaneWidth - INSPECTOR_FIT_GUTTER)
+    const fitRatio = fitWidth / rackNaturalWidth
+    nextZoom = Math.max(INSPECTOR_ZOOM_MIN, Math.min(AUTO_ZOOM_MAX, Number(fitRatio.toFixed(3))))
+  } else {
+    // 장비 패널이 닫힌 상태에서는 기존 상세 화면의 여백 비율을 유지합니다.
+    const baseWidth = 1280
+    const ratio = mainPaneWidth / baseWidth
+    nextZoom = Math.max(AUTO_ZOOM_MIN, Math.min(AUTO_ZOOM_MAX, Number(ratio.toFixed(2))))
+  }
+
+  if (animate) {
+    animateZoomLevel(nextZoom)
+  } else {
+    zoomLevel.value = nextZoom
+  }
 }
 
 const handleResponsiveResize = () => {
@@ -2484,12 +2651,23 @@ const handleResponsiveResize = () => {
   resizeDebounceTimer = setTimeout(() => {
     if (zoomRafId) cancelAnimationFrame(zoomRafId)
     zoomRafId = requestAnimationFrame(() => {
-      applyResponsiveZoom(false)
+      applyResponsiveZoom(false, !!selectedDevice.value)
       updateSidePanePosition()
     })
   }, 120)
 }
 
+const syncRackMainPaneResizeObserver = () => {
+  if (rackMainPaneResizeObserver) {
+    rackMainPaneResizeObserver.disconnect()
+    rackMainPaneResizeObserver = null
+  }
+  if (showRackList.value || !rackMainPaneRef.value || typeof ResizeObserver === 'undefined') return
+
+  rackMainPaneResizeObserver = new ResizeObserver(() => handleResponsiveResize())
+  rackMainPaneResizeObserver.observe(rackMainPaneRef.value)
+}
+
 const selectDevice = (rIndex, iIndex) => {
   selectedDeviceRackIndex.value = rIndex
   selectedDeviceItemIndex.value = iIndex
@@ -3978,6 +4156,7 @@ onMounted(() => {
   nextTick(() => {
     applyResponsiveZoom(true)
     updateSidePanePosition()
+    syncRackMainPaneResizeObserver()
   })
 })
 
@@ -3988,11 +4167,20 @@ onBeforeUnmount(() => {
   if (resizeDebounceTimer) clearTimeout(resizeDebounceTimer)
   if (zoomRafId) cancelAnimationFrame(zoomRafId)
   if (zoomApplyRafId) cancelAnimationFrame(zoomApplyRafId)
+  if (zoomTransitionRafId) cancelAnimationFrame(zoomTransitionRafId)
+  if (rackMainPaneResizeObserver) rackMainPaneResizeObserver.disconnect()
+  if (expandedLayoutZoomTimer) clearTimeout(expandedLayoutZoomTimer)
 })
 
 </script>
 
 <style scoped>
+.rack-diagram-root {
+  --rack-brand-primary: #1890ff;
+  --rack-brand-primary-bg: rgba(24, 144, 255, 0.08);
+  --rack-brand-primary-bg-strong: rgba(24, 144, 255, 0.18);
+}
+
 /* 툴바 전체 컨테이너 (좌우 양끝 정렬) */
 .toolbar-container {
   display: flex !important;
@@ -4049,6 +4237,28 @@ onBeforeUnmount(() => {
   display: inline-flex;
 }
 
+.toolbar-expand-divider {
+  display: block;
+  width: 1px;
+  height: 20px;
+  background: #e5e7eb;
+}
+
+.toolbar-expand-btn {
+  width: 32px;
+  min-width: 32px;
+  padding: 0 !important;
+  color: #64748b;
+  border-radius: 6px;
+}
+
+.toolbar-expand-btn:hover,
+.toolbar-expand-btn:focus {
+  color: #1677ff;
+  border-color: #91caff;
+  background: #e6f4ff;
+}
+
 .toolbar-zoom {
   flex: 0 0 auto;
   gap: 8px;
@@ -4883,7 +5093,7 @@ onBeforeUnmount(() => {
 
 .rack-detail-layout {
   display: flex;
-  gap: 12px;
+  gap: 0;
   align-items: flex-start;
   position: relative;
   min-width: 0;
@@ -4897,14 +5107,57 @@ onBeforeUnmount(() => {
   padding-bottom: 8px;
 }
 
+.rack-main-pane .rack-zoom-wrapper {
+  display: block;
+  margin-right: auto;
+  margin-left: auto;
+}
+
 .rack-side-pane-slot {
-  width: clamp(300px, 24vw, 420px);
-  flex: 0 0 clamp(300px, 24vw, 420px);
+  width: clamp(320px, 42%, 460px);
+  flex: 0 0 clamp(320px, 42%, 460px);
+  margin-left: 12px;
   position: relative;
   align-self: flex-start;
 }
 
+.rack-inspector-enter-active,
+.rack-inspector-leave-active {
+  overflow: hidden;
+  will-change: width, flex-basis, transform, opacity;
+  transition:
+    width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+    flex-basis 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+    margin-left 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.2s ease,
+    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.rack-inspector-enter-from,
+.rack-inspector-leave-to {
+  width: 0 !important;
+  flex-basis: 0 !important;
+  margin-left: 0;
+  opacity: 0;
+  transform: translateX(28px);
+}
+
+.rack-inspector-enter-to,
+.rack-inspector-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rack-inspector-enter-active,
+  .rack-inspector-leave-active {
+    transition: none;
+  }
+}
+
 .rack-side-pane {
+  --device-scrollbar-thumb: rgba(100, 116, 139, 0.28);
+  --device-scrollbar-thumb-hover: rgba(100, 116, 139, 0.48);
   width: 100%;
   position: -webkit-sticky;
   position: sticky;
@@ -4912,6 +5165,7 @@ onBeforeUnmount(() => {
   align-self: flex-start;
   display: flex;
   flex-direction: column;
+  height: calc(100vh - 80px);
   max-height: calc(100vh - 80px);
   overflow: visible;
   max-width: 100%;
@@ -4923,14 +5177,6 @@ onBeforeUnmount(() => {
   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);
@@ -4938,6 +5184,7 @@ onBeforeUnmount(() => {
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  height: 100%;
   max-height: inherit;
   min-height: 0;
 }
@@ -5063,10 +5310,12 @@ onBeforeUnmount(() => {
   min-height: 0;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .device-info-tabs :deep(.ant-tabs-content-holder) {
   flex: 1 1 auto;
+  height: 0;
   min-height: 0;
   overflow: hidden;
 }
@@ -5078,8 +5327,39 @@ onBeforeUnmount(() => {
 }
 
 .device-info-tabs :deep(.ant-tabs-tabpane) {
-  overflow: auto;
-  padding-right: 2px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0 6px 14px 0;
+  scrollbar-width: thin;
+  scrollbar-color: var(--device-scrollbar-thumb) transparent;
+  scrollbar-gutter: stable;
+  overscroll-behavior: contain;
+}
+
+.device-info-tabs :deep(.ant-tabs-tabpane::-webkit-scrollbar) {
+  width: 6px;
+  height: 6px;
+}
+
+.device-info-tabs :deep(.ant-tabs-tabpane::-webkit-scrollbar-track) {
+  background: transparent;
+}
+
+.device-info-tabs :deep(.ant-tabs-tabpane::-webkit-scrollbar-thumb) {
+  min-height: 36px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  background: var(--device-scrollbar-thumb);
+  background-clip: padding-box;
+}
+
+.device-info-tabs :deep(.ant-tabs-tabpane::-webkit-scrollbar-thumb:hover) {
+  background: var(--device-scrollbar-thumb-hover);
+  background-clip: padding-box;
+}
+
+.device-info-tabs :deep(.ant-tabs-tabpane::-webkit-scrollbar-corner) {
+  background: transparent;
 }
 
 .device-info-tabs :deep(.ant-tabs-tab) {
@@ -5666,12 +5946,14 @@ onBeforeUnmount(() => {
   display: flex;
   justify-content: space-between;
   gap: 12px;
-  align-items: flex-start;
+  align-items: center;
+  min-height: 42px;
 }
 
 .rack-header-title-group {
   display: flex;
   align-items: center;
+  align-self: stretch;
   flex: 1 1 auto;
   min-width: 0;
   gap: 10px;
@@ -5693,14 +5975,14 @@ onBeforeUnmount(() => {
 .rack-header-actions {
   display: flex !important;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   flex-shrink: 0;
 }
 
 .rack-header-action-group {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 8px;
 }
 
 .rack-header-action-separator {
@@ -5824,11 +6106,11 @@ onBeforeUnmount(() => {
 }
 
 .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;
+  color: var(--rack-brand-primary);
+  background: var(--rack-brand-primary-bg);
+  border-left: 1px solid var(--rack-brand-primary);
+  border-top: 1px solid var(--rack-brand-primary);
+  border-bottom: 1px solid var(--rack-brand-primary);
 }
 
 /* 랙 내부 프레임 */
@@ -5863,8 +6145,8 @@ onBeforeUnmount(() => {
 
 .rack-item-selected,
 .rack-item-selected:hover {
-  border: 1px solid #1677ff;
-  background: rgba(22, 119, 255, 0.06);
+  border: 1px solid var(--rack-brand-primary);
+  background: var(--rack-brand-primary-bg);
   z-index: 3;
 }
 
@@ -5934,11 +6216,11 @@ onBeforeUnmount(() => {
 
 .device-content-selected,
 .device-content-selected:hover {
-  background: rgba(22, 119, 255, 0.06) !important;
+  background: var(--rack-brand-primary-bg) !important;
 }
 
 .device-content-selected .device-name-tag {
-  color: #1677ff;
+  color: var(--rack-brand-primary);
 }
 
 .device-content::before {
@@ -6158,6 +6440,34 @@ onBeforeUnmount(() => {
   border: 1px solid #d9d9d9;
 }
 
+/* 1U 장비는 내부 요소의 밀도를 낮춰 상하 여백을 확보합니다. */
+.device-content-compact .device-pattern {
+  top: 8px;
+  bottom: 8px;
+}
+
+.device-content-compact .device-icon-overlay {
+  width: 24px;
+  height: 24px;
+}
+
+.device-content-compact .device-name-tag {
+  font-size: 14px;
+  line-height: 18px;
+}
+
+.device-content-compact .tag-content {
+  min-width: 100px;
+  padding: 2px 8px;
+  gap: 6px;
+}
+
+.device-content-compact .tag-badge {
+  padding: 0 5px;
+  font-size: 9px;
+  line-height: 14px;
+}
+
 /* 액션 버튼 (호버 시에만 표시) */
 .device-actions {
   /* 버튼을 장비 둥둥 띄우는 핵심 코드 (이게 빠져서 안 보였던 겁니다!) */
@@ -6339,6 +6649,23 @@ onBeforeUnmount(() => {
   background-color: #4a515a !important;
 }
 
+.rack-diagram-root.is-dark .toolbar-expand-divider {
+  background: #4a515a;
+}
+
+.rack-diagram-root.is-dark .toolbar-expand-btn {
+  color: rgba(255, 255, 255, 0.72);
+  border-color: #4a515a;
+  background: #22282f;
+}
+
+.rack-diagram-root.is-dark .toolbar-expand-btn:hover,
+.rack-diagram-root.is-dark .toolbar-expand-btn:focus {
+  color: #69b1ff;
+  border-color: #3c89e8;
+  background: rgba(105, 177, 255, 0.12);
+}
+
 .rack-diagram-root.is-dark .toolbar-zoom {
   border-left-color: #4a515a;
 }
@@ -6569,6 +6896,11 @@ onBeforeUnmount(() => {
   background: #151b24;
 }
 
+.rack-diagram-root.is-dark .rack-side-pane {
+  --device-scrollbar-thumb: rgba(203, 213, 225, 0.20);
+  --device-scrollbar-thumb-hover: rgba(203, 213, 225, 0.38);
+}
+
 .rack-diagram-root.is-dark .device-summary-header,
 .rack-diagram-root.is-dark .device-info-section,
 .rack-diagram-root.is-dark .device-info-actions,
@@ -6786,9 +7118,9 @@ onBeforeUnmount(() => {
 }
 
 .rack-diagram-root.is-dark .ruler-number-selected {
-  color: #8cc8ff;
-  background: rgba(22, 119, 255, 0.20);
-  border-color: #4c93ff;
+  color: var(--rack-brand-primary);
+  background: var(--rack-brand-primary-bg-strong);
+  border-color: var(--rack-brand-primary);
 }
 
 .rack-diagram-root.is-dark .rack-frame {
@@ -6815,9 +7147,9 @@ onBeforeUnmount(() => {
 
 .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);
+  border-color: var(--rack-brand-primary);
+  background: var(--rack-brand-primary-bg-strong);
+  box-shadow: inset 44px 0 0 var(--rack-brand-primary-bg-strong);
 }
 
 .rack-diagram-root.is-dark .device-content {
@@ -6826,7 +7158,7 @@ onBeforeUnmount(() => {
 
 .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;
+  background: linear-gradient(90deg, rgba(24, 144, 255, 0.22) 0, rgba(24, 144, 255, 0.22) 74px, rgba(24, 144, 255, 0.12) 74px, rgba(24, 144, 255, 0.12) 100%) !important;
 }
 
 .rack-diagram-root.is-dark .gap-content {

From 4b028d50fae172056d539470655ac05d3b8b60d6 Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Thu, 16 Jul 2026 14:34:52 +0900
Subject: [PATCH 2/5] =?UTF-8?q?[Mold][=EB=9E=99=20=EC=8B=9C=EA=B0=81?=
 =?UTF-8?q?=ED=99=94]=201=EC=B0=A8=20UX=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F?=
 =?UTF-8?q?=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95=20-=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/src/views/infra/zone/RackDiagramTab.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/ui/src/views/infra/zone/RackDiagramTab.vue b/ui/src/views/infra/zone/RackDiagramTab.vue
index fe589d842e48..27ac063fc6d7 100644
--- a/ui/src/views/infra/zone/RackDiagramTab.vue
+++ b/ui/src/views/infra/zone/RackDiagramTab.vue
@@ -4476,6 +4476,17 @@ onBeforeUnmount(() => {
   flex-shrink: 0;
 }
 
+.zoom-input :deep(.ant-input-number-input-wrap) {
+  height: 100%;
+}
+
+.zoom-input :deep(.ant-input-number-input) {
+  height: 30px !important;
+  padding: 0 8px !important;
+  line-height: 30px !important;
+  text-align: center;
+}
+
 .zoom-slider-wrap {
   width: 144px;
   flex-shrink: 0;

From e2218ba4a2d038cd724f136c2bcaa6b81bd935a8 Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Thu, 16 Jul 2026 14:56:22 +0900
Subject: [PATCH 3/5] =?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=EC=88=98=EC=A0=95=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EC=A0=9C=EB=AA=A9=EC=9D=84=20MOLD=20=EA=B3=B5?=
 =?UTF-8?q?=ED=86=B5=20=EB=8B=A4=EA=B5=AD=EC=96=B4=20=ED=82=A4=20label.edi?=
 =?UTF-8?q?t=EC=9D=84=20=EC=82=AC=EC=9A=A9=ED=95=9C=20**=E2=80=9C=ED=8E=B8?=
 =?UTF-8?q?=EC=A7=91=E2=80=9D**=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/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 27ac063fc6d7..fea7b51e2fee 100644
--- a/ui/src/views/infra/zone/RackDiagramTab.vue
+++ b/ui/src/views/infra/zone/RackDiagramTab.vue
@@ -913,7 +913,7 @@
 
     <a-modal
       v-model:visible="rackModalVisible"
-      :title="rackModalMode === 'add' ? t('rackDiagram.addRack') : t('rackDiagram.editRack')"
+      :title="rackModalMode === 'add' ? t('rackDiagram.addRack') : t('label.edit')"
       :ok-text="t('label.ok')"
       :cancel-text="t('label.cancel')"
       @ok="submitRackModal"

From 754b593e81d31467d90bfd68678654e62ec50222 Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Thu, 16 Jul 2026 15:38:31 +0900
Subject: [PATCH 4/5] =?UTF-8?q?[Mold][=EB=9E=99=20=EC=8B=9C=EA=B0=81?=
 =?UTF-8?q?=ED=99=94]=20Zone=EB=8B=B9=20=EC=B5=9C=EB=8C=80=20=EB=9E=99:=20?=
 =?UTF-8?q?20=EA=B0=9C=20=EC=A0=9C=ED=95=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../META-INF/db/schema-Diplo-After.sql        |  8 +++-
 .../admin/rack/UpdateRackLayoutCmd.java       |  6 +--
 ui/public/locales/en.json                     |  2 +
 ui/public/locales/ko_KR.json                  |  2 +
 ui/src/views/infra/zone/RackDiagramTab.vue    | 46 +++++++++++++++++--
 5 files changed, 56 insertions(+), 8 deletions(-)

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 e5361271b797..8580c077010f 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
@@ -55,7 +55,7 @@ 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',
+    `content` mediumtext 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`),
@@ -63,6 +63,12 @@ CONSTRAINT `fk_rackml__zone` FOREIGN KEY (`zone_id`) REFERENCES `data_center` (`
                                                           ON DELETE RESTRICT
                                                           ON UPDATE CASCADE
 ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb3;
+CALL `cloud`.`IDEMPOTENT_CHANGE_COLUMN`(
+    'cloud.rackml_config',
+    'content',
+    'content',
+    'MEDIUMTEXT NOT NULL COMMENT ''RackML content'''
+);
 CALL `cloud`.`IDEMPOTENT_ADD_COLUMN`('cloud.host', 'migration_ip', 'VARCHAR(45)');
 
 -- backup offering table update
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 a77afd562938..c84ef91a1ce6 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
@@ -56,8 +56,8 @@ public class UpdateRackLayoutCmd extends BaseCmd {
             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,
+    // Keep the API below the MEDIUMTEXT capacity while allowing multi-rack layouts.
+    @Parameter(name = "content", type = CommandType.STRING, required = true, length = 1048576,
             description = "JSON string representing the rack diagram layout")
     private String content;
 
@@ -98,4 +98,4 @@ public void execute() throws ServerApiException {
         response.setResponseName(getCommandName());
         setResponseObject(response);
     }
-}
\ No newline at end of file
+}
diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 1d7b798cc57e..8aa5ba8b86e8 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -5285,6 +5285,8 @@
 "rackDiagram.msg.noChangesToSave": "No changes to save.",
 "rackDiagram.msg.rackSaved": "Rack layout saved.",
 "rackDiagram.msg.rackSaveFailed": "Failed to save rack layout.",
+"rackDiagram.msg.rackCountExceeded": "You can create up to {max} racks per zone.",
+"rackDiagram.msg.layoutSizeExceeded": "Rack layout exceeds the maximum save size ({max}). Remove racks or reduce device details.",
 "rackDiagram.msg.noRackToSaveImage": "No rack layout to save.",
 "rackDiagram.msg.exportingImage": "Converting image...",
 "rackDiagram.msg.imageSaved": "Image saved.",
diff --git a/ui/public/locales/ko_KR.json b/ui/public/locales/ko_KR.json
index 34835632c71a..a0e0eac1b621 100644
--- a/ui/public/locales/ko_KR.json
+++ b/ui/public/locales/ko_KR.json
@@ -5288,6 +5288,8 @@
 "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.rackCountExceeded": "Zone\ub2f9 \ub799\uc740 \ucd5c\ub300 {max}\uac1c\uae4c\uc9c0 \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.layoutSizeExceeded": "\ub799 \uad6c\uc131\uc774 \ucd5c\ub300 \uc800\uc7a5 \ud06c\uae30({max})\ub97c \ucd08\uacfc\ud588\uc2b5\ub2c8\ub2e4. \ub799\uc744 \uc0ad\uc81c\ud558\uac70\ub098 \uc7a5\ube44 \uc0c1\uc138 \uc815\ubcf4\ub97c \uc904\uc5ec\uc8fc\uc138\uc694.",
 "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.",
diff --git a/ui/src/views/infra/zone/RackDiagramTab.vue b/ui/src/views/infra/zone/RackDiagramTab.vue
index fea7b51e2fee..9938bebaafac 100644
--- a/ui/src/views/infra/zone/RackDiagramTab.vue
+++ b/ui/src/views/infra/zone/RackDiagramTab.vue
@@ -1402,6 +1402,27 @@ const { proxy, emit } = getCurrentInstance()
 const t = (key, args) => proxy?.$t ? proxy.$t(key, args) : key
 const isDarkMode = computed(() => !!store.getters.darkMode)
 const RACK_UNIT_HEIGHT = 52
+const MAX_RACK_COUNT = 20
+// The backend accepts up to 1 MiB while rackml_config.content uses MEDIUMTEXT.
+const MAX_RACK_LAYOUT_BYTES = 1024 * 1024
+
+const getRackLayoutSize = (racks) => new Blob([JSON.stringify(racks)]).size
+
+const validateRackLayoutSize = (racks) => {
+  if (getRackLayoutSize(racks) <= MAX_RACK_LAYOUT_BYTES) return true
+
+  message.error(t('rackDiagram.msg.layoutSizeExceeded', { max: '1MB' }))
+  return false
+}
+
+const validateRackCount = (racks) => {
+  if (racks.length <= MAX_RACK_COUNT) return true
+
+  message.warning(t('rackDiagram.msg.rackCountExceeded', { max: MAX_RACK_COUNT }))
+  return false
+}
+
+const validateRackLayoutLimits = (racks) => validateRackCount(racks) && validateRackLayoutSize(racks)
 
 const toggleExpandedView = () => {
   isExpanded.value = !isExpanded.value
@@ -2296,10 +2317,12 @@ const saveRackData = () => {
     applyInlineDeviceChangesToRack()
   }
 
+  if (!validateRackLayoutLimits(parsedRacks.value)) return Promise.resolve(false)
+
   saving.value = true
   const jsonContent = JSON.stringify(parsedRacks.value)
 
-  return api('updateRackLayout', {
+  return api('updateRackLayout', {}, 'POST', {
     zoneid: currentZoneId.value,
     name: 'default',
     content: jsonContent
@@ -2361,6 +2384,8 @@ watch(() => rackForm.totalHeight, () => {
 })
 
 const openRackModal = (mode, index = -1) => {
+  if (mode === 'add' && !validateRackCount([...parsedRacks.value, {}])) return
+
   clearRackFormErrors()
   rackModalMode.value = mode
   targetRackIndex.value = index
@@ -2479,6 +2504,7 @@ const handleImport = (event) => {
 
       // 2. 간단한 유효성 검사 (배열 형태인지 확인)
       if (Array.isArray(importedData)) {
+        if (!validateRackLayoutLimits(importedData)) return
         parsedRacks.value = importedData // 화면 갱신
         message.success(t('rackDiagram.msg.importSuccess'))
       } else {
@@ -2507,7 +2533,10 @@ const cloneRack = (rIndex) => {
     createDate: undefined,
     items: targetRack.items.map(item => ({ ...item }))
   }
-  parsedRacks.value.push(newRack)
+  const nextRacks = [...parsedRacks.value, newRack]
+  if (!validateRackLayoutLimits(nextRacks)) return
+
+  parsedRacks.value = nextRacks
   message.success(t('rackDiagram.msg.rackCloned'))
 }
 
@@ -2519,15 +2548,19 @@ const submitRackModal = () => {
   const rackLocation = String(rackForm.location || '').trim()
 
   if (rackModalMode.value === 'add') {
-    parsedRacks.value.push({
+    const newRack = {
       name: rackName,
       totalHeight: rackForm.totalHeight,
       location: rackLocation,
       createdAt: rackForm.createdAt || new Date().toISOString(),
       items: [{ type: 'gap', height: rackForm.totalHeight }]
-    })
+    }
+    const nextRacks = [...parsedRacks.value, newRack]
+    if (!validateRackLayoutLimits(nextRacks)) return
+    parsedRacks.value = nextRacks
   } else {
     const targetRack = parsedRacks.value[targetRackIndex.value]
+    const originalRack = JSON.parse(JSON.stringify(targetRack))
     const currentItemsHeight = targetRack.items.reduce((sum, item) => sum + item.height, 0)
     const diff = rackForm.totalHeight - currentItemsHeight
 
@@ -2580,6 +2613,11 @@ const submitRackModal = () => {
       targetRack.name = rackName
       targetRack.location = rackLocation
     }
+
+    if (!validateRackLayoutLimits(parsedRacks.value)) {
+      parsedRacks.value.splice(targetRackIndex.value, 1, originalRack)
+      return
+    }
   }
   closeRackModal()
 }

From 31d2f0a52166a68c4a65b9542736e3c0992b7b61 Mon Sep 17 00:00:00 2001
From: stardom3645 <stardom3645@gmail.com>
Date: Thu, 16 Jul 2026 15:50:57 +0900
Subject: [PATCH 5/5] =?UTF-8?q?[Mold][=EB=9E=99=20=EC=8B=9C=EA=B0=81?=
 =?UTF-8?q?=ED=99=94]=20Zone=EB=8B=B9=20=EC=B5=9C=EB=8C=80=20=EB=9E=99:=20?=
 =?UTF-8?q?20=EA=B0=9C=20=EC=A0=9C=ED=95=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/main/java/com/cloud/rack/RackLayoutVO.java            | 4 ++--
 1 file changed, 2 insertions(+), 2 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 c3873b9e786f..97224e74e7a3 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
@@ -44,7 +44,7 @@ public class RackLayoutVO implements InternalIdentity {
     @Column(name = "name")
     private String name;
 
-    @Column(name = "content", length = 65535)
+    @Column(name = "content", length = 1048576)
     private String content;
 
     @Temporal(TemporalType.TIMESTAMP)
@@ -70,4 +70,4 @@ public RackLayoutVO(Long zoneId, String name, String content) {
     public String getContent() { return content; }
     public void setContent(String content) { this.content = content; }
     public Date getUpdatedAt() { return updatedAt; }
-}
\ No newline at end of file
+}