polarvo-layout 1.0.20 → 1.0.22

package/package.json

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

package/src/components/FastMenu/DisplayFastMenu.vue

@@ -22,7 +22,7 @@
         name="px"
         aria-label="픽셀 단위 크기"
         min="600"
-        max="2400"
+        max="1200"
         step="50"
         :value="displaySize?.px"
         class="border-b-2 pr-1 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"
@@ -34,7 +34,7 @@
         name="percent"
         aria-label="퍼센트 단위 크기"
         min="0"
-        max="100"
+        max="200"
         step="10"
         :value="displaySize?.percent"
         class="border-b-2 pr-1 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"

package/src/components/FastMenu/LayoutFastMenu.vue

@@ -19,7 +19,7 @@
           <input
             type="checkbox"
             :checked="activeConfig?.showGuideLine"
-            @change="setSectionConfig('guideLine', $event.target.checked)"
+            @change="handleSectionConfigChange('guideLine', $event.target.checked)"
           />
         </div>
       </template>
@@ -34,7 +34,7 @@
               max="50"
               class="text-sm text-center w-6 border-b-2 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"
               :value="activeConfig?.gridRows"
-              @change="setSectionConfig('row', $event.target.value)"
+              @change="handleSectionConfigChange('row', $event.target.value)"
             />
           </div>
           <div class="flex items-center gap-1">
@@ -46,7 +46,7 @@
               max="12"
               class="text-sm text-center w-6 border-b-2 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"
               :value="activeConfig?.gridColumns"
-              @change="setSectionConfig('column', $event.target.value)"
+              @change="handleSectionConfigChange('column', $event.target.value)"
             />
           </div>
           <div class="flex items-center gap-1">
@@ -58,7 +58,7 @@
               max="12"
               class="text-sm text-center w-6 border-b-2 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"
               :value="activeConfig?.gridGap"
-              @change="setSectionConfig('gap', $event.target.value)"
+              @change="handleSectionConfigChange('gap', $event.target.value)"
             />
           </div>
         </div>
