polarvo-layout 1.0.69 → 1.0.71

package/package.json

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

package/src/components/Layout/FreeLayout.vue

@@ -85,9 +85,8 @@ watch(
     if (newId && activeElement.value?.section !== props.sectionKey) return;
 
     if (!newId) {
-      console.l;
       setActiveDesign(null);
-      setActiveMenu(null);
+      // setActiveMenu(null);
     }
     _isElementSwitching = true;
     // selectedElement.value = structuredClone(toRaw(activeElement.value));

package/src/components/Layout/GridLayout.vue

@@ -344,6 +344,7 @@ watch(
 
     if (!newId) {
       setActiveDesign(null);
+      // setActiveMenu(null);
     }
     _isElementSwitching = true;
     // selectedElement.value = structuredClone(toRaw(activeElement.value));

package/src/configs/resources/elementResource.js

@@ -23,32 +23,20 @@ export const elementResource = {
     w: 300,
     h: 200,
   },
-  basicCalendar: {
-    w: 300,
-    h: 280,
-  },
-  basicPagination: {
-    w: 150,
-    h: 40,
-  },
-  basicRadio: {
-    w: 120,
-    h: 40,
-  },
-  basicSearch: {
-    w: 260,
-    h: 40,
+  email: {
+    w: 480,
+    h: 580,
   },
-  basicTable: {
-    w: 240,
-    h: 120,
+  fax: {
+    w: 440,
+    h: 420,
   },
-  basicTextbox: {
-    w: 200,
-    h: 80,
+  colorMake: {
+    w: 960,
+    h: 600,
   },
-  basicToggle: {
-    w: 120,
-    h: 40,
+  dyeMaker: {
+    w: 860,
+    h: 620,
   },
 };

package/src/configs/resources/layoutResource.js

@@ -15,9 +15,13 @@ const defaultConfig = {
   },
 };
 
-const createSections = (count, customConfig = {}) => {
-  const config = { ...defaultConfig, ...customConfig };
-  return Object.fromEntries(Array.from({ length: count }, (_, i) => [`section${i + 1}`, { ...config }]));
+const createSections = (count, positions = {}) => {
+  return Object.fromEntries(
+    Array.from({ length: count }, (_, i) => {
+      const key = `section${i + 1}`;
+      return [key, { ...defaultConfig, layoutPosition: positions[key] }];
+    }),
+  );
 };
 
 // 기본 아이콘 import
@@ -34,49 +38,57 @@ export const layoutResource = (icons = {}) => ({
     name: '전체화면',
     columnNumber: 1,
     rowNumber: 1,
-    sections: createSections(1),
+    sections: createSections(1, { section1: { col: 0, row: 0 } }),
     icon: markRaw(icons.NoSplitIcon || NoSplitIcon),
   },
   TopBottomSplit: {
     name: '상하 분할',
     columnNumber: 1,
     rowNumber: 2,
-    sections: createSections(2),
+    sections: createSections(2, { section1: { col: 0, row: 0 }, section2: { col: 0, row: 1 } }),
     icon: markRaw(icons.TopBottomSplitIcon || TopBottomSplitIcon),
   },
   LeftRightSplit: {
     name: '좌우 분할',
     columnNumber: 2,
     rowNumber: 1,
-    sections: createSections(2),
+    sections: createSections(2, { section1: { col: 0, row: 0 }, section2: { col: 1, row: 0 } }),
     icon: markRaw(icons.LeftRightSplitIcon || LeftRightSplitIcon),
   },
   ThreeRowSplit: {
     name: '수평 3분할',
     columnNumber: 1,
     rowNumber: 3,
-    sections: createSections(3),
+    sections: createSections(3, { section1: { col: 0, row: 0 }, section2: { col: 0, row: 1 }, section3: { col: 0, row: 2 } }),
     icon: markRaw(icons.ThreeRowSplitIcon || ThreeRowSplitIcon),
   },
   ThreeColumnSplit: {
     name: '수직 3분할',
     columnNumber: 3,
     rowNumber: 1,
-    sections: createSections(3),
+    sections: createSections(3, { section1: { col: 0, row: 0 }, section2: { col: 1, row: 0 }, section3: { col: 2, row: 0 } }),
     icon: markRaw(icons.ThreeColumnSplitIcon || ThreeColumnSplitIcon),
   },
   MainBottomSplit: {
     name: '메인-하단 분할',
     columnNumber: 2,
     rowNumber: 2,
-    sections: createSections(3),
+    sections: createSections(3, {
+      section1: { col: 0, row: 0, colSpan: 2 },
+      section2: { col: 0, row: 1 },
+      section3: { col: 1, row: 1 },
+    }),
     icon: markRaw(icons.MainBottomSplitIcon || MainBottomSplitIcon),
   },
   MainTopSplit: {
     name: '메인-상단 분할',
     columnNumber: 2,
     rowNumber: 2,
-    sections: createSections(3),
+    sections: createSections(3, {
+      section1: { col: 0, row: 0 },
+      section2: { col: 1, row: 0 },
+      section3: { col: 0, row: 1, colSpan: 2 },
+    }),
     icon: markRaw(icons.MainTopSplitIcon || MainTopSplitIcon),
   },
 });

package/src/core/engines/DisplayEngine.js

@@ -62,7 +62,9 @@ class DisplayEngine {
     });
 
     this._subscribe('freeDrop:setActiveElement', ({ action }) => {
-      if (action === 'update') return;
+      if (['update', 'sectionChange'].includes(action)) return;
+      if (action === 'click' && this.activeMenu === 'layout') return;
+
       this.setActiveMenu(null);
       this.setActiveDesign(null);
     });
@@ -74,7 +76,8 @@ class DisplayEngine {
     // });
 
     this._subscribe('gridDrop:setActiveElement', ({ action }) => {
-      if (action === 'update') return;
+      if (['update', 'sectionChange'].includes(action)) return;
+      if (action === 'click' && this.activeMenu === 'layout') return;
       this.setActiveMenu(null);
       this.setActiveDesign(null);
     });

package/src/core/engines/FreeDropEngine.js

@@ -89,7 +89,7 @@ class FreeDropEngine {
       this._activeMode = $mode;
       this._activeConfig = $config;
 
-      this.setActiveElement(null);
+      this.setActiveElement(null, 'sectionChange');
     });
 
     this._subscribe('system:setElements', ({ $elements }) => {
@@ -114,7 +114,7 @@ class FreeDropEngine {
       this._elements = $elements;
       this._elementsUpdate = true;
 
-      this.setActiveElement(this._elements.find((x) => x.id === $elementId));
+      this.setActiveElement(this._elements.find((x) => x.id === $elementId) ?? null);
 
       this.eventBus.emit('freeDrop:requestUpdateData', {
         elements: cloneDeep(this.freeElements),
@@ -226,7 +226,9 @@ class FreeDropEngine {
     if (this._elementsUpdate) {
       this._elementsUpdate = false;
 
-      const base = this._elements.filter((x) => x.mode === 'free');
+      // mode 관계없이 모든 요소 렌더링
+      // const base = this._elements.filter((x) => x.mode === 'free');
+      const base = this._elements;
 
       if (this._activeElement) {
         const exists = base.find((x) => x.id === this._activeElement?.id);
@@ -384,6 +386,29 @@ class FreeDropEngine {
   }
 
   /** ---------------------------------- 배치요소 관련 메소드 ---------------------------------- **/
+  getCurrentPosition() {
+    const currentElements = this.freeElements.filter((x) => x.section === this._activeSection);
+    if (!currentElements?.length) return { col: 1, row: 1 };
+
+    let lastRow = 0;
+    let lastCol = 0;
+
+    for (const element of currentElements) {
+      const endRow = element?.position.row + element?.size.rowSpan - 1;
+      const endCol = element?.position.col + element?.size.colSpan - 1;
+
+      // 최대 행 위치보다 크거나 같은 행에서 열 위치가 더 큰 경우 업데이트
+      if (endRow > lastRow || (endRow === lastRow && endCol > lastCol)) {
+        lastRow = endRow;
+        lastCol = endCol;
+      }
+    }
+
+    const { gridColumns = 2 } = this._activeConfig ?? {};
+    // 마지막 행의 최대 열 위치가 columnCount 이상이면 다음 행으로 이동
+    return lastCol >= gridColumns ? { col: 1, row: lastRow + 1 } : { col: lastCol + 1, row: lastRow };
+  }
+
   /** 배치요소 신규 추가 - 메뉴에서 추가 아이템 선택
    * @param {MouseEvent} event - 마우스 이벤트
    * @param {object} item - 추가할 아이템 정보
@@ -395,12 +420,15 @@ class FreeDropEngine {
     this._startPos = { x: event.clientX, y: event.clientY };
 
     const elementSource = this.getResourceByName('elements');
+
     const element = {
       id: elName + '_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 7),
       type: elName,
       mode: 'free',
-      position: this._startPos,
-      size: elementSource[elName] || { w: 100, h: 100 },
+      // position: this._startPos,
+      position: { ...this.getCurrentPosition(), ...this._startPos },
+      // size: elementSource[elName] || { w: 100, h: 100 },
+      size: { ...(elementSource[elName] || { w: 100, h: 100 }), colSpan: 1, rowSpan: 1 },
       section: this._activeSection,
       isLocked: false,
       ...(item.propDefaults || {}), // 아이템의 기본 props 설정
@@ -578,6 +606,22 @@ class FreeDropEngine {
       newW = this._snapToGrid(this._startSize.w + deltaX);
     }
 
+    // 섹션 경계 제한 (반대쪽 끝은 고정한 채 넘친 만큼만 축소)
+    const layoutRect = this._getLayoutRect();
+    if (layoutRect) {
+      if (newY < 0) {
+        newH += newY;
+        newY = 0;
+      }
+      if (newX < 0) {
+        newW += newX;
+        newX = 0;
+      }
+
+      newH = Math.round(Math.min(newH, layoutRect.height - newY));
+      newW = Math.round(Math.min(newW, layoutRect.width - newX));
+    }
+
     // 최소 크기 제한
     newW = Math.max(40, newW);
     newH = Math.max(20, newH);

package/src/core/engines/GridDropEngine.js

@@ -57,7 +57,7 @@ class GridDropEngine {
       this._activeMode = $mode;
       this._activeConfig = $config;
 
-      this.setActiveElement(null);
+      this.setActiveElement(null, 'sectionChange');
     });
 
     this._subscribe('system:setElements', ({ $elements }) => {
@@ -82,7 +82,8 @@ class GridDropEngine {
       this._elements = $elements;
       this._elementsUpdate = true;
 
-      this.setActiveElement(this._elements.find((x) => x.id === $elementId));
+      this.setActiveElement(this._elements.find((x) => x.id === $elementId) ?? null);
+
       this.eventBus.emit('gridDrop:requestUpdateData', {
         elements: cloneDeep(this.gridElements),
         timestamp: Date.now(),
@@ -177,7 +178,9 @@ class GridDropEngine {
     if (this._elementsUpdate) {
       this._elementsUpdate = false;
 
-      const base = this._elements.filter((x) => x.mode === 'grid');
+      // mode 관계없이 모든 요소 렌더링
+      // const base = this._elements.filter((x) => x.mode === 'grid');
+      const base = this._elements;
 
       if (this._activeElement) {
         const exists = base.find((x) => x.id === this._activeElement?.id);
@@ -346,13 +349,16 @@ class GridDropEngine {
     if (this._activeMode !== 'grid') return;
 
     const elName = item.elName;
+    const elementSource = this.elementResource;
 
     const element = {
       id: elName + '_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 7),
       type: elName,
       mode: 'grid',
-      position: { ...this._dragState.activeCell },
-      size: { colSpan: 1, rowSpan: 1 },
+      // position: { ...this._dragState.activeCell },
+      position: { x: 0, y: 0, ...this._dragState.activeCell },
+      // size: { colSpan: 1, rowSpan: 1 },
+      size: { ...(elementSource[elName] || { w: 100, h: 100 }), colSpan: 1, rowSpan: 1 },
       section: this._activeSection,
       isLocked: false,
       ...(item.propDefaults || {}), // 아이템의 기본 props 설정

package/src/core/engines/LayoutEngine.js

@@ -218,6 +218,7 @@ class LayoutEngine {
         newLayoutData[sectionKey] = {
           ...newLayoutData[sectionKey],
           ...mergeSource[sectionKey],
+          layoutPosition: newLayoutData[sectionKey].layoutPosition, // 항상 새 레이아웃 기준으로 고정
         };
       }
     });

package/src/core/managers/EngineManager.js

@@ -121,6 +121,7 @@ class EngineManager {
       // layoutEngine
       case 'layout': {
         const prevRatio = this.getEngine('layout').gridRatio; // 복원 전 현재 비율
+        const prevLayoutData = this.state.layoutData; // 복원 전 layoutData (섹션 layoutPosition 비교용)
         this.getEngine('layout')?.setState(state);
         this.state.layoutData = state.layoutData;
         this.setActiveSection(null, true);
@@ -129,7 +130,7 @@ class EngineManager {
           prevRatio.column.length !== state.gridRatio.column.length || prevRatio.column.some((v, i) => v !== state.gridRatio.column[i]);
 
         if (ratioChanged) {
-          this._updateElementsScaleByRatio('column', prevRatio, state.gridRatio);
+          this._updateElementsScaleByRatio('column', prevRatio, state.gridRatio, prevLayoutData);
         }
         break;
       }
@@ -249,6 +250,22 @@ class EngineManager {
       ...safeChanges,
     };
 
+    // free 모드 요소의 크기 직접 입력 시, 섹션 경계를 넘지 않도록 제한
+    if (updatedElement.mode === 'free' && safeChanges.size) {
+      const layoutEl = document.getElementById(`${updatedElement.section}Layout`);
+      if (layoutEl) {
+        const { width, height } = layoutEl.getBoundingClientRect();
+        const maxW = width - updatedElement.position.x;
+        const maxH = height - updatedElement.position.y;
+
+        updatedElement.size = {
+          ...updatedElement.size,
+          w: Math.round(Math.max(40, Math.min(updatedElement.size.w, maxW))),
+          h: Math.round(Math.max(20, Math.min(updatedElement.size.h, maxH))),
+        };
+      }
+    }
+
     this.state.elements = [...this.state.elements.slice(0, index), updatedElement, ...this.state.elements.slice(index + 1)];
 
     // 변경된 element만 전달
@@ -328,12 +345,14 @@ class EngineManager {
     });
 
     this._subscribe('layout:updateLayoutName', ({ $layoutData, $gridRatio, $prev }) => {
+      const prevLayoutData = this.state.layoutData; // 레이아웃 전환 전 layoutData (섹션 layoutPosition 비교용)
       this.state.layoutData = $layoutData;
+
       this.setActiveSection(null, true);
 
       const prevGridRatio = $prev?.gridRatio || { column: [100], row: [100] };
-      this._updateElementsScaleByRatio('column', prevGridRatio, $gridRatio);
-      this._updateElementsScaleByRatio('row', prevGridRatio, $gridRatio);
+      this._updateElementsScaleByRatio('column', prevGridRatio, $gridRatio, prevLayoutData);
+      this._updateElementsScaleByRatio('row', prevGridRatio, $gridRatio, prevLayoutData);
 
       nextTick(() => {
         this.eventBus.emit('system:historyCheckpoint', {
@@ -361,50 +380,50 @@ class EngineManager {
     });
   }
 
-  _updateElementsScaleByRatio(type, oldValue, newValue) {
-    const oldLength = oldValue[type].length;
-    const newLength = newValue[type].length;
+  /** [내부함수] gridRatio 변경에 따라 요소 position/size 재계산
+   * @param {string} type - 'column' | 'row'
+   * @param {object} oldValue - 변경 전 gridRatio ({ column, row })
+   * @param {object} newValue - 변경 후 gridRatio ({ column, row })
+   * @param {object} oldLayoutData - 변경 전 layoutData.
+   * 생략 시: 섹션 비율만 조정하는 경우
+   * 레이아웃 자체가 바뀌는 호출은 변경 전 layoutData를 넘겨야 함
+   */
+  _updateElementsScaleByRatio(type, oldValue, newValue, oldLayoutData = this.state.layoutData) {
+    // 축(column, row)에 따라 positionKey, sizeKey 결정
+    const positionKey = type === 'column' ? 'x' : 'y';
+    const sizeKey = type === 'column' ? 'w' : 'h';
+
+    // 요소를 받아서 좌표, 크기에 대해 배율을 곱해 새 요소 객체 반환하는 헬퍼
+    // column이면 x, w만 수정 / row면 y, h만 수정
+    const scaleElement = (el, scaleFactor) => ({
+      ...el,
+      position: { ...el.position, [positionKey]: el.position[positionKey] * scaleFactor },
+      size: { ...el.size, [sizeKey]: el.size[sizeKey] * scaleFactor },
+    });
 
-    let newDisplaySize = { ...this._displaySize };
+    // 섹션이 전체 너비/높이에서 차지하는 퍼센트 계산
+    const axisRatio = (ratios, pos) => {
+      const start = type === 'column' ? pos.col : pos.row; // 섹션이 시작하는 인덱스
+      const span = (type === 'column' ? pos.colSpan : pos.rowSpan) ?? 1; // 섹션이 차지하는 칸 수
+      return ratios.slice(start, start + span).reduce((sum, v) => sum + v, 0) / 100;
+    };
 
-    // 열 또는 행 개수가 늘어나는 경우 - 요소 크기 줄이기
-    if (oldLength < newLength) {
-      newDisplaySize.px = newDisplaySize.px / newLength;
-      this._updateElementsScale(this._displaySize, newDisplaySize);
-    }
-    // 열 또는 행 개수가 줄어드는 경우 - 요소 크기 늘리기
-    else if (oldLength > newLength) {
-      newDisplaySize.px = newDisplaySize.px / oldLength;
-      this._updateElementsScale(newDisplaySize, this._displaySize);
-    }
-    // 열 또는 행 개수는 동일하지만 비율이 변경되는 경우 - 요소 크기 조정
-    else {
-      this.state.elements = this.state.elements.map((el) => {
-        const sectionIndex = el.section ? parseInt(el.section.replace('section', '')) - 1 : 0;
-        const oldRatio = oldValue[type][sectionIndex] / 100;
-        const newRatio = newValue[type][sectionIndex] / 100;
-
-        const scaleFactor = newRatio / oldRatio;
-        return type === 'column'
-          ? {
-              ...el,
-              position: { ...el.position, x: el.position.x * scaleFactor },
-              size: { ...el.size, w: el.size.w * scaleFactor },
-            }
-          : {
-              ...el,
-              position: { ...el.position, y: el.position.y * scaleFactor },
-              size: { ...el.size, h: el.size.h * scaleFactor },
-            };
-      });
+    this.state.elements = this.state.elements.map((el) => {
+      const oldPos = oldLayoutData?.[el.section]?.layoutPosition; // 변경 전 요소의 섹션 위치
+      const newPos = this.state.layoutData?.[el.section]?.layoutPosition; // 변경 후 요소의 섹션 위치
+      if (!oldPos || !newPos) return el;
 
-      // nextTick(() => {
-      this.eventBus.emit('system:requestElementsScale', {
-        $elements: this.state.elements,
-        timestamp: Date.now(),
-      });
-      // });
-    }
+      const oldRatio = axisRatio(oldValue[type], oldPos);
+      if (!oldRatio) return el;
+      const newRatio = axisRatio(newValue[type], newPos);
+
+      return scaleElement(el, newRatio / oldRatio);
+    });
+
+    this.eventBus.emit('system:requestElementsScale', {
+      $elements: this.state.elements,
+      timestamp: Date.now(),
+    });
   }
 
   /** activeSection 변경
@@ -434,23 +453,34 @@ class EngineManager {
     }
 
     if (!this.activeData || this.activeData.mode === mode) return;
+    // mode 관계없이 모든 요소 렌더링
     const updates = {
       mode: mode,
-      elementIds: this.state.elements.filter((x) => x.section === this.state.activeSection && x.mode === mode).map((x) => x.id),
+      elementIds: this.state.elements.filter((x) => x.section === this.state.activeSection).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') {
+    // if (mode === 'grid') {
+    //   updates.config = {
+    //     gridColumns: this.activeData.config?.gridColumns || 2,
+    //     gridRows: this.activeData.config?.gridRows || 2,
+    //     gridGap: this.activeData.config?.gridGap || 4,
+    //     gridRowRatio: this.activeData.config?.gridRowRatio || [],
+    //     gridColumnRatio: this.activeData.config?.gridColumnRatio || [],
+    //   };
+    // } else if (mode === 'free') {
+    //   updates.config = {
+    //     showGuideLine: this.activeData.config?.showGuideLine || false,
+    //   };
+    // }
+
       updates.config = {
         gridColumns: this.activeData.config?.gridColumns || 2,
         gridRows: this.activeData.config?.gridRows || 2,
         gridGap: this.activeData.config?.gridGap || 4,
         gridRowRatio: this.activeData.config?.gridRowRatio || [],
         gridColumnRatio: this.activeData.config?.gridColumnRatio || [],
-      };
-    } else if (mode === 'free') {
-      updates.config = {
         showGuideLine: this.activeData.config?.showGuideLine || false,
-      };
     }
 
     this._updateActiveSectionConfig('mode', updates);
@@ -536,7 +566,11 @@ class EngineManager {
 
       this.state.elements.push(element);
       const targetSectionData = this.state.layoutData?.[element.section];
-      this._updateActiveSectionConfig('elementIds', { elementIds: [...(targetSectionData?.elementIds || []), element.id] }, element.section);
+      this._updateActiveSectionConfig(
+        'elementIds',
+        { elementIds: [...(targetSectionData?.elementIds || []), element.id] },
+        element.section,
+      );
 
       this.eventBus.emit('system:requestUpdateElement', {
         action: 'add',
@@ -556,9 +590,13 @@ class EngineManager {
       const target = this.state.elements.find((el) => el.id === elementId);
       this.state.elements = this.state.elements.filter((el) => el.id !== elementId);
       const targetSectionData = this.state.layoutData?.[target?.section];
-      this._updateActiveSectionConfig('elementIds', {
-        elementIds: (targetSectionData?.elementIds || []).filter((elId) => elId !== elementId),
-      }, target?.section);
+      this._updateActiveSectionConfig(
+        'elementIds',
+        {
+          elementIds: (targetSectionData?.elementIds || []).filter((elId) => elId !== elementId),
+        },
+        target?.section,
+      );
       // this._updateActiveElementIds(this.activeData.elementIds.filter((elId) => elId !== elementId));
 
       this.eventBus.emit('system:requestUpdateElement', {
@@ -610,7 +648,11 @@ class EngineManager {
 
       this.state.elements.push(element);
       const targetSectionData = this.state.layoutData?.[element.section];
-      this._updateActiveSectionConfig('elementIds', { elementIds: [...(targetSectionData?.elementIds || []), element.id] }, element.section);
+      this._updateActiveSectionConfig(
+        'elementIds',
+        { elementIds: [...(targetSectionData?.elementIds || []), element.id] },
+        element.section,
+      );
       // this._updateActiveElementIds([...this.activeData.elementIds, element.id]);
 
       this.eventBus.emit('system:requestUpdateElement', {
@@ -631,9 +673,13 @@ class EngineManager {
       const target = this.state.elements.find((el) => el.id === elementId);
       this.state.elements = this.state.elements.filter((el) => el.id !== elementId);
       const targetSectionData = this.state.layoutData?.[target?.section];
-      this._updateActiveSectionConfig('elementIds', {
-        elementIds: (targetSectionData?.elementIds || []).filter((elId) => elId !== elementId),
-      }, target?.section);
+      this._updateActiveSectionConfig(
+        'elementIds',
+        {
+          elementIds: (targetSectionData?.elementIds || []).filter((elId) => elId !== elementId),
+        },
+        target?.section,
+      );
       // this._updateActiveElementIds(this.activeData.elementIds.filter((elId) => elId !== elementId));
 
       this.eventBus.emit('system:requestUpdateElement', {

package/src/library/FreeDropLibrary.js

@@ -143,9 +143,9 @@ function useFreeDrop(api) {
     }
   };
 
-  const setActiveElement = (element, type) => {
+  const setActiveElement = (element, action) => {
     try {
-      api.freeDrop.setActiveElement(element, type);
+      api.freeDrop.setActiveElement(element, action);
     } catch (error) {
       console.warn('[FreeDropLibrary] setActiveElement 실행 중 오류 발생:', error);
     }

package/src/library/GridDropLibrary.js

@@ -118,9 +118,9 @@ function useGridDrop(api) {
     }
   };
 
-  const setActiveElement = (element, type) => {
+  const setActiveElement = (element, action) => {
     try {
-      api.gridDrop.setActiveElement(element, type);
+      api.gridDrop.setActiveElement(element, action);
     } catch (error) {
       console.warn('[GridDropLibrary] setActiveElement 실행 중 오류 발생:', error);
     }