polarvo-layout 1.0.57 → 1.0.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polarvo-layout",
-  "version": "1.0.57",
+  "version": "1.0.59",
   "type": "module",
   "author": "unigence <unigencelab@gmail.com>",
   "repository": {

package/src/components/Layout/BaseLayout.vue

@@ -90,6 +90,10 @@ const getSectionStyle = (section) => ({
   '--grid-columns': section.config?.gridColumns ?? 3,
   '--grid-rows': section.config?.gridRows ?? 3,
   '--grid-gap': `${section.config?.gridGap ?? 5}px`,
+  '--grid-row-sizes': section.config?.gridRowRatio?.length ? section.config.gridRowRatio.map((r) => `${r}fr`).join(' ') : undefined, // 비어있으면 아예 안 넣어서 CSS 기본값으로 폴백
+  '--grid-column-sizes': section.config?.gridColumnRatio?.length
+    ? section.config.gridColumnRatio.map((r) => `${r}fr`).join(' ')
+    : undefined,
   position: 'relative',
 });
 

package/src/components/Layout/CanvasContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="canvas-wrapper w-full h-full max-h-[765px] p-4 overflow-y-auto overflow-x-hidden">
+  <div class="canvas-wrapper w-full h-full max-h-[765px] overflow-y-auto overflow-x-hidden">
     <div id="canvas-container" class="border rounded-md w-full h-full bg-white" :style="containerStyle">
       <BaseLayout :polarvo="polarvo" class="relative" />
       <div
@@ -67,13 +67,14 @@ const containerStyle = computed(() => {
       width: `${DEFAULT_DISPLAY_SIZE.px}px`,
       height: `${displayHeight.value}px`,
       margin: '0 auto',
-      transform: `scale(${DEFAULT_DISPLAY_SIZE.percent / 100})`,
       transformOrigin: 'top center',
+      transform: `scale(${DEFAULT_DISPLAY_SIZE.percent / 100})`,
       backgroundImage: `
       linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
       linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px)
     `,
       backgroundSize: `${DEFAULT_DISPLAY_SIZE.gridSize}px ${DEFAULT_DISPLAY_SIZE.gridSize}px`,
+      backgroundPosition: '8px 8px', // BaseLayout의 p-2(8px)와 맞춰 좌상단 기준으로 정렬
     };
   }
 
@@ -89,6 +90,7 @@ const containerStyle = computed(() => {
       linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px)
     `,
     backgroundSize: `${displaySize.value.gridSize}px ${displaySize.value.gridSize}px`,
+    backgroundPosition: '8px 8px', // BaseLayout의 p-2(8px)와 맞춰 좌상단 기준으로 정렬
   };
 });
 </script>

package/src/components/Layout/FreeLayout.vue

@@ -60,6 +60,7 @@ const props = defineProps({
 const { setActiveDesign, setActiveMenu } = props.polarvo.display;
 const { updateActiveElement } = props.polarvo.layout;
 const { elements, guides, activeElement } = toRefs(props.polarvo.freeDrop.state);
+const { activeDesign } = toRefs(props.polarvo.display.state);
 const filteredElements = computed(() => {
   return elements.value.filter((el) => props.elementIds?.includes(el.id) && el.section === props.sectionKey) ?? [];
 });
@@ -74,6 +75,7 @@ watch(
   () => activeElement.value?.id,
   (newId, oldId) => {
     if (newId === oldId) return;
+
     if (!newId) {
       setActiveDesign(null);
       setActiveMenu(null);
@@ -102,6 +104,17 @@ watch(
   { deep: true },
 );
 
+watch(
+  () => activeDesign.value,
+  (newDesign, oldDesign) => {
+    if (newDesign != null || oldDesign == null) return; // null → null이 아닌 값으로 닫히는(값이 있다가 null 되는) 경우만
+
+    if (activeElement.value?.id && !activeElement.value.id.includes('inputForm')) {
+      updateActiveElement(activeElement.value.id, selectedElementForWatch.value, true);
+    }
+  },
+);
+
 onMounted(() => {
   props.polarvo.components.register('sections', props.sectionKey, getCurrentInstance());
   activeEditMode.value = false;

package/src/components/Layout/GridItem.vue

@@ -4,7 +4,7 @@
     :class="
       item.id
         ? ['relative bg-gray-200 user-select-none', { 'z-50 bg-white border-2 border-blue-400': item.id === activeId }]
-        : 'flex items-center justify-center bg-gray-100 border border-gray-300'
+        : 'flex items-center justify-center bg-gray-100 border border-gray-300 '
     "
     :style="itemStyle"
     @mousedown.stop="activeEditMode ? null : handleMouseDown($event, item)"
@@ -14,7 +14,7 @@
       <!-- 리사이즈 핸들 -->
       <div v-if="item.id === activeId" class="absolute inset-0 pointer-events-none">
         <div
-          class="absolute w-4 h-4 bottom-0 right-0 bg-blue-400 z-10 pointer-events-auto cursor-se-resize"
+          class="absolute w-2 h-2 bottom-0 right-0 bg-blue-400 z-10 pointer-events-auto cursor-se-resize"
           @mousedown="startResize($event, item.id)"
         ></div>
         <div class="flex gap-1 m-1">

package/src/components/Layout/GridLayout.vue

@@ -8,6 +8,64 @@
       :sectionKey="props.sectionKey"
     ></GridItem>
 
+    <!-- 행 크기 조절 -->
+    <div
+      v-for="r in gridRows - 1"
+      :key="`row-handle-${r}`"
+      :id="`row-handle-${r}`"
+      class="z-[60] relative self-end justify-self-stretch cursor-s-resize"
+      :style="{
+        gridRow: r,
+        gridColumn: '1 / -1',
+        height: `${gridGap}px`,
+        transform: 'translateY(100%)',
+      }"
+      @mousedown="handleMouseDown($event, 'row', r)"
+    >
+      <!-- 점선 -->
+      <div
+        class="pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 border-t border-dashed border-blue-700"
+        :class="{
+          'opacity-100': dragState.axis === 'row' && dragState.activeIdx === r,
+          'opacity-0': !(dragState.axis === 'row' && dragState.activeIdx === r),
+        }"
+      ></div>
+
+      <!-- 핸들 -->
+      <!-- <div
+        class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 cursor-s-resize rounded-full bg-violet-400 opacity-30 hover:opacity-100"
+      ></div> -->
+    </div>
+
+    <!-- 열 크기 조절 -->
+    <div
+      v-for="c in gridColumns - 1"
+      :key="`col-handle-${c}`"
+      :id="`col-handle-${c}`"
+      class="z-[60] relative self-stretch justify-self-end cursor-e-resize"
+      :style="{
+        gridRow: '1 / -1',
+        gridColumn: c,
+        width: `${gridGap}px`,
+        transform: 'translateX(100%)',
+      }"
+      @mousedown="handleMouseDown($event, 'col', c)"
+    >
+      <!-- 점선 -->
+      <div
+        class="pointer-events-none absolute top-0 bottom-0 left-1/2 -translate-x-1/2 border-l border-dashed border-blue-700"
+        :class="{
+          'opacity-100': dragState.axis === 'col' && dragState.activeIdx === c,
+          'opacity-0': !(dragState.axis === 'col' && dragState.activeIdx === c),
+        }"
+      ></div>
+
+      <!-- 핸들 -->
+      <!-- <div
+        class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 cursor-s-resize rounded-full bg-violet-400 opacity-30 hover:opacity-100"
+      ></div> -->
+    </div>
+
     <!-- 오버레이 -->
     <div v-if="activeEditMode" class="absolute inset-0 bg-black opacity-50 z-30"></div>
   </template>
@@ -41,9 +99,10 @@ const props = defineProps({
   },
 });
 
-const { setActiveDesign } = props.polarvo.display;
-const { updateActiveElement } = props.polarvo.layout;
+const { setActiveDesign, setActiveMenu } = props.polarvo.display;
+const { updateActiveElement, setSectionConfig } = props.polarvo.layout;
 const { elements, activeElement } = toRefs(props.polarvo.gridDrop.state);
+const { activeDesign } = toRefs(props.polarvo.display.state);
 
 const selectedElement = inject('selectedElement');
 const activeEditMode = inject('activeEditMode');
@@ -52,6 +111,172 @@ import { omit, cloneDeep, debounce } from 'lodash-es';
 
 const gridColumns = ref(3); // 동적으로 계산
 const gridRows = ref(1); // 동적으로 계산
+const gridGap = computed(() => props.sectionData?.config?.gridGap ?? 5); // BaseLayout.vue --grid-gap과 동일한 소스/기본값
+
+// row, col Resize
+const MIN_ROW_PX = 20; // 행 최소 높이(px)
+const MIN_COL_PX = 20; // 열 최소 너비(px)
+
+const DRAG_CONFIG = {
+  row: {
+    ref: gridRows,
+    minPx: MIN_ROW_PX,
+    ratioKey: 'gridRowRatio',
+    gridTemplateKey: 'gridTemplateRows',
+    clientKey: 'clientY',
+    positionKey: 'y',
+    cssVar: '--grid-row-sizes',
+  },
+  col: {
+    ref: gridColumns,
+    minPx: MIN_COL_PX,
+    ratioKey: 'gridColumnRatio',
+    gridTemplateKey: 'gridTemplateColumns',
+    clientKey: 'clientX',
+    positionKey: 'x',
+    cssVar: '--grid-column-sizes',
+  },
+};
+
+const dragState = ref({
+  axis: null, // 'row' | 'col'
+  activeIdx: null,
+  isDragging: false,
+});
+const startPos = ref({ x: 0, y: 0 });
+
+function handleMouseDown(event, axis, index) {
+  if (!index) return;
+  event.preventDefault();
+  event.stopPropagation();
+
+  const { ref, minPx, ratioKey, gridTemplateKey, clientKey, positionKey, cssVar } = DRAG_CONFIG[axis];
+
+  dragState.value.axis = axis;
+  dragState.value.activeIdx = index;
+  startPos.value = { x: event.clientX, y: event.clientY };
+
+  setActiveMenu(null); // 메뉴 닫기
+  setActiveDesign(null); // 디자인 닫기
+
+  let dragSnapShot = null; // 드래그 시작 시 스냅샷
+  let liveRatio = null; // 미리보기 중 계산된 최종 fr 배열 (stopDrag에서 커밋)
+  let pendingClient = null;
+  let rafId = null;
+
+  document.addEventListener('mousemove', _detectDragIntent);
+  document.addEventListener('mouseup', _cancelDragIntent);
+
+  function _detectDragIntent(e) {
+    if (dragState.value.axis !== axis || dragState.value.activeIdx !== index) return;
+    const deltaX = Math.abs(e.clientX - startPos.value.x);
+    const deltaY = Math.abs(e.clientY - startPos.value.y);
+
+    const isMoved = deltaX > 5 || deltaY > 5;
+
+    if (isMoved) {
+      // 의도 감지 리스너 제거
+      document.removeEventListener('mousemove', _detectDragIntent);
+      document.removeEventListener('mouseup', _cancelDragIntent);
+
+      // 드래그 시작
+      _startDrag();
+    }
+  }
+
+  function _cancelDragIntent() {
+    dragState.value.axis = null;
+    dragState.value.activeIdx = null;
+
+    document.removeEventListener('mousemove', _detectDragIntent);
+    document.removeEventListener('mouseup', _cancelDragIntent);
+  }
+
+  function _startDrag() {
+    dragState.value.isDragging = true;
+
+    const container = document.getElementById(`${props.sectionKey}Layout`);
+    if (!container) return _stopDrag();
+
+    const configured = props.sectionData?.config?.[ratioKey];
+    const baselineRatio =
+      (Array.isArray(configured) && configured.length === ref.value) || configured.some((v) => typeof v !== 'number' || !(v > 0))
+        ? [...configured]
+        : Array(ref.value).fill(1);
+
+    const trackPx = getComputedStyle(container)
+      [gridTemplateKey].split(' ')
+      .map((v) => parseFloat(v));
+
+    // 총 Fr 계산
+    const totalFr = baselineRatio.reduce((sum, v) => sum + v, 0);
+    // 총 px 계산
+    const totalPx = trackPx.reduce((sum, v) => sum + v, 0);
+    // 1px당 Fr 계산
+    const frPerPx = totalFr / totalPx;
+
+    dragSnapShot = {
+      container,
+      baselineRatio,
+      frPerPx,
+      minFr: minPx * frPerPx, // 최소 Fr 계산
+    };
+
+    document.addEventListener('mousemove', _startDragMove);
+    document.addEventListener('mouseup', _stopDrag);
+  }
+
+  function _startDragMove(e) {
+    if (!dragSnapShot) return;
+    pendingClient = e[clientKey];
+
+    // rafId 중복 예약 방지
+    if (rafId) return;
+
+    rafId = requestAnimationFrame(() => {
+      rafId = null;
+
+      const { baselineRatio, frPerPx, minFr, container } = dragSnapShot;
+      const prevIdx = index - 1; // 드래그 행 위쪽 행 인덱스
+      const nextIdx = index; // 드래그 행 인덱스
+
+      // 순수 이동량
+      let delta = (pendingClient - startPos.value[positionKey]) * frPerPx;
+      // 위쪽 행 작아지는 것 방지: 가장 커져도 minFr - baselineRatio[prevIdx] (음수값 = 위로 이동)
+      delta = Math.max(minFr - baselineRatio[prevIdx], delta);
+      // 아래쪽 행 작아지는 것 방지: 가장 작아져도 minFr (양수값 = 아래로 이동)
+      delta = Math.min(baselineRatio[nextIdx] - minFr, delta);
+
+      // 미리보기용
+      const preview = [...baselineRatio];
+      preview[prevIdx] += delta;
+      preview[nextIdx] -= delta;
+
+      liveRatio = preview;
+
+      // 화면에만 즉시 반영
+      container.style.setProperty(cssVar, preview.map((v) => `${v}fr`).join(' '));
+    });
+  }
+  function _stopDrag() {
+    dragState.value.isDragging = false;
+    dragState.value.axis = null;
+    dragState.value.activeIdx = null;
+
+    if (liveRatio) {
+      setSectionConfig(ratioKey, liveRatio);
+    }
+
+    startPos.value = { x: 0, y: 0 };
+    dragSnapShot = null;
+    liveRatio = null;
+    pendingClient = null;
+    rafId = null;
+
+    document.removeEventListener('mousemove', _startDragMove);
+    document.removeEventListener('mouseup', _stopDrag);
+  }
+}
 
 function initData() {
   gridColumns.value = props.sectionData?.config?.gridColumns || 3;
@@ -131,11 +356,22 @@ watch(
       _isElementSwitching = false;
       return;
     }
-  updateActiveElement(selectedElement.value?.id, newElement);
+    updateActiveElement(selectedElement.value?.id, newElement);
   },
   { deep: true },
 );
 
+watch(
+  () => activeDesign.value,
+  (newDesign, oldDesign) => {
+    if (newDesign != null || oldDesign == null) return; // null → null이 아닌 값으로 닫히는(값이 있다가 null 되는) 경우만
+
+    if (activeElement.value?.id && !activeElement.value.id.includes('inputForm')) {
+      updateActiveElement(activeElement.value.id, selectedElementForWatch.value, true);
+    }
+  },
+);
+
 onMounted(() => {
   props.polarvo.components.register('sections', props.sectionKey, getCurrentInstance());
   activeEditMode.value = false;
@@ -146,4 +382,18 @@ onMounted(() => {
 onUnmounted(() => {
   props.polarvo.components.unregister('sections', props.sectionKey);
 });
+
+//
 </script>
+
+<style lang="scss" scoped>
+// .re-handle-line {
+//   position: absolute;
+//   z-index: 0;
+//   left: 0;
+//   right: 0;
+//   top: 50%;
+//   height: 1px;
+//   transform: translateY(-50%);
+// }
+</style>

package/src/components/Layout/PolarLayout.vue

@@ -17,8 +17,9 @@ const props = defineProps({
 <style scoped>
 .polar-grid {
   display: grid;
-  grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
-  grid-template-rows: repeat(var(--grid-rows, 3), 1fr);
+  grid-template-columns: var(--grid-column-sizes, repeat(var(--grid-columns, 3), 1fr));
+  /* grid-template-rows: repeat(var(--grid-rows, 3), 1fr); */
+  grid-template-rows: var(--grid-row-sizes, repeat(var(--grid-rows, 3), 1fr));
   gap: var(--grid-gap, 5px);
   width: 100%;
   height: 100%;

package/src/core/engines/DisplayEngine.js

@@ -64,7 +64,7 @@ class DisplayEngine {
     this._subscribe('freeDrop:setActiveElement', () => {
       this.setActiveMenu(null);
       this.setActiveDesign(null);
-    })
+    });
 
     // freeDrop:setActiveElement가 항상 먼저 발행되어 아래 처리가 중복되므로 주석 처리
     // this._subscribe('freeDrop:startDrag', () => {
@@ -151,10 +151,12 @@ class DisplayEngine {
    */
   setActiveDesign(name) {
     if (this.activeDesign === name) return;
+    const prevDesign = this.activeDesign;
     this.activeDesign = name;
 
     this.eventBus.emit('display:updateActiveDesign', {
-      $design: name,
+      $activeDesign: name,
+      prev: { activeDesign: prevDesign },
       timestamp: Date.now(),
     });
   }

package/src/core/engines/FreeDropEngine.js

@@ -147,7 +147,7 @@ class FreeDropEngine {
 
     this._subscribe('system:restoredState', ({ domain, state: snapShot }) => {
       if (domain === 'all' || domain === 'draft') {
-        this._elements = snapShot.manager.elements || [];
+        this._elements = cloneDeep(snapShot.manager.elements) || [];
         this._elementsUpdate = true;
         this.setActiveElement(null);
 
@@ -161,7 +161,7 @@ class FreeDropEngine {
       }
 
       if (domain === 'manager') {
-        this._elements = snapShot.elements || [];
+        this._elements = cloneDeep(snapShot.elements) || [];
         this._elementsUpdate = true;
         this.setActiveElement(null);
 
@@ -835,7 +835,7 @@ class FreeDropEngine {
         guides: this.guides,
         timestamp: Date.now(),
       });
-      this._resetDrag(true, true);
+      this._resetDrag(true);
       // }
 
       return;
@@ -862,7 +862,7 @@ class FreeDropEngine {
    * @param {boolean} emitEvent - 업데이트 이벤트 발송 여부
    * @param {boolean} historyEvent - 히스토리 이벤트 기록 여부
    */
-  _resetDrag(emitEvent = false, historyEvent = false) {
+  _resetDrag(emitEvent = false) {
     this._dragState.isDragging = false;
     this.guides = { x: null, y: null, w: null, h: null };
 
@@ -871,17 +871,15 @@ class FreeDropEngine {
     this._offsetPos = { x: 0, y: 0 };
     this._dragOriginPos = { x: 0, y: 0 };
 
-    if (emitEvent) {
-      if (this._activeElement) {
-        this.eventBus.emit('freeDrop:requestUpdateElement', {
-          historyEvent: historyEvent,
-          elementId: this._activeElement.id,
-          position: this._activeElement.position,
-          size: this._activeElement.size,
-          guides: this.guides,
-          timestamp: Date.now(),
-        });
-      }
+    if (emitEvent && this._activeElement) {
+      this.eventBus.emit('freeDrop:requestUpdateElement', {
+        historyEvent: true,
+        elementId: this._activeElement.id,
+        position: this._activeElement.position,
+        size: this._activeElement.size,
+        guides: this.guides,
+        timestamp: Date.now(),
+      });
     }
 
     document.removeEventListener('mousemove', this._startDragMove);

package/src/core/engines/GridDropEngine.js

@@ -112,7 +112,7 @@ class GridDropEngine {
 
     this._subscribe('system:restoredState', ({ domain, state: snapShot }) => {
       if (domain === 'all' || domain === 'draft') {
-        this._elements = snapShot.manager.elements || [];
+        this._elements = cloneDeep(snapShot.manager.elements) || [];
         this._elementsUpdate = true;
 
         this.setActiveElement(null);
@@ -124,7 +124,7 @@ class GridDropEngine {
       }
 
       if (domain === 'manager') {
-        this._elements = snapShot.elements || [];
+        this._elements = cloneDeep(snapShot.elements) || [];
         this._elementsUpdate = true;
 
         this.setActiveElement(null);

package/src/core/managers/EngineManager.js

@@ -69,7 +69,7 @@ class EngineManager {
    * @param {object} state - 복원할 상태 객체
    */
   setState(state) {
-    this.state.elements = state.elements;
+    this.state.elements = cloneDeep(state.elements);
     this.setActiveSection(state.activeSection ?? null, true);
   }
 
@@ -178,10 +178,14 @@ class EngineManager {
         return false;
       }
 
-      const { width, height } = containerEl.getBoundingClientRect();
-      const newHeight = width / calculateAspectRatio(this._displaySize.aspectRatio);
+      const { width } = containerEl.getBoundingClientRect();
+      const style = getComputedStyle(containerEl);
+      const paddingX = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+      const contentWidth = width - paddingX;
 
-      this._containerWidth = width ?? this._containerWidth;
+      const newHeight = contentWidth / calculateAspectRatio(this._displaySize.aspectRatio);
+
+      this._containerWidth = contentWidth ?? this._containerWidth;
       this._containerHeight = newHeight ?? this._containerHeight;
     } catch (error) {
       console.error('[EngineManager] 컨테이너 크기 설정 중 오류 발생: ', error);
@@ -228,8 +232,9 @@ class EngineManager {
   /** activeElement 업데이트
    * @param {string} id - 업데이트할 element의 ID
    * @param {object} changes - 변경할 속성 객체
+   * @param {boolean} emitEvent - 이벤트 발생 여부
    */
-  updateActiveElement(id, changes) {
+  updateActiveElement(id, changes, emitEvent = false) {
     if (!id || !changes) return false;
 
     const index = this.state.elements.findIndex((x) => x.id === id);
@@ -253,6 +258,13 @@ class EngineManager {
       element: updatedElement,
       timestamp: Date.now(),
     });
+
+    if (emitEvent) {
+      this.eventBus.emit('system:historyCheckpoint', {
+        domain: 'manager',
+        state: this.getState() || null,
+      });
+    }
   }
 
   /** ---------------------------------- display Engine ---------------------------------- **/
@@ -448,13 +460,12 @@ class EngineManager {
    * @param {number|boolean} config - 새로운 설정 값
    */
   setSectionConfig(type, config) {
-    if (!['column', 'row', 'gap', 'guideLine'].includes(type)) {
+    if (!['column', 'row', 'gap', 'guideLine', 'gridRowRatio', 'gridColumnRatio'].includes(type)) {
       return { result: false, message: '입력할 수 없는 config 타입입니다.' };
     }
 
     if (!this.activeData) return;
 
-    const limit = CONFIG_LIMITS[type];
     const result = { result: true, message: 'config가 성공적으로 변경되었습니다.' };
     // const limits = {
     //   column: { min: 1, max: 12, name: '열 개수' },
@@ -467,7 +478,25 @@ class EngineManager {
 
     if (type === 'guideLine') {
       newConfig = { showGuideLine: value };
+    } else if (type === 'gridRowRatio') {
+      // gridRowRatio 배열은 gridRows 길이와 일치해야 함
+      const gridRows = this.activeData.config?.gridRows || 1;
+      if (!Array.isArray(value) || value.length !== gridRows || value.some((v) => typeof v !== 'number' || !(v > 0))) {
+        return { result: false, message: '잘못된 행 비율 값입니다.' };
+      }
+
+      newConfig = { gridRowRatio: value };
+    } else if (type === 'gridColumnRatio') {
+      // gridColumnRatio 배열은 gridColumns 길이와 일치해야 함
+      const gridColumns = this.activeData.config?.gridColumns || 1;
+      if (!Array.isArray(value) || value.length !== gridColumns || value.some((v) => typeof v !== 'number' || !(v > 0))) {
+        return { result: false, message: '잘못된 열 비율 값입니다.' };
+      }
+
+      newConfig = { gridColumnRatio: value };
     } else {
+      const limit = CONFIG_LIMITS[type];
+
       if (value < limit.min) {
         result.result = false;
         result.message = `설정 가능한 최소 ${limit.name}는 ${limit.min}입니다.`;
@@ -479,9 +508,11 @@ class EngineManager {
       value = Math.min(Math.max(limit.min, value), limit.max);
 
       if (type === 'column') {
-        newConfig = { gridColumns: value };
+        // gridColumns 변경되면 gridColumnRatio 초기화
+        newConfig = { gridColumns: value, gridColumnRatio: [] };
       } else if (type === 'row') {
-        newConfig = { gridRows: value };
+        // gridRows 변경되면 gridRowRatio 초기화
+        newConfig = { gridRows: value, gridRowRatio: [] };
       } else if (type === 'gap') {
         newConfig = { gridGap: value };
       }
@@ -535,7 +566,11 @@ class EngineManager {
 
       this.eventBus.emit('system:historyCheckpoint', {
         domain: 'manager',
-        state: this.getState(),
+        state: {
+          manager: this.getState() || null,
+          layout: this.getEngine('layout')?.getState() || null,
+          display: this.getEngine('display')?.getState() || null,
+        },
       });
     });
 
@@ -957,7 +992,7 @@ class EngineManager {
         setRatio: (type, index, ratio) => layoutEngine.setRatio(type, index, ratio),
         // setUserLayoutData: (userData) => layoutEngine.setUserLayoutData(userData),
         setActiveSection: (name) => this.setActiveSection(name),
-        updateActiveElement: (id, changes) => this.updateActiveElement(id, changes),
+        updateActiveElement: (id, changes, emitEvent) => this.updateActiveElement(id, changes, emitEvent),
 
         setElements: (elements) => this.setElements(elements),
         setSectionMode: (mode) => this.setSectionMode(mode),

package/src/library/DisplayLibrary.js

@@ -48,8 +48,8 @@ function useDisplay(api) {
     });
 
     // activeDesign 변경 감지
-    _subscribe('display:updateActiveDesign', ({ $design }) => {
-      state.activeDesign = $design;
+    _subscribe('display:updateActiveDesign', ({ $activeDesign }) => {
+      state.activeDesign = $activeDesign;
     });
 
     // displayMode 변경 감지 (displaySize가 함께 초기화됨)

package/src/library/LayoutLibrary.js

@@ -228,9 +228,9 @@ function useLayout(api) {
     }
   };
 
-  const updateActiveElement = (id, changes) => {
+  const updateActiveElement = (id, changes, emitEvent) => {
     try {
-      api.layout.updateActiveElement(id, changes);
+      api.layout.updateActiveElement(id, changes, emitEvent);
     } catch (error) {
       console.error('[useLayout] updateActiveElement 실행 중 오류 발생:', error);
     }

package/src/utils/data-converter.js

@@ -4,6 +4,8 @@ const dataConverter = {
   // 저장: 자유 배치인 경우, position, size 등을 뷰포트 대비 비율로 변환하여 저장
   normalize(elements, containerWidth, containerHeight) {
     const normalize = cloneDeep(elements);
+    if (!containerWidth || !containerHeight) return normalize;
+
     normalize.map((el) => {
       if (el.mode !== 'free') return;
       el.position = {
@@ -25,12 +27,12 @@ const dataConverter = {
     denormalize.map((el) => {
       if (el.mode !== 'free') return;
       el.position = {
-        x: el.position.x * containerWidth,
-        y: el.position.y * containerHeight,
+        x: Math.round(el.position.x * containerWidth),
+        y: Math.round(el.position.y * containerHeight),
       };
       el.size = {
-        w: el.size.w * containerWidth,
-        h: el.size.h * containerHeight,
+        w: Math.round(el.size.w * containerWidth),
+        h: Math.round(el.size.h * containerHeight),
       };
     });