polarvo-layout 1.0.17 → 1.0.19

package/package.json

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

package/src/components/SideBar/ElementSideBar.vue

@@ -4,9 +4,8 @@
       v-for="(item, index) in allElements"
       :key="index"
       class="flex flex-col items-center justify-center border border-gray-200 rounded-lg p-2 hover:bg-gray-50 transition-colors cursor-pointer active:scale-95"
-      @mousedown.stop="addElementToFree($event, item.elName)"
-      @click="addElementToGrid(item.elName)"
-      >
+      @mousedown.stop="sectionMode == 'free' ? addElementToFree($event, item.elName) : addElementToGrid(item.elName)"
+    >
       <img :src="item.imgurl" alt="" class="w-24 h-auto rounded" />
       <h4 class="text-sm">{{ item.elName }}</h4>
     </div>
@@ -14,7 +13,7 @@
 </template>
 
 <script setup>
-import { ref, onBeforeMount } from 'vue';
+import { ref, onBeforeMount, toRefs, computed } from 'vue';
 
 const props = defineProps({
   polarvo: {
@@ -30,11 +29,16 @@ const props = defineProps({
 const { addElement: addElementToFree } = props.polarvo.freeDrop;
 const { addElement: addElementToGrid } = props.polarvo.gridDrop;
 
+const { activeData } = toRefs(props.polarvo.layout.state);
+const sectionMode = computed(() => activeData.value?.mode);
+
 const allElements = ref([]);
 
 /** 프로젝트 폴더에서 요소 컴포넌트 주소를 맞춰줘야 정상 작동합니다.
  * (현재 /src/components/elements/ 내부에 모든 요소 컴포넌트가 있어야 함) */
 const modules = import.meta.glob('@/components/elements/*.vue');
+const imageModules = import.meta.glob('@/assets/el_img/*.{png,gif}', { eager: true });
+
 async function getElements() {
   // 특정 컴포넌트는 제외
   const excludedElements = [
@@ -58,9 +62,12 @@ async function getElements() {
 
       // 확장자 조건 설정
       const ext = elName === 'dataList' ? 'gif' : 'png';
+      const imgKey = `/src/assets/el_img/${elName}.${ext}`;
+
       let result = {
         elName,
-        imgurl: new URL(`../../assets/el_img/${elName}.${ext}`, props.urlBase),
+        // imgurl: new URL(`../../assets/el_img/${elName}.${ext}`, props.urlBase),
+        imgurl: imageModules[imgKey]?.default ?? '',
         // component: markRaw(defineAsyncComponent(modules[path]))
       };
 

package/src/core/engines/FreeDropEngine.js

@@ -122,17 +122,18 @@ class FreeDropEngine {
       });
     });
 
-    this._subscribe('system:requestUpdateActiveElement', ({ elements, elementId }) => {
-      this._elements = elements;
-      this._elementsUpdate = true;
+    this._subscribe('system:requestUpdateActiveElement', ({ elementId, element }) => {
+      const index = this._elements.findIndex((x) => x.id === elementId);
+
+      if (index !== -1) {
+        this._elements[index] = element; // 업데이트
+        this._elementsUpdate = true;
+      }
 
-      const element = this._elements.find((x) => x.id === elementId);
       this.setActiveElement(element, 'update');
-      // this.setActiveElement(element);
 
       this.eventBus.emit('freeDrop:requestUpdateActiveElement', {
         element: element,
-        // elements: cloneDeep(this.freeElements),
         timestamp: Date.now(),
       });
     });

package/src/core/engines/GridDropEngine.js

@@ -103,20 +103,18 @@ class GridDropEngine {
       });
     });
 
-    this._subscribe('system:requestUpdateActiveElement', ({ elements, elementId }) => {
-      this._elements = elements;
-      this._elementsUpdate = true;
+    this._subscribe('system:requestUpdateActiveElement', ({ elementId, element }) => {
+      const index = this._elements.findIndex((x) => x.id === elementId);
+
+      if (index !== -1) {
+        this._elements[index] = element; // 업데이트
+        this._elementsUpdate = true;
+      }
 
-      const element = this._elements.find((x) => x.id === elementId);
       this.setActiveElement(element, 'update');
-      // Object.assign(
-      //   element,
-      //   elements.find((x) => x.id === elementId),
-      // );
 
       this.eventBus.emit('gridDrop:requestUpdateActiveElement', {
         element: element,
-        // elements: cloneDeep(this.gridElements),
         timestamp: Date.now(),
       });
     });
@@ -212,7 +210,6 @@ class GridDropEngine {
     this._elementsUpdate = false;
   }
 
-
   /** 활성화 배치요소 변경
    * @param {object|null} element - 활성화할 배치요소 객체 (null인 경우 비활성화)
    * @param {string|null} action - 변경 액션 (예: 'click', 'reset' 등)
@@ -391,7 +388,6 @@ class GridDropEngine {
     // 리사이징 중이면 드래그 불가
     if (this._dragState.isResizing) return;
 
-
     // 기존 아이템인 경우
     if (item.id) {
       // 우클릭 시 해당 아이템 삭제

package/src/core/managers/EngineManager.js

@@ -27,9 +27,7 @@ class EngineManager {
     };
 
     // (캐시) layoutData 및 activeSection 변경 감지용 -> activeData getter에서 사용
-    this._dataUpdate = false;
     this._layoutData = null;
-    this._activeData = null;
 
     // (캐시) dataConverter에서 사용하는 현재 컨테이너 크기
     this._containerWidth = 1920;
@@ -43,11 +41,10 @@ class EngineManager {
    * @return {object} - layoutData 중 activeSection 데이터 객체
    */
   get activeData() {
-    if (this._dataUpdate && this.state.activeSection) {
-      this._activeData = this._layoutData[this.state.activeSection];
-      this._dataUpdate = false;
+    if (!this._layoutData || !this.state.activeSection) {
+      return null;
     }
-    return this._activeData;
+    return this._layoutData[this.state.activeSection];
   }
 
   /** 상태 정보 반환
@@ -102,8 +99,6 @@ class EngineManager {
       ...updates,
     };
 
-    this._dataUpdate = true;
-
     // 이벤트 발행
     this.eventBus.emit('system:updateActiveSectionConfig', {
       type: type,
@@ -113,30 +108,38 @@ class EngineManager {
     });
   }
 
-  /** [내부함수] activeSection의 elementIds 업데이트
-   * @param {Array} elementIds - 새로운 elementIds 배열
-   */
-  _updateActiveElementIds(elementIds) {
-    if (!this._layoutData || !this.state.activeSection) {
-      console.error('[EngineManager] activeData를 업데이트할 수 없습니다.');
-      return;
-    }
+  // /** [내부함수] activeSection의 elementIds 업데이트
+  //  * @param {Array} elementIds - 새로운 elementIds 배열
+  //  */
+  // _updateActiveElementIds(elementIds) {
+  //   if (!this._layoutData || !this.state.activeSection) {
+  //     console.error('[EngineManager] activeData를 업데이트할 수 없습니다.');
+  //     return;
+  //   }
 
-    if (!('elementIds' in this._layoutData[this.state.activeSection])) {
-      this._layoutData[this.state.activeSection].elementIds = [];
-    }
+  //   if (!('elementIds' in this._layoutData[this.state.activeSection])) {
+  //     this._layoutData[this.state.activeSection].elementIds = [];
+  //   }
 
-    this._layoutData[this.state.activeSection].elementIds = elementIds;
-    this._dataUpdate = true;
-  }
+  //   this._layoutData[this.state.activeSection].elementIds = elementIds;
+  // }
 
   /** 현재 컨테이너 크기 설정 */
   setContainerSize() {
-    const containerEl = document.getElementById('baseLayout');
-    const containerRect = containerEl.getBoundingClientRect();
+    try {
+      const containerEl = document.getElementById('baseLayout');
+      if (!containerEl) {
+        console.warn('[EngineManager] baseLayout 요소를 찾을 수 없습니다.');
+        return false;
+      }
+      const { width, height } = containerEl.getBoundingClientRect();
 
-    this._containerWidth = containerRect.width ?? this._containerWidth;
-    this._containerHeight = containerRect.height ?? this._containerHeight;
+      this._containerWidth = width ?? this._containerWidth;
+      this._containerHeight = height ?? this._containerHeight;
+    } catch (error) {
+      console.error('[EngineManager] 컨테이너 크기 설정 중 오류 발생: ', error);
+      return false;
+    }
   }
 
   getContainerSize() {
@@ -149,8 +152,12 @@ class EngineManager {
   /** elements 초기화
    * @param {Array} elements - 새로운 elements 배열
    */
-  // [추가 예정] elements의 position, size (비율로 저장됨)를 실제 값으로 변환하여 rendering
   setElements(elements) {
+    if (!elements || !Array.isArray(elements)) {
+      console.error('[EngineManager] 유효하지 않은 elements:', elements);
+      return false;
+    }
+
     const denormalizedElements = dataConverter.denormalize(elements, this._containerWidth, this._containerHeight);
 
     // section 정보가 없는 경우 section1으로 간주
@@ -158,7 +165,7 @@ class EngineManager {
 
     this.eventBus.emit('system:setElements', {
       layoutData: cloneDeep(this._layoutData),
-      elements: cloneDeep(this.state.elements),
+      elements: this.state.elements,
       timestamp: Date.now(),
     });
   }
@@ -168,16 +175,29 @@ class EngineManager {
    * @param {object} changes - 변경할 속성 객체
    */
   updateActiveElement(id, changes) {
-    const exists = this.state.elements.find((x) => x.id === id);
-    if (exists) {
-      Object.assign(exists, changes);
+    if (!id || !changes) return false;
 
-      this.eventBus.emit('system:requestUpdateActiveElement', {
-        elements: this.state.elements,
-        elementId: id,
-        timestamp: Date.now(),
-      });
-    }
+    const index = this.state.elements.findIndex((x) => x.id === id);
+    if (index === -1) return false;
+
+    // 보호필드 (id, mode, section)은 직접 업데이트 불가 - 레이아웃 엔진에서 일괄 관리
+    const { id: _, mode: __, section: ___, ...safeChanges } = changes;
+    if (Object.keys(safeChanges).length === 0) return false;
+
+    const updatedElement = {
+      ...this.state.elements[index],
+      ...safeChanges,
+    };
+
+    this.state.elements = [...this.state.elements.slice(0, index), updatedElement, ...this.state.elements.slice(index + 1)];
+
+    // 변경된 element만 전달
+    this.eventBus.emit('system:requestUpdateActiveElement', {
+      // elements: this.state.elements,
+      elementId: id,
+      element: updatedElement,
+      timestamp: Date.now(),
+    });
   }
 
   /** ---------------------------------- display Engine ---------------------------------- **/
@@ -194,10 +214,20 @@ class EngineManager {
 
   _updateElementsScale(oldValue, newValue) {
     const oldWidth = oldValue.px;
-    const oldHeight = oldValue.px / oldValue.aspectRatio.split('/').map(Number).reduce((a, b) => a / b);
+    const oldHeight =
+      oldValue.px /
+      oldValue.aspectRatio
+        .split('/')
+        .map(Number)
+        .reduce((a, b) => a / b);
 
     const newWidth = newValue.px;
-    const newHeight = newValue.px / newValue.aspectRatio.split('/').map(Number).reduce((a, b) => a / b);
+    const newHeight =
+      newValue.px /
+      newValue.aspectRatio
+        .split('/')
+        .map(Number)
+        .reduce((a, b) => a / b);
 
     nextTick(() => {
       this.setContainerSize();
@@ -221,7 +251,6 @@ class EngineManager {
     // layoutName 변경에 따른 activeSection 초기화
     this._subscribe('layout:setLayoutName', ({ screenConfig }) => {
       this._layoutData = screenConfig.layoutData;
-      this._dataUpdate = true;
       this.setActiveSection('section1', true);
 
       this.eventBus.emit('system:updateLayoutData', {
@@ -232,7 +261,6 @@ class EngineManager {
     });
     this._subscribe('layout:updateLayoutName', ({ layoutData }) => {
       this._layoutData = layoutData;
-      this._dataUpdate = true;
       this.setActiveSection(null, true);
 
       this.eventBus.emit('system:updateLayoutData', {
@@ -251,7 +279,6 @@ class EngineManager {
     if (!setting && this.state.activeSection === name) return;
 
     this.state.activeSection = name;
-    this._dataUpdate = true;
 
     this.eventBus.emit('system:updateActiveSection', {
       activeSection: name,
@@ -328,9 +355,15 @@ class EngineManager {
   _setupFreeDropEngineConnections() {
     // 배치요소 추가 요청
     this._subscribe('freeDrop:requestAddElement', ({ element }) => {
+      if (this.state.elements.some((el) => el.id === element.id)) {
+        return;
+      }
+      
       this.state.elements.push(element);
-      this._updateActiveElementIds([...this.activeData.elementIds, element.id]);
+      this._updateActiveSectionConfig('elementIds', { elementIds: [...this.activeData.elementIds, element.id] });
+      // this._updateActiveElementIds([...this.activeData.elementIds, element.id]);
 
+      console.log('this.state.elements', this.state.elements)
       this.eventBus.emit('system:requestUpdateData', {
         action: 'add',
         elements: this.state.elements,
@@ -345,7 +378,8 @@ class EngineManager {
     // 배치요소 삭제 요청
     this._subscribe('freeDrop:requestDeleteElement', ({ elementId }) => {
       this.state.elements = this.state.elements.filter((el) => el.id !== elementId);
-      this._updateActiveElementIds(this.activeData.elementIds.filter((elId) => elId !== elementId));
+      this._updateActiveSectionConfig('elementIds', { elementIds: this.activeData.elementIds.filter((elId) => elId !== elementId) });
+      // this._updateActiveElementIds(this.activeData.elementIds.filter((elId) => elId !== elementId));
 
       this.eventBus.emit('system:requestUpdateData', {
         action: 'delete',
@@ -381,7 +415,8 @@ class EngineManager {
     // 배치요소 추가 요청
     this._subscribe('gridDrop:requestAddElement', ({ element }) => {
       this.state.elements.push(element);
-      this._updateActiveElementIds([...this.activeData.elementIds, element.id]);
+      this._updateActiveSectionConfig('elementIds', { elementIds: [...this.activeData.elementIds, element.id] });
+      // this._updateActiveElementIds([...this.activeData.elementIds, element.id]);
 
       this.eventBus.emit('system:requestUpdateData', {
         action: 'add',
@@ -397,7 +432,8 @@ class EngineManager {
     // 배치요소 삭제 요청
     this._subscribe('gridDrop:requestDeleteElement', ({ elementId }) => {
       this.state.elements = this.state.elements.filter((el) => el.id !== elementId);
-      this._updateActiveElementIds(this.activeData.elementIds.filter((elId) => elId !== elementId));
+      this._updateActiveSectionConfig('elementIds', { elementIds: this.activeData.elementIds.filter((elId) => elId !== elementId) });
+      // this._updateActiveElementIds(this.activeData.elementIds.filter((elId) => elId !== elementId));
 
       this.eventBus.emit('system:requestUpdateData', {
         action: 'delete',
@@ -412,7 +448,6 @@ class EngineManager {
 
     // 배치요소 위치 및 사이즈 변경 요청
     this._subscribe('gridDrop:requestUpdateElement', ({ historyEvent, elementId, position, size }) => {
-
       const element = this.state.elements.find((el) => el.id === elementId);
       if (element) {
         element.position = position;
@@ -613,9 +648,7 @@ class EngineManager {
     this.engines.clear();
     this._initialized = false;
 
-    this._dataUpdate = false;
     this._layoutData = null;
-    this._activeData = null;
 
     this.state = {};
     this.eventBus = null;
@@ -630,9 +663,7 @@ class EngineManager {
       ...this.config.initialState,
     };
 
-    this._dataUpdate = false;
     this._layoutData = null;
-    this._activeData = null;
 
     this.eventBus.emit('system:enginesReset', {
       timestamp: Date.now(),

package/src/core/managers/originals/EngineManager copy.js

@@ -0,0 +1,786 @@
+import { cloneDeep } from 'lodash-es';
+import { nextTick } from 'vue';
+
+import EventBus from '../EventBus.js';
+import ApiManager from '../ApiManager.js';
+import utils from '../../../utils/index.js';
+const { dataConverter } = utils;
+
+import createDefaultConfig from '../../../configs/index.js';
+const { initialState, resource } = createDefaultConfig();
+
+// event 발행 시 'system'으로 시작하는 이름 사용
+class EngineManager {
+  constructor(config = {}) {
+    this.eventBus = new EventBus();
+    this.engines = new Map();
+    this.config = { ...config };
+
+    // API 인스턴스
+    if (config.apiClient) {
+      this.apiManager = new ApiManager(config.apiClient, config.apiEndpoints);
+    }
+
+    this.state = {
+      ...initialState,
+      ...config.initialState,
+    };
+
+    // (캐시) layoutData 및 activeSection 변경 감지용 -> activeData getter에서 사용
+    this._dataUpdate = false;
+    this._layoutData = null;
+    this._activeData = null;
+
+    // (캐시) dataConverter에서 사용하는 현재 컨테이너 크기
+    this._containerWidth = 1920;
+    this._containerHeight = 1080;
+
+    this._subscriptions = [];
+    this._initialized = false;
+  }
+
+  /** activeSection 데이터 반환
+   * @return {object} - layoutData 중 activeSection 데이터 객체
+   */
+  get activeData() {
+    if (this._dataUpdate && this.state.activeSection) {
+      this._activeData = this._layoutData[this.state.activeSection];
+      this._dataUpdate = false;
+    }
+    return this._activeData;
+  }
+
+  /** 상태 정보 반환
+   * @return {object} - 현재 상태 객체
+   */
+  getState() {
+    return {
+      elements: this.state.elements,
+      layoutData: cloneDeep(this._layoutData),
+      activeData: cloneDeep(this.activeData),
+      activeSection: this.state.activeSection,
+    };
+  }
+
+  /** 상태 정보 설정
+   * @param {object} state - 복원할 상태 객체
+   */
+  setState(state) {
+    this.state.elements = state.elements;
+    this._layoutData = state.layoutData;
+    this.setActiveSection(state.activeSection);
+
+    this.eventBus.emit('system:restoredState', {
+      stateData: state,
+      timestamp: Date.now(),
+    });
+  }
+
+  /** [내부함수] activeSection의 설정값 업데이트
+   * @param {string} type - 설정 타입 (mode, config)
+   * @param {object} updates - 업데이트할 설정 값 객체
+   */
+  _updateActiveSectionConfig(type, updates) {
+    if (!this._layoutData || !this.state.activeSection) {
+      console.error('[EngineManager] activeData를 업데이트할 수 없습니다.');
+      return;
+    }
+
+    Object.keys(updates).forEach((key) => {
+      if (!(key in this._layoutData[this.state.activeSection])) {
+        if (key == 'elementIds') {
+          this._layoutData[this.state.activeSection][key] = [];
+        } else {
+          this._layoutData[this.state.activeSection][key] = null;
+        }
+      }
+    });
+
+    // 원본 데이터 업데이트
+    this._layoutData[this.state.activeSection] = {
+      ...this._layoutData[this.state.activeSection],
+      ...updates,
+    };
+
+    this._dataUpdate = true;
+
+    // 이벤트 발행
+    this.eventBus.emit('system:updateActiveSectionConfig', {
+      type: type,
+      layoutData: cloneDeep(this._layoutData),
+      activeData: cloneDeep(this.activeData),
+      timestamp: Date.now(),
+    });
+  }
+
+  /** [내부함수] activeSection의 elementIds 업데이트
+   * @param {Array} elementIds - 새로운 elementIds 배열
+   */
+  _updateActiveElementIds(elementIds) {
+    if (!this._layoutData || !this.state.activeSection) {
+      console.error('[EngineManager] activeData를 업데이트할 수 없습니다.');
+      return;
+    }
+
+    if (!('elementIds' in this._layoutData[this.state.activeSection])) {
+      this._layoutData[this.state.activeSection].elementIds = [];
+    }
+
+    this._layoutData[this.state.activeSection].elementIds = elementIds;
+    this._dataUpdate = true;
+  }
+
+  /** 현재 컨테이너 크기 설정 */
+  setContainerSize() {
+    const containerEl = document.getElementById('baseLayout');
+    const containerRect = containerEl.getBoundingClientRect();
+
+    this._containerWidth = containerRect.width ?? this._containerWidth;
+    this._containerHeight = containerRect.height ?? this._containerHeight;
+  }
+
+  getContainerSize() {
+    return {
+      width: this._containerWidth,
+      height: this._containerHeight,
+    };
+  }
+
+  /** elements 초기화
+   * @param {Array} elements - 새로운 elements 배열
+   */
+  setElements(elements) {
+    const denormalizedElements = dataConverter.denormalize(elements, this._containerWidth, this._containerHeight);
+
+    // section 정보가 없는 경우 section1으로 간주
+    this.state.elements = denormalizedElements.map((x) => (x.section ? { ...x } : { ...x, section: 'section1' }));
+
+    this.eventBus.emit('system:setElements', {
+      layoutData: cloneDeep(this._layoutData),
+      elements: cloneDeep(this.state.elements),
+      timestamp: Date.now(),
+    });
+  }
+
+  /** activeElement 업데이트
+   * @param {string} id - 업데이트할 element의 ID
+   * @param {object} changes - 변경할 속성 객체
+   */
+  updateActiveElement(id, changes) {
+    const exists = this.state.elements.find((x) => x.id === id);
+    if (exists) {
+      Object.assign(exists, changes);
+
+      this.eventBus.emit('system:requestUpdateActiveElement', {
+        elements: this.state.elements,
+        elementId: id,
+        timestamp: Date.now(),
+      });
+    }
+  }
+
+  /** ---------------------------------- display Engine ---------------------------------- **/
+  /** [내부함수] displayEngine 연결 설정 */
+  _setupDisplayEngineConnections() {
+    this._subscribe('display:updateDisplayMode', ({ displaySize, prev }) => {
+      this._updateElementsScale(prev.displaySize, displaySize);
+    });
+
+    this._subscribe('display:updateDisplaySize', ({ displaySize, prev }) => {
+      this._updateElementsScale(prev.displaySize, displaySize);
+    });
+  }
+
+  _updateElementsScale(oldValue, newValue) {
+    const oldWidth = oldValue.px;
+    const oldHeight = oldValue.px / oldValue.aspectRatio.split('/').map(Number).reduce((a, b) => a / b);
+
+    const newWidth = newValue.px;
+    const newHeight = newValue.px / newValue.aspectRatio.split('/').map(Number).reduce((a, b) => a / b);
+
+    nextTick(() => {
+      this.setContainerSize();
+
+      const normalizeElements = dataConverter.normalize(this.state.elements, oldWidth, oldHeight);
+      const denormalizedElements = dataConverter.denormalize(normalizeElements, newWidth, newHeight);
+
+      this.state.elements = cloneDeep(denormalizedElements);
+
+      this.eventBus.emit('system:requestUpdateElements', {
+        historyEvent: true,
+        elements: cloneDeep(this.state.elements),
+        timestamp: Date.now(),
+      });
+    });
+  }
+
+  /** ---------------------------------- layout Engine ---------------------------------- **/
+  /** [내부함수] layoutEngine 연결 설정 */
+  _setupLayoutEngineConnections() {
+    // layoutName 변경에 따른 activeSection 초기화
+    this._subscribe('layout:setLayoutName', ({ screenConfig }) => {
+      this._layoutData = screenConfig.layoutData;
+      this._dataUpdate = true;
+      this.setActiveSection('section1', true);
+
+      this.eventBus.emit('system:updateLayoutData', {
+        layoutData: cloneDeep(this._layoutData),
+        activeData: cloneDeep(this.activeData),
+        timestamp: Date.now(),
+      });
+    });
+    this._subscribe('layout:updateLayoutName', ({ layoutData }) => {
+      this._layoutData = layoutData;
+      this._dataUpdate = true;
+      this.setActiveSection(null, true);
+
+      this.eventBus.emit('system:updateLayoutData', {
+        layoutData: cloneDeep(this._layoutData),
+        activeData: cloneDeep(this.activeData),
+        timestamp: Date.now(),
+      });
+    });
+  }
+
+  /** activeSection 변경
+   * @param {string} name - 섹션 이름
+   * @param {boolean} setting - 설정모드 여부
+   */
+  setActiveSection(name, setting = false) {
+    if (!setting && this.state.activeSection === name) return;
+
+    this.state.activeSection = name;
+    this._dataUpdate = true;
+
+    this.eventBus.emit('system:updateActiveSection', {
+      activeSection: name,
+      activeData: cloneDeep(this.activeData),
+      timestamp: Date.now(),
+    });
+  }
+
+  /** sectionMode 변경
+   * @param {string} mode - 섹션 모드('free' | 'grid')
+   */
+  setSectionMode(mode) {
+    if (!['free', 'grid'].includes(mode)) {
+      console.error('[EngineManager] 잘못된 섹션 모드:', mode);
+      return;
+    }
+
+    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),
+    };
+
+    this._updateActiveSectionConfig('mode', updates);
+  }
+
+  /** sectionConfig 변경
+   * @param {string} type - config 타입 (column, row, gap, guideLine)
+   * @param {number|boolean} config - 새로운 설정 값
+   */
+  setSectionConfig(type, config) {
+    if (!['column', 'row', 'gap', 'guideLine'].includes(type)) {
+      console.error('[EngineManager] 잘못된 config 타입:', type);
+      return;
+    }
+
+    if (!this.activeData) return;
+
+    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;
+
+    if (type === 'guideLine') {
+      newConfig = { showGuideLine: value };
+    } else {
+      if (value < limits[type].min) {
+        alert(`설정 가능한 최소 ${limits[type].name}는 ${limits[type].min}입니다.`);
+      }
+      if (value > limits[type].max) {
+        alert(`설정 가능한 최대 ${limits[type].name}는 ${limits[type].max}입니다.`);
+      }
+      value = Math.min(Math.max(limits[type].min, value), limits[type].max);
+
+      if (type === 'column') {
+        newConfig = { gridColumns: value };
+      } else if (type === 'row') {
+        newConfig = { gridRows: value };
+      } else if (type === 'gap') {
+        newConfig = { gridGap: value };
+      }
+    }
+
+    const updates = { config: { ...this.activeData.config, ...newConfig } };
+    this._updateActiveSectionConfig('config', updates);
+  }
+
+  /** ---------------------------------- freeDrop Engine ---------------------------------- **/
+  /** [내부함수] freeDropEngine 연결 설정 */
+  _setupFreeDropEngineConnections() {
+    // 배치요소 추가 요청
+    this._subscribe('freeDrop:requestAddElement', ({ element }) => {
+      this.state.elements.push(element);
+      this._updateActiveElementIds([...this.activeData.elementIds, element.id]);
+
+      this.eventBus.emit('system:requestUpdateData', {
+        action: 'add',
+        elements: this.state.elements,
+        elementId: element.id,
+        layoutData: cloneDeep(this._layoutData),
+        activeData: cloneDeep(this.activeData),
+        activeSection: this.state.activeSection,
+        timestamp: Date.now(),
+      });
+    });
+
+    // 배치요소 삭제 요청
+    this._subscribe('freeDrop:requestDeleteElement', ({ elementId }) => {
+      this.state.elements = this.state.elements.filter((el) => el.id !== elementId);
+      this._updateActiveElementIds(this.activeData.elementIds.filter((elId) => elId !== elementId));
+
+      this.eventBus.emit('system:requestUpdateData', {
+        action: 'delete',
+        elements: this.state.elements,
+        elementId: null,
+        layoutData: cloneDeep(this._layoutData),
+        activeData: cloneDeep(this.activeData),
+        activeSection: this.state.activeSection,
+        timestamp: Date.now(),
+      });
+    });
+
+    // 배치요소 위치 및 사이즈 변경 반영 요청
+    this._subscribe('freeDrop:requestUpdateElement', ({ historyEvent, elementId, position, size, guides }) => {
+      const element = this.state.elements.find((el) => el.id === elementId);
+      if (element) {
+        element.position = position;
+        element.size = size;
+      }
+
+      this.eventBus.emit('system:requestUpdateElements', {
+        historyEvent: historyEvent,
+        elements: cloneDeep(this.state.elements),
+        guides: guides,
+        timestamp: Date.now(),
+      });
+    });
+  }
+
+  /** ---------------------------------- gridDrop Engine ---------------------------------- **/
+  /** [내부함수] gridDropEngine 연결 설정 */
+  _setupGridDropEngineConnections() {
+    // 배치요소 추가 요청
+    this._subscribe('gridDrop:requestAddElement', ({ element }) => {
+      this.state.elements.push(element);
+      this._updateActiveElementIds([...this.activeData.elementIds, element.id]);
+
+      this.eventBus.emit('system:requestUpdateData', {
+        action: 'add',
+        elements: this.state.elements,
+        elementId: element.id,
+        layoutData: cloneDeep(this._layoutData),
+        activeData: cloneDeep(this.activeData),
+        activeSection: this.state.activeSection,
+        timestamp: Date.now(),
+      });
+    });
+
+    // 배치요소 삭제 요청
+    this._subscribe('gridDrop:requestDeleteElement', ({ elementId }) => {
+      this.state.elements = this.state.elements.filter((el) => el.id !== elementId);
+      this._updateActiveElementIds(this.activeData.elementIds.filter((elId) => elId !== elementId));
+
+      this.eventBus.emit('system:requestUpdateData', {
+        action: 'delete',
+        elements: this.state.elements,
+        elementId: null,
+        layoutData: cloneDeep(this._layoutData),
+        activeData: cloneDeep(this.activeData),
+        activeSection: this.state.activeSection,
+        timestamp: Date.now(),
+      });
+    });
+
+    // 배치요소 위치 및 사이즈 변경 요청
+    this._subscribe('gridDrop:requestUpdateElement', ({ historyEvent, elementId, position, size }) => {
+
+      const element = this.state.elements.find((el) => el.id === elementId);
+      if (element) {
+        element.position = position;
+        if (size) {
+          element.size = size;
+        }
+      }
+
+      this.eventBus.emit('system:requestUpdateElements', {
+        historyEvent: historyEvent,
+        elements: cloneDeep(this.state.elements),
+        timestamp: Date.now(),
+      });
+    });
+  }
+
+  /** ---------------------------------- history Engine ---------------------------------- **/
+  /** [내부함수] historyEngine 연결 설정 */
+  _setupHistoryEngineConnections() {}
+
+  /** ---------------------------------- 구독 관련 메소드 ---------------------------------- **/
+  /** [내부함수] 구독 및 unsubscribe 함수 저장
+   * @param {string} name - 이벤트 이름
+   * @param {function} handler - 이벤트 핸들러 함수
+   * @return {function} - unsubscribe 함수
+   */
+  _subscribe(name, handler) {
+    const unsubscribe = this.eventBus.subscribe(name, handler);
+    this._subscriptions.push(unsubscribe);
+    return unsubscribe;
+  }
+
+  /** ---------------------------------- 엔진 초기화 메서드 ---------------------------------- **/
+  /** [내부함수] 엔진 초기화 */
+  async initialize() {
+    // 초기화 되지 않은 경우에만 초기화 수행
+    if (!this._initialized) {
+      await this._createEngines();
+      await this._setupEngineConnections();
+      this._initialized = true;
+    }
+  }
+
+  /** [내부함수] 엔진 인스턴스 생성 */
+  async _createEngines() {
+    try {
+      console.log('[EngineManager] 엔진 생성 시작');
+
+      const [
+        { default: DisplayEngine },
+        { default: LayoutEngine },
+        { default: FreeDropEngine },
+        { default: GridDropEngine },
+        { default: HistoryEngine },
+      ] = await Promise.all([
+        import('../../engines/DisplayEngine.js'),
+        import('../../engines/LayoutEngine.js'),
+        import('../../engines/FreeDropEngine.js'),
+        import('../../engines/GridDropEngine.js'),
+        import('../../engines/HistoryEngine.js'),
+      ]);
+      this.addEngine('display', DisplayEngine, {
+        eventBus: this.eventBus,
+        options: {
+          resource: resource.display,
+        },
+      });
+      this.addEngine('layout', LayoutEngine, {
+        eventBus: this.eventBus,
+        options: {
+          resource: resource.layout,
+        },
+      });
+      this.addEngine('freeDrop', FreeDropEngine, {
+        eventBus: this.eventBus,
+        options: {
+          gridSize: this.state.gridSize,
+          resource: resource.freedrop,
+        },
+      });
+      this.addEngine('gridDrop', GridDropEngine, {
+        eventBus: this.eventBus,
+        options: {
+          resource: resource.griddrop,
+        },
+      });
+      this.addEngine('history', HistoryEngine, {
+        eventBus: this.eventBus,
+        options: {
+          engines: this.engines,
+          manager: this,
+        },
+      });
+      console.log('[EngineManager] 엔진 생성 완료');
+    } catch (error) {
+      console.error('[EngineManager] 엔진 생성 중 오류 발생: ', error);
+      throw error;
+    }
+  }
+
+  /** [내부함수] 엔진 인스턴스 간 연결 설정 */
+  async _setupEngineConnections() {
+    this._setupDisplayEngineConnections();
+    this._setupLayoutEngineConnections();
+    this._setupFreeDropEngineConnections();
+    this._setupGridDropEngineConnections();
+    this._setupHistoryEngineConnections();
+
+    // 모든 연결 설정 완료 후 초기화 완료 이벤트 발행
+    this.eventBus.emit('system:engineInitialized', {
+      state: this.state,
+      timestamp: Date.now(),
+    });
+  }
+
+  /** ---------------------------------- 엔진 관리 메소드 ---------------------------------- **/
+  /** 엔진 정보 불러오기
+   * @param {string} name - 엔진 이름
+   * @return {object} - 엔진 인스턴스
+   */
+  getEngine(name) {
+    return this.engines.get(name);
+  }
+
+  /** 엔진 추가
+   * @param {string} name - 엔진 이름
+   * @param {class} engineClass - 엔진 클래스
+   * @param {object} config - 엔진 생성 옵션
+   * @return {boolean} - 추가 성공 여부
+   */
+  addEngine(name, engineClass, config = {}) {
+    if (this.engines.has(name)) {
+      console.warn(`[EngineManager] 이미 존재하는 엔진 이름입니다: ${name}`);
+      return false;
+    }
+
+    try {
+      const engine = new engineClass({
+        eventBus: this.eventBus,
+        ...config,
+      });
+
+      this.engines.set(name, engine);
+      return true;
+    } catch (error) {
+      console.error(`[EngineManager] ${name} 엔진 추가 중 오류 발생`, error);
+      return false;
+    }
+  }
+
+  /** 엔진 제거
+   * @param {string} name - 엔진 이름
+   * @return {boolean} - 제거 성공 여부
+   */
+  removeEngine(name) {
+    if (!this.engines.has(name)) {
+      console.warn(`[EngineManager] 존재하지 않는 엔진 이름입니다: ${name}`);
+      return false;
+    }
+
+    try {
+      const engine = this.engines.get(name);
+
+      if (typeof engine.destroy === 'function') {
+        engine.destroy();
+      }
+
+      this.engines.delete(name);
+      console.log(`[EngineManager] ${name} 엔진이 제거되었습니다`);
+      return true;
+    } catch (error) {
+      console.error(`[EngineManager] ${name} 엔진 제거 중 오류 발생`, error);
+      return false;
+    }
+  }
+
+  /** 엔진 매니저 삭제 */
+  destroy() {
+    console.log('[EngineManager] 엔진 매니저 삭제 시작');
+
+    // 모든 구독 해제
+    this._subscriptions.forEach((unsubscribe) => {
+      if (typeof unsubscribe === 'function') {
+        unsubscribe();
+      }
+    });
+
+    this._subscriptions = [];
+
+    for (const [name, engine] of this.engines) {
+      try {
+        this.removeEngine(name);
+      } catch (error) {
+        console.error(`[EngineManager] ${name} 엔진 삭제 중 오류 발생`, error);
+      }
+    }
+
+    this.engines.clear();
+    this._initialized = false;
+
+    this._dataUpdate = false;
+    this._layoutData = null;
+    this._activeData = null;
+
+    this.state = {};
+    this.eventBus = null;
+
+    console.log('[EngineManager] 엔진 매니저 삭제 완료');
+  }
+
+  /** 엔진 초기화 */
+  resetEngines() {
+    this.state = {
+      ...initialState,
+      ...this.config.initialState,
+    };
+
+    this._dataUpdate = false;
+    this._layoutData = null;
+    this._activeData = null;
+
+    this.eventBus.emit('system:enginesReset', {
+      timestamp: Date.now(),
+    });
+  }
+
+  /** ---------------------------------- 캡슐화 API 메소드 ---------------------------------- **/
+  /** 외부 접근용 API 반환
+   * @return {object} - 외부용 API 객체
+   */
+  getAPI() {
+    const displayEngine = this.getEngine('display');
+    const layoutEngine = this.getEngine('layout');
+    const freeDropEngine = this.getEngine('freeDrop');
+    const gridDropEngine = this.getEngine('gridDrop');
+    const historyEngine = this.getEngine('history');
+
+    const api = {
+      eventBus: this.eventBus,
+      resetEngines: () => this.resetEngines(),
+
+      // 엔진별 상태 조회 메서드
+      getDisplayState: () => ({
+        activeMenu: displayEngine.activeMenu,
+        activeDesign: displayEngine.activeDesign,
+        displayMode: displayEngine.displayMode,
+        displaySize: cloneDeep(displayEngine.displaySize),
+      }),
+
+      getLayoutState: () => ({
+        layoutName: layoutEngine.layoutName,
+        layoutSource: layoutEngine.layoutSource,
+        elements: this.state.elements,
+        layoutData: layoutEngine.layoutData,
+        activeSection: this.state.activeSection,
+        activeData: this.activeData,
+        gapSize: layoutEngine.gapSize,
+        gridNumber: cloneDeep(layoutEngine.gridNumber),
+        gridRatio: cloneDeep(layoutEngine.gridRatio),
+      }),
+
+      getFreeDropState: () => ({
+        handles: freeDropEngine.getResourceByName('handles'),
+      }),
+      getGridDropState: () => ({}),
+      getHistoryState: () => ({}),
+
+      display: {
+        setActiveMenu: (name) => displayEngine.setActiveMenu(name),
+        setActiveDesign: (name) => displayEngine.setActiveDesign(name),
+        setDisplayMode: (mode) => displayEngine.setDisplayMode(mode),
+        setDisplaySize: (type, size) => displayEngine.setDisplaySize(type, size),
+      },
+
+      layout: {
+        // getLayoutName: () => layoutEngine.layoutName,
+        // getActiveData: () => this.activeData,
+        // getLayoutData: () => layoutEngine.layoutData,
+        getContainerSize: () => this.getContainerSize(),
+        setContainerSize: () => this.setContainerSize(),
+
+        setLayoutName: (name, userData = null, setting = false) => layoutEngine.setLayoutName(name, userData, setting),
+        setGapSize: (size) => layoutEngine.setGapSize(size),
+        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),
+
+        setElements: (elements) => this.setElements(elements),
+        setSectionMode: (mode) => this.setSectionMode(mode),
+        setSectionConfig: (type, config) => this.setSectionConfig(type, config),
+      },
+
+      freeDrop: {
+        // getFreeElements: () => freeDropEngine.freeElements,
+        getElementStyle: (element) => freeDropEngine.getElementStyle(element),
+        // getGuides: () => freeDropEngine.guides,
+        setActiveElement: (element, type) => freeDropEngine.setActiveElement(element, type),
+
+        addElement: (event, elName) => freeDropEngine.addElement(event, elName),
+        toggleLock: () => freeDropEngine.toggleLock(),
+        handleMouseDown: (event, id) => freeDropEngine.handleMouseDown(event, id),
+        startResize: (event, direction) => freeDropEngine.startResize(event, direction),
+      },
+
+      gridDrop: {
+        // getGridElements: () => gridDropEngine.gridElements,
+        getElementStyle: (type, cell) => gridDropEngine.getElementStyle(type, cell),
+
+        // setActiveCell: (type, cell) => gridDropEngine.setActiveCell(type, cell),
+        setActiveElement: (element, type) => gridDropEngine.setActiveElement(element, type),
+        detectHoverCell: (cell) => gridDropEngine.detectHoverCell(cell),
+
+        addElement: (elName) => gridDropEngine.addElement(elName),
+        toggleLock: () => gridDropEngine.toggleLock(),
+        startDrag: (event, id) => gridDropEngine.startDrag(event, id),
+        handleMouseDown: (event, id) => gridDropEngine.handleMouseDown(event, id),
+        startResize: (event, id) => gridDropEngine.startResize(event, id),
+      },
+
+      history: {
+        getHistoryState: () => historyEngine.historyState,
+        undo: () => historyEngine.undo(),
+        redo: () => historyEngine.redo(),
+      },
+    };
+
+    if (this.apiManager) {
+      api.userApi = {
+        logout: async () => this.apiManager.logout(),
+        save: async (data) => this.apiManager.save(data),
+      };
+    }
+
+    // proxy 생성 함수
+    const createProxy = (api, path = []) => {
+      return new Proxy(api, {
+        get: (target, prop) => {
+          if (prop === 'isReady' && path.length === 0) {
+            return () => this._initialized;
+          }
+
+          // 초기화 확인
+          if (path.length === 0 && !this._initialized) {
+            console.error('[EngineManager] 엔진이 초기화되지 않았습니다.');
+          }
+
+          const value = target[prop];
+
+          // 객체면 재귀적 proxy
+          if (typeof value === 'object' && value !== null) {
+            // EventBus는 직접 반환 (Proxy 적용하지 않음)
+            if (prop === 'eventBus') {
+              return value;
+            }
+            return createProxy(value, [...path, prop]);
+          }
+
+          if (typeof value === 'function') {
+            // 다른 메서드들은 EngineManager에 바인딩
+            return value.bind(this);
+          }
+          return value;
+        },
+      });
+    };
+
+    return createProxy(api);
+  }
+}
+
+export default EngineManager;

package/src/library/LayoutLibrary.js

@@ -79,8 +79,11 @@ function useLayout(api) {
     });
 
     // elements 변경 감지
-    _subscribe('system:requestUpdateActiveElement', ({ elements }) => {
-      state.elements = elements;
+    _subscribe('system:requestUpdateActiveElement', ({ elementId, element }) => {
+      const index = state.elements.findIndex((x) => x.id === elementId);
+      if (index !== -1) {
+        state.elements[index] = element; // 업데이트
+      }
     });
 
     _subscribe('system:setElements', ({ elements }) => {