polarvo-layout 1.0.19 → 1.0.21

package/src/core/managers/originals/EngineManager_0402.js

@@ -0,0 +1,826 @@
+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._layoutData = null;
+
+    // (캐시) dataConverter에서 사용하는 현재 컨테이너 크기
+    this._containerWidth = 1920;
+    this._containerHeight = 1080;
+
+    this._subscriptions = [];
+    this._initialized = false;
+  }
+
+  /** activeSection 데이터 반환
+   * @return {object} - layoutData 중 activeSection 데이터 객체
+   */
+  get activeData() {
+    if (!this._layoutData || !this.state.activeSection) {
+      return null;
+    }
+    return this._layoutData[this.state.activeSection];
+  }
+
+  /** 상태 정보 반환
+   * @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.eventBus.emit('system:updateLayoutData', {
+      section: this.state.activeSection,
+      changes: {...updates},
+      $mode: this.activeData?.mode,
+      $config: this.activeData?.config,
+      timestamp: Date.now(),
+    })
+
+    // // 이벤트 발행
+    // 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;
+  // }
+
+  /** 현재 컨테이너 크기 설정 */
+  setContainerSize() {
+    try {
+      const containerEl = document.getElementById('baseLayout');
+      if (!containerEl) {
+        console.warn('[EngineManager] baseLayout 요소를 찾을 수 없습니다.');
+        return false;
+      }
+      const { width, height } = containerEl.getBoundingClientRect();
+
+      this._containerWidth = width ?? this._containerWidth;
+      this._containerHeight = height ?? this._containerHeight;
+    } catch (error) {
+      console.error('[EngineManager] 컨테이너 크기 설정 중 오류 발생: ', error);
+      return false;
+    }
+  }
+
+  getContainerSize() {
+    return {
+      width: this._containerWidth,
+      height: this._containerHeight,
+    };
+  }
+
+  /** elements 초기화
+   * @param {Array} elements - 새로운 elements 배열
+   */
+  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으로 간주
+    this.state.elements = denormalizedElements.map((x) => (x.section ? { ...x } : { ...x, section: 'section1' }));
+
+    this.eventBus.emit('system:setElements', {
+      layoutData: cloneDeep(this._layoutData),
+      elements: this.state.elements,
+      timestamp: Date.now(),
+    });
+  }
+
+  /** activeElement 업데이트
+   * @param {string} id - 업데이트할 element의 ID
+   * @param {object} changes - 변경할 속성 객체
+   */
+  updateActiveElement(id, changes) {
+    if (!id || !changes) return false;
+
+    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 ---------------------------------- **/
+  /** [내부함수] 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', ({ $layoutData }) => {
+      this._layoutData = $layoutData;
+      this.setActiveSection('section1', true);
+
+      this.eventBus.emit('system:updateLayoutData', {
+        activeData: cloneDeep(this.activeData),
+        timestamp: Date.now(),
+      });
+    });
+    this._subscribe('layout:updateLayoutName', ({ layoutData }) => {
+      this._layoutData = layoutData;
+      this.setActiveSection(null, true);
+
+      this.eventBus.emit('system:updateLayoutData', {
+        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.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 }) => {
+      if (this.state.elements.some((el) => el.id === element.id)) {
+        return;
+      }
+      
+      this.state.elements.push(element);
+      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,
+        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._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',
+        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._updateActiveSectionConfig('elementIds', { elementIds: [...this.activeData.elementIds, element.id] });
+      // 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._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',
+        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._layoutData = null;
+
+    this.state = {};
+    this.eventBus = null;
+
+    console.log('[EngineManager] 엔진 매니저 삭제 완료');
+  }
+
+  /** 엔진 초기화 */
+  resetEngines() {
+    this.state = {
+      ...initialState,
+      ...this.config.initialState,
+    };
+
+    this._layoutData = 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;