@@ -80,6 +80,14 @@ const props = defineProps({
 const { activeSection, activeMode, activeConfig } = toRefs(props.polarvo.layout.state);
 const { setSectionMode, setSectionConfig } = props.polarvo.layout;
 const sectionMode = computed(() => activeMode.value);
+
+function handleSectionConfigChange(type, value) {
+  const { result, message } = setSectionConfig(type, value)
+
+  if (!result) {
+    alert(message)
+  }
+}
 </script>
 
 <style scoped lang="scss">

package/src/components/Layout/BaseLayout.vue

@@ -2,8 +2,9 @@
   <div
     :id="preview ? 'previewLayout' : 'baseLayout'"
     class="grid h-full p-2 bg-transparent rounded-lg"
-    :class="[layoutType + '-layout', `grid-cols-${gridNumber?.column}`, 'mb-4' ? layoutType === 'three-column-split' : '']"
+    :class="[layoutType + '-layout', `grid-cols-${gridNumber?.column}`, { 'mb-4': layoutType === 'three-column-split' }]"
     :style="getBaseStyle"
+    @contextmenu.prevent
   >
     <template v-for="(section, key) in layoutData" :key="key">
       <PolarLayout
@@ -50,9 +51,9 @@ import FreeLayout from './FreeLayout.vue';
 import GridLayout from './GridLayout.vue';
 
 // 우클릭 방지
-window.oncontextmenu = () => {
-  return false;
-};
+// window.oncontextmenu = () => {
+//   return false;
+// };
 
 const emit = defineEmits(['click:section']);
 const props = defineProps({
@@ -67,7 +68,7 @@ const props = defineProps({
 });
 
 const layoutType = computed(() => {
-  if (layoutName.value.eng == null) return 'no-split';
+  if (layoutName.value.eng === null) return 'no-split';
   return layoutName.value.eng
     .replace(/([A-Z])/g, '-$1')
     .toLowerCase()
@@ -78,16 +79,16 @@ const { layoutName, layoutData, activeSection, gapSize, gridNumber, gridRatio }
 
 const getBaseStyle = computed(() => {
   return {
-    gridTemplateColumns: gridRatio.value?.column.map((ratio) => `${ratio}%`).join(' '),
-    gridTemplateRows: gridRatio.value?.row.map((ratio) => `${ratio}%`).join(' '),
-    marginRight: layoutType.value === 'no-split' ? '0' : layoutType.value === 'three-column-split' ? '14px' : '8px',
+    // gridTemplateColumns: gridRatio.value?.column.map((ratio) => `${ratio}%`).join(' '),
+    // gridTemplateRows: gridRatio.value?.row.map((ratio) => `${ratio}%`).join(' '),
+    // marginRight: layoutType.value === 'no-split' ? '0' : layoutType.value === 'three-column-split' ? '14px' : '8px',
     gap: `${gapSize.value}px`,
   };
 });
 
 const getSectionStyle = (section) => ({
-  '--grid-columns': section.config?.gridColumns || 3,
-  '--grid-gap': `${section.config?.gridGap || 5}px`,
+  '--grid-columns': section.config?.gridColumns ?? 3,
+  '--grid-gap': `${section.config?.gridGap ?? 5}px`,
   position: 'relative',
 });
 
@@ -95,7 +96,7 @@ const getSectionClass = (key, section) => ({
   [key]: true,
   [section.mode]: true,
   'section-active': activeSection.value === key,
-  disabled: activeSection.value != key && !props.preview,
+  disabled: activeSection.value !== key && !props.preview,
 });
 </script>
 

package/src/components/Layout/CanvasContainer.vue

@@ -23,10 +23,16 @@ const props = defineProps({
   },
 });
 
+const DEFAULT_DISPLAY_SIZE = {
+  px: 1200,
+  percent: 100,
+  gridSize: 16,
+  aspectRatio: '16/9',
+};
+
 // height 관련 여유 공간 추가하여 계산함 (50, 200)
 const { displaySize } = toRefs(props.polarvo.display.state);
 const { elements } = toRefs(props.polarvo.layout.state);
-const gridSize = computed(() => displaySize.value?.gridSize || 16);
 const defaultHeight = computed(() => {
   return (
     elements.value?.reduce((max, el) => {
@@ -52,19 +58,37 @@ function expandContainer() {
 }
 
 const containerStyle = computed(() => {
+  if (!displaySize.value) {
+    return {
+      aspectRatio: DEFAULT_DISPLAY_SIZE.aspectRatio,
+      width: `${DEFAULT_DISPLAY_SIZE.px}px`,
+      height: `${displayHeight.value}px`,
+      margin: '0 auto',
+      transform: `scale(${DEFAULT_DISPLAY_SIZE.percent / 100})`,
+      transformOrigin: 'top center',
+    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`,
+  }
+}
+
   return {
-    aspectRatio: displaySize.value?.aspectRatio,
-    width: `${displaySize.value?.px}px`,
+    aspectRatio: displaySize.value.aspectRatio,
+    width: `${displaySize.value.px}px`,
     height: `${displayHeight.value}px`,
-    margin: `0 auto`,
-    transform: `scale(${displaySize.value?.percent / 100})`,
+    margin: '0 auto',
+    transform: `scale(${displaySize.value.percent / 100})`,
     transformOrigin: 'top center',
     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: `${gridSize.value}px ${gridSize.value}px`,
+    backgroundSize: `${displaySize.value.gridSize}px ${displaySize.value.gridSize}px`,
   };
+
+
 });
 
 // 전체 elements

package/src/components/MiniMenu/LayoutMiniMenu.vue

@@ -5,7 +5,7 @@
     <div class="grid gap-1 grid-cols-1 mx-1 mb-3">
       <div
         class="item flex flex-col items-center gap-1 p-2 border border-gray-200 rounded-md bg-white cursor-pointer hover:border-gray-400"
-        :class="{ active: layoutName.eng == 'NoSplit' }"
+        :class="{ active: layoutName.eng === 'NoSplit' }"
         @click="setLayoutName('NoSplit')"
       >
         <component class="text-gray-600" :is="layoutSource.noSplit.icon"></component>
@@ -18,7 +18,7 @@
         v-for="(layout, key) in layoutSource.split"
         :key="key"
         class="item flex flex-col items-center gap-1 p-2 border border-gray-200 rounded-md bg-white cursor-pointer hover:border-gray-400"
-        :class="{ active: layoutName.eng == key }"
+        :class="{ active: layoutName.eng === key }"
         @click="setLayoutName(key)"
       >
         <component class="text-gray-600" :is="layout.icon"></component>
@@ -45,8 +45,7 @@ watch(
   () => layoutName.value,
   () => {
     emits('click:layout');
-  },
-  { deep: true }
+  }
 );
 </script>
 

package/src/components/SideBar/LayoutSettingSideBar.vue

@@ -26,7 +26,7 @@
             min="1"
             max="50"
             :value="activeConfig.gridRows"
-            @change="setSectionConfig('row', $event.target.value)"
+            @change="handleSectionConfigChange('row', $event.target.value)"
           />
         </div>
         <div class="flex flex-row items-center gap-4">
@@ -38,7 +38,7 @@
             min="1"
             max="12"
             :value="activeConfig.gridColumns"
-            @change="setSectionConfig('column', $event.target.value)"
+            @change="handleSectionConfigChange('column', $event.target.value)"
           />
         </div>
         <div class="flex flex-row items-center gap-4">
@@ -50,7 +50,7 @@
             min="0"
             max="12"
             :value="activeConfig.gridGap"
-            @change="setSectionConfig('gap', $event.target.value)"
+            @change="handleSectionConfigChange('gap', $event.target.value)"
           />
         </div>
       </div>
@@ -64,7 +64,7 @@
             type="checkbox"
             id="guide-line"
             :checked="activeConfig.showGuideLine"
-            @change="setSectionConfig('guideLine', $event.target.checked)"
+            @change="handleSectionConfigChange('guideLine', $event.target.checked)"
           />
         </div>
       </div>
@@ -85,6 +85,14 @@ const { activeMode, activeConfig } = toRefs(props.polarvo.layout.state);
 const { setSectionMode, setSectionConfig } = props.polarvo.layout;
 
 const sectionMode = computed(() => activeMode.value);
+
+function handleSectionConfigChange(type, value) {
+  const { result, message } = setSectionConfig(type, value)
+
+  if (!result) {
+    alert(message)
+  }
+}
 </script>
 
 <style lang="scss" scoped></style>

package/src/components/SideBar/LayoutSideBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="aspect-[3/2] border border-gray-200 rounded-md bg-white ">
+    <div class="aspect-[3/2] border border-gray-200 rounded-md bg-white">
       <BaseLayout id="preview" :polarvo="polarvo" :preview="true" @click:section="setActiveSection($event)" />
       <button
         class="text-sm bg-blue-100 text-center w-full py-1 hover:cursor-pointer hover:bg-blue-200 active:opacity-80"
@@ -10,7 +10,7 @@
       </button>
     </div>
 
-    <div v-if="layoutName.eng != 'NoSplit'">
+    <div v-if="layoutName.eng !== 'NoSplit'">
       <h5 class="mt-4 block text-sm font-bold text-gray-600">레이아웃 설정</h5>
       <div class="mt-2 border border-gray-200 rounded-md bg-gray-100">
         <div class="px-4 py-2">
@@ -21,7 +21,7 @@
               type="number"
               id="section-gap"
               :value="gapSize"
-              @change="setGapSize($event.target.value)"
+              @change="handleGapSize($event)"
             />
           </div>
         </div>
@@ -35,7 +35,7 @@
                 type="number"
                 :id="`col-ratio-${column}`"
                 :value="gridRatio.column[column - 1]"
-                @change="setRatio('column', column - 1, $event.target.value)"
+                @change="handleGridRatio('column', column - 1, $event)"
               />
             </template>
           </div>
@@ -48,7 +48,7 @@
                 type="number"
                 :id="`row-ratio-${row}`"
                 :value="gridRatio.row[row - 1]"
-                @change="setRatio('row', row - 1, $event.target.value)"
+                @change="handleGridRatio('row', row - 1, $event)"
               />
             </template>
           </div>
@@ -60,11 +60,7 @@
         현재 활성화 섹션:
         <span class="text-sm text-red-400 font-medium cursor-default">{{ activeSection }}</span>
       </h5>
-      <LayoutSetting
-        v-if="activeSection !== null"
-        :polarvo="polarvo"
-        class="mt-2 border border-gray-200 rounded-md bg-white"
-      />
+      <LayoutSetting v-if="activeSection !== null" :polarvo="polarvo" class="mt-2 border border-gray-200 rounded-md bg-white" />
       <div v-else>
         <div class="text-center text-sm text-red-400 bg-red-50 mt-1 py-1 cursor-default">선택된 섹션이 없습니다.</div>
       </div>
@@ -86,4 +82,34 @@ const props = defineProps({
 });
 const { layoutName, activeSection, gapSize, gridNumber, gridRatio } = toRefs(props.polarvo.layout.state);
 const { setGapSize, setRatio, setActiveSection } = props.polarvo.layout;
+
+function handleGridRatio(type, index, event) {
+  const value = event.target.value;
+  if (Number(value) > 100 || Number(value) < 0 || isNaN(Number(value))) {
+    alert('비율은 0에서 100 사이의 숫자여야 합니다.');
+    event.target.value = gridRatio.value[type][index]; // 원래 값으로 복원
+    return;
+  }
+
+  const { result, message } = setRatio(type, index, Number(value));
+
+  if (!result) {
+    alert(message);
+  }
+}
+
+function handleGapSize(event) {
+  const value = event.target.value;
+  if (Number(value) < 0 || isNaN(Number(value))) {
+    alert('갭 크기는 0 이상의 숫자여야 합니다.');
+    event.target.value = gapSize.value; // 원래 값으로 복원
+    return;
+  }
+
+  const { result, message } = setGapSize(Number(value));
+
+  if (!result) {
+    alert(message);
+  }
+}
 </script>

package/src/core/engines/DisplayEngine.js

@@ -1,4 +1,16 @@
 // event 발행 시 'display'으로 시작하는 이름 사용
+const DISPLAY_LIMITS = {
+  percent: { max: 200, min: 0, unit: '%', name: '배율' },
+  px: { max: 1200, min: 1, unit: 'px', name: '크기' },
+};
+
+const DEFAULT_DISPLAY_SIZE = {
+  px: 1200,
+  percent: 100,
+  gridSize: 16,
+  aspectRatio: '16/9',
+};
+
 class DisplayEngine {
   constructor({ eventBus, options }) {
     this.eventBus = eventBus;
@@ -9,6 +21,8 @@ class DisplayEngine {
     this.displayMode = 'desktop'; // 현재 디스플레이 모드 (초기값 = 'desktop')
     this.displaySize = null;
 
+    this._resetDisplaySizeByMode(this.displayMode);
+
     this._subscriptions = []; // 구독 해제 함수 저장용
     this._setupSubscriptions();
   }
@@ -29,8 +43,6 @@ class DisplayEngine {
   _setupSubscriptions() {
     // 초기화 완료 이벤트 구독 - from EngineManager
     this._subscribe('system:engineInitialized', () => {
-      this._resetDisplaySizeByMode(this.displayMode);
-
       this.eventBus.emit('display:engineInitialized', {
         $displaySize: this.displaySize,
         timestamp: Date.now(),
@@ -71,8 +83,6 @@ class DisplayEngine {
     this.displayMode = 'desktop';
     this._resetDisplaySizeByMode(this.displayMode);
 
-    console.log('[DisplayEngine] 리셋 완료');
-
     this.eventBus.emit('display:enginesReset', {
       $displaySize: this.displaySize,
       timestamp: Date.now(),
@@ -124,7 +134,6 @@ class DisplayEngine {
   }
 
   /** ---------------------------------- 공통 메소드 ---------------------------------- **/
-
   /** 아이콘바 메뉴 변경
    * @param {string} name - 메뉴 이름
    */
@@ -180,14 +189,19 @@ class DisplayEngine {
    * @param {string} mode - 디스플레이 모드
    */
   _resetDisplaySizeByMode(mode) {
-    if (this.resource[mode]) {
-      this.displaySize = {
-        px: this.resource[mode]?.defaultWidth || 1200,
-        percent: 100,
-        gridSize: this.resource[mode]?.gridSize || 16,
-        aspectRatio: this.resource[mode]?.aspectRatio || '16/9',
-      };
+    const defaults = DEFAULT_DISPLAY_SIZE;
+    if (!this.resource[mode]) {
+      this.displaySize = { ...defaults };
+      return;
     }
+
+    const resource = this.resource[mode];
+    this.displaySize = {
+      px: resource.defaultWidth ?? defaults.px,
+      percent: defaults.percent,
+      gridSize: resource.gridSize ?? defaults.gridSize,
+      aspectRatio: resource.aspectRatio ?? defaults.aspectRatio,
+    };
   }
 
   /** displaySize 변경
@@ -196,29 +210,24 @@ class DisplayEngine {
    */
   setDisplaySize(type, size) {
     if (!['px', 'percent'].includes(type)) {
-      console.error('[DisplayEngine] 잘못된 사이즈 타입:', type);
-      return;
+      return { result: false, message: '입력할 수 없는 사이즈 타입입니다.' };
     }
-
     const numSize = Number(size);
-    if (isNaN(numSize) || numSize <= 0) {
-      console.error('[DisplayEngine] 잘못된 사이즈 값:', size);
-      return;
-    }
+    const limit = DISPLAY_LIMITS[type];
+    const result = {result: true, message: '사이즈가 성공적으로 변경되었습니다.'};
 
-    const limits = {
-      percent: { max: 200, unit: '%', name: '배율' },
-      px: { max: 1200, unit: 'px', name: '크기' },
-    };
+    if (isNaN(numSize) || numSize <= limit.min) {
+      result.result = false;
+      result.message = `설정 가능한 최소 ${limit.name}는 ${limit.min}${limit.unit}입니다.`;
+    }
 
-    const typeLimit = limits[type];
-    if (numSize > typeLimit.max) {
-      alert(`설정 가능한 최대 ${typeLimit.name}는 ${typeLimit.max}${typeLimit.unit}입니다.`);
+    if (isNaN(numSize) || numSize > limit.max) {
+      result.result = false;
+      result.message = `설정 가능한 최대 ${limit.name}는 ${limit.max}${limit.unit}입니다.`;
     }
 
     const prevDisplaySize = { ...this.displaySize };
-    this.displaySize[type] = Math.min(Math.max(0, numSize), typeLimit.max);
-
+    this.displaySize[type] = Math.min(Math.max(0, numSize), limit.max);
     this.eventBus.emit('display:displayChanged', {
       type: 'size',
       $displayMode: this.displayMode,
@@ -226,6 +235,8 @@ class DisplayEngine {
       prev: { displaySize: prevDisplaySize },
       timestamp: Date.now(),
     });
+
+    return result;
   }
 }
 

package/src/core/engines/FreeDropEngine.js

@@ -153,7 +153,6 @@ class FreeDropEngine {
   /** 엔진 초기화 */
   reset() {
     this._initialize();
-    console.log('[FreeDropEngine] 리셋 완료');
   }
 
   /** 삭제 및 정리 */

package/src/core/engines/GridDropEngine.js

@@ -123,7 +123,6 @@ class GridDropEngine {
   /** 엔진 초기화 */
   reset() {
     this._initialize();
-    console.log('[GridDropEngine] 리셋 완료');
   }
 
   /** 삭제 및 정리 */

package/src/core/engines/HistoryEngine.js

@@ -134,7 +134,6 @@ class HistoryEngine {
   /** 엔진 초기화 */
   reset() {
     this._initialize();
-    console.log('[HistoryEngine] 리셋 완료');
   }
 
   /** 삭제 및 정리 */

package/src/core/engines/LayoutEngine.js

@@ -32,7 +32,7 @@ class LayoutEngine {
   /** [내부함수] 구독 설정 */
   _setupSubscriptions() {
     // 초기화 완료 이벤트 구독 - from EngineManager
-    this._subscribe('system:engineInitialized', () => {});
+    // this._subscribe('system:engineInitialized', () => {});
 
     this._subscribe('system:updateActiveSectionConfig', ({ $section, changes }) => {
       Object.keys(changes).forEach((key) => {
@@ -63,6 +63,7 @@ class LayoutEngine {
     });
 
     this._subscribe('system:restoredState', ({ stateData }) => {
+      if (!stateData?.layoutData) return;
       Object.assign(this.layoutData, stateData.layoutData);
     });
   }
@@ -209,27 +210,17 @@ class LayoutEngine {
 
     const newLayoutData = cloneDeep(this.resource[name].sections);
 
-    // userData 있는 경우 우선 병합
-    if (userData) {
-      Object.keys(newLayoutData).forEach((sectionKey) => {
-        if (userData[sectionKey]) {
-          newLayoutData[sectionKey] = { ...newLayoutData[sectionKey], ...userData[sectionKey] };
-        }
-      });
-    }
-    // 기존 데이터 있는 경우 병합
-    else if (this.layoutData) {
-      {
-        Object.keys(newLayoutData).forEach((sectionKey) => {
-          if (this.layoutData[sectionKey]) {
-            newLayoutData[sectionKey] = {
-              ...newLayoutData[sectionKey],
-              ...this.layoutData[sectionKey],
-            };
-          }
-        });
+    // userData 있는 경우 우선 병합 - 기존 데이터 유지하면서 userData로 덮어쓰기
+    const mergeSource = userData || this.layoutData;
+
+    Object.keys(newLayoutData).forEach((sectionKey) => {
+      if (mergeSource[sectionKey]) {
+        newLayoutData[sectionKey] = {
+          ...newLayoutData[sectionKey],
+          ...mergeSource[sectionKey],
+        };
       }
-    }
+    });
 
     this.layoutData = newLayoutData;
   }
@@ -248,18 +239,26 @@ class LayoutEngine {
       this.gridRatio.column = gridRatio.column;
     } else {
       this.gridRatio.column = columnNumber === 1 ? [100] : Array(columnNumber).fill(Math.floor(100 / columnNumber));
+
+      if (columnNumber === 3) {
+        this.gridRatio.column[2] = 100 - this.gridRatio.column[0] - this.gridRatio.column[1];
+      }
     }
 
     if (gridRatio?.row) {
       this.gridRatio.row = gridRatio.row;
     } else {
       this.gridRatio.row = rowNumber === 1 ? [100] : Array(rowNumber).fill(Math.floor(100 / rowNumber));
+
+      if (rowNumber === 3) {
+        this.gridRatio.row[2] = 100 - this.gridRatio.row[0] - this.gridRatio.row[1];
+      }
     }
 
     this.gridNumber.column = columnNumber;
     this.gridNumber.row = rowNumber;
 
-    if (gapSize) {
+    if (gapSize != null) {
       this.gapSize = gapSize;
     }
   }
@@ -274,6 +273,8 @@ class LayoutEngine {
       $gapSize: this.gapSize,
       timestamp: Date.now(),
     });
+
+    return { result: true, message: '갭 사이즈가 성공적으로 변경되었습니다.' };
   }
 
   /** 섹션 비율 변경
@@ -282,7 +283,7 @@ class LayoutEngine {
    * @param {number} ratio - 새로운 비율 값
    */
   setRatio(type, index, ratio) {
-    const ratioArray = type === 'column' ? this.gridRatio.column : this.gridRatio.row;
+    const ratioArray = this.gridRatio[type];
     ratioArray[index] = Number(ratio);
 
     const totalWithout = ratioArray.reduce((sum, val, idx) => {
@@ -295,34 +296,42 @@ class LayoutEngine {
     }
 
     const total = totalWithout + ratioArray[index];
+    const result = { result: true, message: '비율이 성공적으로 변경되었습니다.' };
+
     if (total == 100) {
-      return;
-    } else {
-      if (ratioArray.length == 2) {
-        index == 0 ? (ratioArray[1] = 100 - ratioArray[0]) : (ratioArray[0] = 100 - ratioArray[1]);
-      } else if (ratioArray.length == 3) {
-        const remaining = 100 - total;
-        if (remaining < 0) {
-          alert('비율의 합은 100을 초과할 수 없습니다.');
-        }
+      return result;
+    }
 
-        if (index == 2) {
-          ratioArray[0] = remaining < 0 ? ratioArray[0] + remaining : ratioArray[0] - remaining;
-        } else {
-          ratioArray[index + 1] = remaining < 0 ? ratioArray[index + 1] + remaining : ratioArray[index + 1] - remaining;
+    if (ratioArray.length == 2) {
+      index == 0 ? (ratioArray[1] = 100 - ratioArray[0]) : (ratioArray[0] = 100 - ratioArray[1]);
+    } else if (ratioArray.length == 3) {
+      const remaining = 100 - total;
+      if (remaining < 0) {
+        result.result = false;
+        result.message = '비율의 합은 100을 초과할 수 없습니다.';
+      }
+
+      if (index == 2) {
+        ratioArray[0] = ratioArray[0] - Math.abs(remaining);
+      } else {
+        ratioArray[index + 1] = ratioArray[index + 1] - Math.abs(remaining);
+
+        if (ratioArray[index + 1] < 0) {
+          ratioArray[index + 1] = 0;
+          ratioArray[2] = 100 - ratioArray[0] - ratioArray[1];
         }
       }
     }
-    if (type === 'column') {
-      this.gridRatio.column = ratioArray;
-    } else if (type === 'row') {
-      this.gridRatio.row = ratioArray;
-    }
+
+    this.gridRatio[type] = ratioArray;
 
     this.eventBus.emit('layout:updateRatio', {
+      $type: type,
       $gridRatio: this.gridRatio,
       timestamp: Date.now(),
     });
+
+    return result;
   }
 }
 

package/src/core/managers/EngineManager.js

@@ -9,6 +9,11 @@ const { dataConverter, calculateAspectRatio } = utils;
 import createDefaultConfig from '../../configs/index.js';
 const { initialState, resource } = createDefaultConfig();
 
+const CONFIG_LIMITS = {
+  column: { min: 1, max: 12, name: '열 개수' },
+  row: { min: 1, max: 50, name: '행 개수' },
+  gap: { min: 0, max: 12, name: '갭 크기' },
+};
 // event 발행 시 'system'으로 시작하는 이름 사용
 class EngineManager {
   constructor(config = {}) {
@@ -241,7 +246,7 @@ class EngineManager {
     if (!this.activeData || this.activeData.mode === mode) return;
     const updates = {
       mode: mode,
-      elementIds: this.state.elements.filter((x) => x.mode === mode).map((x) => x.id),
+      elementIds: this.state.elements.filter((x) => x.section === this.state.activeSection && x.mode === mode).map((x) => x.id),
     };
 
     if (mode === 'grid') {
@@ -267,17 +272,18 @@ class EngineManager {
    */
   setSectionConfig(type, config) {
     if (!['column', 'row', 'gap', 'guideLine'].includes(type)) {
-      console.error('[EngineManager] 잘못된 config 타입:', type);
-      return;
+      return { result: false, message: '입력할 수 없는 config 타입입니다.' };
     }
 
     if (!this.activeData) return;
 
-    const limits = {
-      column: { min: 1, max: 12, name: '열 개수' },
-      row: { min: 1, max: 50, name: '행 개수' },
-      gap: { min: 0, max: 12, name: '갭 크기' },
-    };
+    const limit = CONFIG_LIMITS[type];
+    const result = { result: true, message: 'config가 성공적으로 변경되었습니다.' };
+    // const limits = {
+    //   column: { min: 1, max: 12, name: '열 개수' },
+    //   row: { min: 1, max: 50, name: '행 개수' },
+    //   gap: { min: 0, max: 12, name: '갭 크기' },
+    // };
 
     let newConfig = {};
     let value = config;
@@ -285,13 +291,15 @@ class EngineManager {
     if (type === 'guideLine') {
       newConfig = { showGuideLine: value };
     } else {
-      if (value < limits[type].min) {
-        alert(`설정 가능한 최소 ${limits[type].name}는 ${limits[type].min}입니다.`);
+      if (value < limit.min) {
+        result.result = false;
+        result.message = `설정 가능한 최소 ${limit.name}는 ${limit.min}입니다.`;
       }
-      if (value > limits[type].max) {
-        alert(`설정 가능한 최대 ${limits[type].name}는 ${limits[type].max}입니다.`);
+      if (value > limit.max) {
+        result.result = false;
+        result.message = `설정 가능한 최대 ${limit.name}는 ${limit.max}입니다.`;
       }
-      value = Math.min(Math.max(limits[type].min, value), limits[type].max);
+      value = Math.min(Math.max(limit.min, value), limit.max);
 
       if (type === 'column') {
         newConfig = { gridColumns: value };
@@ -304,6 +312,8 @@ class EngineManager {
 
     const updates = { config: { ...this.activeData.config, ...newConfig } };
     this._updateActiveSectionConfig('config', updates);
+
+    return result;
   }
 
   /** ---------------------------------- freeDrop Engine ---------------------------------- **/

package/src/library/DisplayLibrary.js

@@ -115,9 +115,9 @@ function useDisplay(api) {
 
   const setDisplaySize = (type, size) => {
     try {
-      api.display.setDisplaySize(type, size);
+      return api.display.setDisplaySize(type, size);
     } catch (error) {
-      console.error('[useDisplay] setDisplaySize 실행 중 오류 발생:', error);
+      console.error('[DisplayLibrary] setDisplaySize 실행 중 오류 발생:', error);
     }
   };
 

package/src/library/LayoutLibrary.js

@@ -65,7 +65,7 @@ function useLayout(api) {
       state.layoutData = $layoutData;
       state.gridNumber = $gridNumber;
       state.gridRatio = $gridRatio;
-      if ($gapSize) {
+      if ($gapSize != null) {
         state.gapSize = $gapSize;
       }
     });
@@ -76,8 +76,8 @@ function useLayout(api) {
     });
 
     // gridRatio 변경 감지
-    _subscribe('layout:updateRatio', ({ $gridRatio }) => {
-      state.gridRatio = $gridRatio;
+    _subscribe('layout:updateRatio', ({ $type, $gridRatio }) => {
+      state.gridRatio[$type] = [...$gridRatio[$type]];
     });
 
     // activeSection 변경 감지 (activeData가 함께 초기화됨)
@@ -118,9 +118,6 @@ function useLayout(api) {
       state.elements = stateData.elements;
       state.layoutData = stateData.layoutData;
       state.activeSection = stateData.activeSection;
-
-      // state.layoutData = cloneDeep(api.layout.getLayoutData());
-      // state.activeData = cloneDeep(api.layout.getActiveData());
     });
 
     _subscribe('layout:restoredState', ({ stateData }) => {
@@ -180,7 +177,7 @@ function useLayout(api) {
 
   const setGapSize = (size) => {
     try {
-      api.layout.setGapSize(size);
+      return api.layout.setGapSize(size);
     } catch (error) {
       console.error('[useLayout] setGapSize 실행 중 오류 발생:', error);
     }
@@ -188,20 +185,12 @@ function useLayout(api) {
 
   const setRatio = (type, index, ratio) => {
     try {
-      api.layout.setRatio(type, index, ratio);
+      return api.layout.setRatio(type, index, ratio);
     } catch (error) {
       console.error('[useLayout] setRatio 실행 중 오류 발생:', error);
     }
   };
 
-  // const setUserLayoutData = (userData) => {
-  //   try {
-  //     api.layout.setUserLayoutData(userData);
-  //   } catch (error) {
-  //     console.error('[useLayout] setUserLayoutData 실행 중 오류 발생:', error);
-  //   }
-  // };
-
   const setActiveSection = (name) => {
     try {
       api.layout.setActiveSection(name);
@@ -236,7 +225,7 @@ function useLayout(api) {
 
   const setSectionConfig = (type, config) => {
     try {
-      api.layout.setSectionConfig(type, config);
+      return api.layout.setSectionConfig(type, config);
     } catch (error) {
       console.error('[useLayout] setSectionConfig 실행 중 오류 발생:', error);
     }
@@ -250,7 +239,6 @@ function useLayout(api) {
     setLayoutName,
     setGapSize,
     setRatio,
-    // setUserLayoutData,
     setActiveSection,
     setElements,
     updateActiveElement,