polarvo-layout 1.0.19 → 1.0.21

package/src/core/engines/originals/FreeDropEngine_0402.js

@@ -0,0 +1,786 @@
+import { cloneDeep } from 'lodash-es';
+import { nextTick } from 'vue';
+
+// event 발행 시 'freeDrop'으로 시작하는 이름 사용
+class FreeDropEngine {
+  constructor({ eventBus, options }) {
+    this.eventBus = eventBus;
+    this.resource = options.resource;
+
+    this._gridSize = null;
+    this._gridNumber = null;
+
+    this._elements = []; // 원본 요소 목록 (EngineManager과 동기화)
+    this._elementsUpdate = false; // 원본 요소 목록 변경 플래그
+    this._freeElements = []; // 로컬에서 사용하는 요소 목록
+
+    this._activeData = null;
+    this._activeSection = null;
+    this._activeMode = null;
+    this._activeConfig = null;
+
+    this._activeElement = null; // 드래그 중인 배치요소
+
+    this.guides = { x: null, y: null, w: null, h: null }; // 가이드 라인 위치
+
+    this._dragState = {
+      isDragging: false, // 드래그 상태
+      isResizing: false, // 리사이징 상태
+      direction: null, // 리사이징 방향
+    };
+
+    this._startPos = { x: 0, y: 0 }; // 드래그 시작 위치
+    this._startSize = { w: 0, h: 0 }; // 드래그 시작 크기
+    this._offsetPos = { x: 0, y: 0 }; // 마우스 오프셋 위치
+    this._alreadyExist = false; // 배치요소 기존재 여부
+
+    this._subscriptions = []; // 구독 해제 함수 저장용
+    this._setupSubscriptions();
+  }
+
+  /** ---------------------------------- 구독 관련 메소드 ---------------------------------- **/
+  /** [내부함수] 구독 및 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;
+  }
+
+  /** [내부함수] 구독 설정 */
+  _setupSubscriptions() {
+    // 초기화 완료 이벤트 구독 - from DisplayEngine
+    this._subscribe('display:engineInitialized', ({ displaySize }) => {
+      const { gridSize } = displaySize;
+      this._gridSize = gridSize;
+
+      this._initialize();
+    });
+
+    this._subscribe('display:enginesReset', ({ displaySize }) => {
+      const { gridSize } = displaySize;
+      this._gridSize = gridSize;
+
+      this._initialize();
+    });
+
+    // displayMode 변경 감지 (displaySize가 함께 초기화됨)
+    this._subscribe('display:updateDisplayMode', ({ displaySize }) => {
+      const { gridSize } = displaySize;
+      this._gridSize = gridSize;
+    });
+
+    // layoutName 변경 감지 (gridNumber가 함께 초기화됨)
+    this._subscribe('layout:setLayoutName', ({ $gridNumber }) => {
+      this._gridNumber = $gridNumber;
+    });
+    this._subscribe('layout:updateLayoutName', ({ gridNumber }) => {
+      this._gridNumber = gridNumber;
+    });
+
+    // activeSection 변경 감지 (activeData가 함께 초기화됨)
+    this._subscribe('system:updateActiveSection', ({ activeSection, activeData }) => {
+      this._activeSection = activeSection;
+      this._activeData = activeData;
+      // this.setActiveElement(null);
+    });
+
+    this._subscribe('system:setElements', ({ elements }) => {
+      this._elements = elements;
+      this._elementsUpdate = true;
+
+      // 활성화 요소 초기화
+      this.setActiveElement(null);
+
+      this.eventBus.emit('freeDrop:setElements', {
+        elements: cloneDeep(this.freeElements),
+        timestamp: Date.now(),
+      });
+    });
+
+    this._subscribe('system:updateLayoutData', ({ $mode, $config }) => {
+      this._activeMode = $mode;
+      this._activeConfig = $config;
+    });
+
+    // sectionConfig 변경 감지 (free 모드인 경우에만 activeData 갱신)
+    // this._subscribe('system:updateActiveSectionConfig', ({ activeData }) => {
+    //   if (activeData?.mode == 'free') {
+    //     this._activeData = activeData;
+    //   }
+    // });
+
+    this._subscribe('system:requestUpdateData', ({ elements, elementId, activeData }) => {
+      this._elements = elements;
+      this._elementsUpdate = true;
+
+      this.setActiveElement(this._elements.find((x) => x.id === elementId));
+
+      // if (activeData?.mode == 'free') {
+      //   this._activeData = activeData;
+      // }
+
+      this.eventBus.emit('freeDrop:requestUpdateData', {
+        elements: cloneDeep(this.freeElements),
+        guides: this.guides,
+        timestamp: Date.now(),
+      });
+    });
+
+    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;
+      }
+
+      this.setActiveElement(element, 'update');
+
+      this.eventBus.emit('freeDrop:requestUpdateActiveElement', {
+        element: element,
+        timestamp: Date.now(),
+      });
+    });
+
+    this._subscribe('system:requestUpdateElements', ({ elements }) => {
+      this._elements = elements;
+      this._elementsUpdate = true;
+    });
+
+    this._subscribe('system:restoredState', ({ stateData }) => {
+      this._elements = stateData.elements;
+      this._elementsUpdate = true;
+      this.setActiveElement(null);
+
+      this.eventBus.emit('freeDrop:restoredState', {
+        elements: cloneDeep(this.freeElements),
+        timestamp: Date.now(),
+      });
+    });
+  }
+
+  /** 삭제 및 정리 */
+  destroy() {
+    this._subscriptions.forEach((unsubscribe) => {
+      if (typeof unsubscribe === 'function') {
+        unsubscribe();
+      }
+    });
+
+    this._initialize();
+    this._subscriptions = [];
+    this.eventBus = null;
+    this.resource = null;
+    console.log('[FreeDropEngine] 삭제 완료');
+  }
+
+  /** 리소스 가져오기
+   * @param {string} name - 리소스 이름
+   * @return {Array} - 리소스 배열
+   */
+  getResourceByName(name) {
+    if (!this.resource) {
+      console.error('[FreeDropEngine] 리소스가 설정되지 않았습니다.');
+      return [];
+    }
+    return this.resource[name] || [];
+  }
+
+  /** 전체 요소 중 자유 배치 요소만 반환
+   * @return {Array} - 자유배치 요소 배열
+   */
+  get freeElements() {
+    if (this._elementsUpdate) {
+      this._elementsUpdate = false;
+
+      const base = this._elements.filter((x) => x.mode === 'free');
+
+      if (this._activeElement) {
+        const exists = base.find((x) => x.id === this._activeElement?.id);
+
+        // 기존 배치요소인 경우
+        if (exists) {
+          // 기존 배치요소와 activeElement 교체
+          this._freeElements = base.map((element) => (element.id === this._activeElement.id ? this._activeElement : element));
+        } else {
+          this._freeElements = [...base, this._activeElement];
+        }
+      } else {
+        this._freeElements = base;
+      }
+    }
+
+    return this._freeElements;
+  }
+
+  /** ---------------------------------- 공통 메소드 ---------------------------------- **/
+  /** [내부함수] 내부 변수 초기화 */
+  _initialize() {
+    this._dragState = {
+      isDragging: false,
+      isResizing: false,
+      direction: null,
+    };
+
+    this.guides = { x: null, y: null, w: null, h: null };
+    this._startPos = { x: 0, y: 0 };
+    this._startSize = { w: 0, h: 0 };
+    this._offsetPos = { x: 0, y: 0 };
+
+    // this._activeData = null;
+    this._activeSection = null;
+    this._activeMode = null;
+    this._activeConfig = null;
+    this._activeElement = null;
+    this._alreadyExist = false;
+
+    this._elementsUpdate = false;
+  }
+
+  /** [내부함수] 그리드 스냅
+   * @param {number} value - 스냅할 값
+   * @returns {number} - 스냅된 값
+   */
+  _snapToGrid(value) {
+    return Math.round(value / this._gridSize) * this._gridSize;
+  }
+
+  /** [내부함수] layout 내부 진입 여부 감지
+   * @param {MouseEvent} event - 마우스 이벤트
+   * @param {Object} offsetPos - 오프셋 위치
+   * @return {boolean} - 레이아웃 내부 진입 여부
+   */
+  _detectLayoutEntry(event, offsetPos) {
+    const layoutEl = document.getElementById(`${this._activeSection}Layout`);
+    if (!layoutEl) {
+      console.error('[FreeDropEngine] 레이아웃 요소를 찾을 수 없습니다:', this._activeSection);
+      return false;
+    }
+
+    if (!this._activeElement) {
+      console.error('[FreeDropEngine] 활성화된 아이템 정보를 찾을 수 없습니다.');
+      return false;
+    }
+
+    const size = this._activeElement.size;
+    const layoutRect = layoutEl.getBoundingClientRect();
+
+    // 요소의 위치와 크기를 기준으로 경계 확인
+    const x = event.clientX - offsetPos.x + size.w;
+    const y = event.clientY - offsetPos.y + size.h;
+
+    const result = event.clientX >= layoutRect.left && event.clientY >= layoutRect.top && x <= layoutRect.right && y <= layoutRect.bottom;
+
+    return result;
+  }
+
+  /** [내부함수] 기존 배치요소와 충돌 여부 감지
+   * @return {boolean} - 충돌 여부
+   */
+  _detectElementCollision() {
+    if (!this._activeElement) {
+      console.error('[FreeDropEngine] 충돌 검사를 위한 아이템 정보를 찾을 수 없습니다:', this._activeElement.id);
+      return false;
+    }
+
+    const newElementRect = {
+      left: this._activeElement.position.x,
+      top: this._activeElement.position.y,
+      right: this._activeElement.position.x + this._activeElement.size.w,
+      bottom: this._activeElement.position.y + this._activeElement.size.h,
+    };
+
+    return this.freeElements
+      .filter((element) => element.section === this._activeElement.section)
+      .some((element) => {
+        if (element.id === this._activeElement.id) return false; // 자기 자신은 제외
+
+        const elementRect = {
+          left: element.position.x,
+          top: element.position.y,
+          right: element.position.x + element.size.w,
+          bottom: element.position.y + element.size.h,
+        };
+
+        return !(
+          newElementRect.right <= elementRect.left ||
+          newElementRect.left >= elementRect.right ||
+          newElementRect.bottom <= elementRect.top ||
+          newElementRect.top >= elementRect.bottom
+        );
+      });
+  }
+
+  /** [내부함수] 가이드라인 표시 설정 가져오기
+   * @return {boolean} - 가이드라인 표시 여부
+   */
+  _getGuideLineConfig() {
+    if (this._activeConfig) {
+      return this._activeConfig?.showGuideLine;
+    } else {
+      return false;
+    }
+  }
+
+  /** isLocked 값 변경 */
+  toggleLock() {
+    if (!this._activeElement) {
+      console.error('[FreeDropEngine] 활성화된 배치요소가 없습니다.');
+      return;
+    }
+    this._activeElement.isLocked = !this._activeElement.isLocked;
+    this._elementsUpdate = true;
+
+    this.eventBus.emit('freeDrop:toggleLock', {
+      elementId: this._activeElement.id,
+      timestamp: Date.now(),
+    });
+  }
+
+  /** ---------------------------------- 배치요소 관련 메소드 ---------------------------------- **/
+  /** 배치요소 신규 추가 - 메뉴에서 추가 아이템 선택
+   * @param {MouseEvent} event - 마우스 이벤트
+   * @param {string} elName - 추가할 아이템 이름
+   */
+  addElement(event, elName) {
+    // if (!this._activeData) {
+    //   console.error('[FreeDropEngine] 활성화된 데이터가 없습니다.');
+    //   return;
+    // }
+    if (this._activeMode !== 'free') return;
+
+    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 },
+      section: this._activeSection,
+      isLocked: false,
+    };
+
+    this.setActiveElement(element, 'add');
+
+    this._offsetPos.x = element.size.w / 2;
+    this._offsetPos.y = element.size.h / 2;
+
+    // this.startDrag(event, null);
+    // 신규 아이템 추가 시 바로 드래그 상태로 진입 (단, 기존 아이템과 달리 위치 기준이 마우스 포인터가 됨)
+    this.eventBus.emit('freeDrop:startDrag', { timestamp: Date.now() });
+
+    this._dragState.isDragging = true;
+    document.addEventListener('mousemove', this._startDragMove);
+    document.addEventListener('mouseup', this._stopDrag);
+  }
+
+  /** [내부함수] 배치요소 삭제
+   * @param {string} id - 삭제할 배치요소 ID
+   */
+  _deleteElement(id) {
+    const element = this.freeElements.find((el) => el.id === id);
+    if (!element) {
+      console.error('[FreeDropEngine] 삭제할 아이템을 찾을 수 없습니다:', id);
+      return;
+    }
+
+    if (confirm(`선택하신 ${element.type} 아이템을 삭제하시겠습니까?`)) {
+      // this.setActiveElement(null);
+
+      this.eventBus.emit('freeDrop:requestDeleteElement', {
+        elementId: id,
+        timestamp: Date.now(),
+      });
+    }
+  }
+
+  /** 활성화 배치요소 변경
+   * @param {object|null} element - 활성화할 배치요소 정보 (null인 경우 비활성화)
+   * @param {string|null} action - 액션 종류 (예: 'add')
+   */
+  setActiveElement(element, action = null) {
+    // 이미 활성화된 요소를 다시 활성화하려는 경우 무시
+    if (element && this._activeElement?.id === element?.id) return;
+
+    this._activeElement = element;
+    this._alreadyExist = action === 'add' ? false : true;
+    this._elementsUpdate = true;
+
+    this.eventBus.emit('freeDrop:setActiveElement', {
+      action: action,
+      activeElement: this._activeElement,
+      // elements: cloneDeep(this.freeElements),
+      timestamp: Date.now(),
+    });
+  }
+
+  /** 배치요소 스타일 가져오기
+   * @param {object} element - 배치요소 정보
+   * @returns {object} - 스타일 객체
+   */
+  getElementStyle(element) {
+    const { x, y } = element.position;
+    const { w, h } = element.size;
+
+    return {
+      left: `${x}px`,
+      top: `${y}px`,
+      width: `${w}px`,
+      height: `${h}px`,
+    };
+  }
+
+  /** [내부함수] 활성화 배치요소의 현재 위치 가져오기
+   * @param {MouseEvent} event - 마우스 이벤트
+   * @param {Object} offsetPos - 오프셋 위치 { x, y }
+   * @return {Object} - 활성화 배치요소의 그리드 스냅 위치 { x, y }
+   */
+  _getActiveElementPosition(event, offsetPos) {
+    const layoutEl = document.getElementById(`${this._activeSection}Layout`);
+    if (!layoutEl) {
+      console.error('[FreeDropEngine] 레이아웃 요소를 찾을 수 없습니다:', this._activeSection);
+      return { x: 0, y: 0 };
+    }
+
+    const layoutRect = layoutEl.getBoundingClientRect();
+    const rawX = event.clientX - layoutRect.left - offsetPos.x;
+    const rawY = event.clientY - layoutRect.top - offsetPos.y;
+
+    const gridX = this._snapToGrid(rawX);
+    const gridY = this._snapToGrid(rawY);
+
+    return { x: gridX, y: gridY };
+  }
+
+  /** [내부함수] 새로운 크기와 위치 계산
+   * @param {MouseEvent} event - 마우스 이벤트
+   * @param {string} direction - 리사이징 방향 (예: 'n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw')
+   * @returns {object} - 새로운 위치와 크기 { newX, newY, newW, newH }
+   */
+  _getNewSizeAndPosition(event, direction) {
+    const deltaX = event.clientX - this._offsetPos.x;
+    const deltaY = event.clientY - this._offsetPos.y;
+
+    let newX = this._startPos.x;
+    let newY = this._startPos.y;
+    let newW = this._startSize.w;
+    let newH = this._startSize.h;
+
+    // 방향에 따른 크기 및 위치 계산
+    // 위쪽 방향(north)
+    if (direction.includes('n')) {
+      const tmpHeight = this._snapToGrid(this._startSize.h - deltaY);
+      const offsetY = this._startSize.h - tmpHeight; // 높이 변화량
+
+      if (offsetY !== 0) {
+        newH = tmpHeight;
+        newY = this._startPos.y + offsetY;
+      }
+    }
+
+    // 아래쪽 방향(south)
+    if (direction.includes('s')) {
+      newH = this._snapToGrid(this._startSize.h + deltaY);
+    }
+
+    // 왼쪽 방향(west)
+    if (direction.includes('w')) {
+      const tempWidth = this._snapToGrid(this._startSize.w - deltaX);
+      const offsetX = this._startSize.w - tempWidth; // 너비 변화량
+
+      if (offsetX !== 0) {
+        newW = tempWidth;
+        newX = this._startPos.x + offsetX;
+      }
+    }
+
+    // 오른쪽 방향(east)
+    if (direction.includes('e')) {
+      newW = this._snapToGrid(this._startSize.w + deltaX);
+    }
+
+    // 최소 크기 제한
+    newW = Math.max(40, newW);
+    newH = Math.max(40, newH);
+
+    return { newX, newY, newW, newH };
+  }
+
+  /** [내부함수] 배치요소 위치 변경  */
+  _updateElementBounds = (() => {
+    let rafId = null;
+    return (position, size = null) => {
+      if (rafId) return;
+
+      rafId = nextTick(() => {
+        this._activeElement.position.x = position.x;
+        this._activeElement.position.y = position.y;
+
+        if (size) {
+          this._activeElement.size.w = size.w;
+          this._activeElement.size.h = size.h;
+        }
+
+        const showGuideLine = this._getGuideLineConfig();
+        if (showGuideLine) {
+          this.guides.x = position.x;
+          this.guides.y = position.y;
+          this.guides.w = this._activeElement.size.w;
+          this.guides.h = this._activeElement.size.h;
+        }
+
+        // 로컬에서 position, size 업데이트
+        this.eventBus.emit('freeDrop:requestUpdateLocalBounds', {
+          elementId: this._activeElement.id,
+          position: position,
+          size: size,
+          guides: this.guides,
+          timestamp: Date.now(),
+        });
+
+        rafId = null;
+      });
+    };
+  })();
+
+  /** ---------------------------------- 드래그 관련 메소드 ---------------------------------- **/
+  /** mousedown 실행
+   * @param {MouseEvent} event - 마우스 이벤트
+   * @param {string|null} id - 배치요소 ID (신규 아이템인 경우 null)
+   */
+  handleMouseDown(event, id = null) {
+    // 리사이징 중이면 드래그 불가
+    if (this._dragState.isResizing) return;
+
+    // 우클릭 시 해당 아이템 삭제
+    if (event.button === 2) {
+      this._deleteElement(id);
+      return false;
+    }
+
+    const element = this.freeElements.find((el) => el.id === id);
+    this.setActiveElement(element, 'click');
+
+    // 배치요소 잠겨 있으면 드래그/삭제 불가
+    if (element.isLocked) return;
+    this._startPos = { x: element.position.x, y: element.position.y };
+
+    const elementEl = document.getElementById(id);
+    if (!elementEl) {
+      console.error('[FreeDropEngine] 배치요소를 찾을 수 없습니다. ID:', id);
+      return false;
+    }
+
+    // 배치요소 위치 기준 오프셋 계산
+    const elementRect = elementEl.getBoundingClientRect();
+    if (elementRect) {
+      const { column, row } = this._gridNumber;
+
+      this._offsetPos.x = (event.clientX - elementRect.left) / column;
+      this._offsetPos.y = (event.clientY - elementRect.top) / row;
+    }
+
+    document.addEventListener('mousemove', this._detectDragIntent);
+    document.addEventListener('mouseup', this._cancelDragIntent);
+  }
+
+  // [내부함수] 드래그 의도 감지 - 최소 드래그 거리 이상으로 마우스가 이동한 경우
+  _detectDragIntent = (event) => {
+    const deltaX = Math.abs(event.clientX - this._startPos.x);
+    const deltaY = Math.abs(event.clientY - this._startPos.y);
+
+    // 최소 드래그 거리(gridSize) 이상 이동 여부
+    const isMoved = deltaX >= this._gridSize || deltaY >= this._gridSize;
+
+    if (isMoved) {
+      // 의도 감지 리스너 제거
+      document.removeEventListener('mousemove', this._detectDragIntent);
+      document.removeEventListener('mouseup', this._cancelDragIntent);
+
+      // 드래그 확정 후 실제 드래그 리스너 등록
+      this._dragState.isDragging = true;
+
+      this.eventBus.emit('freeDrop:startDrag', { timestamp: Date.now() });
+      document.addEventListener('mousemove', this._startDragMove);
+      document.addEventListener('mouseup', this._stopDrag);
+      // const position = this._getActiveElementPosition(event, this._offsetPos);
+      // this._updateElementBounds(position);
+    }
+  };
+
+  // [내부함수] 드래그 의도 취소 - 최소 드래그 거리 미만으로 마우스가 이동한 경우
+  _cancelDragIntent = (event) => {
+    document.removeEventListener('mousemove', this._detectDragIntent);
+    document.removeEventListener('mouseup', this._cancelDragIntent);
+  };
+
+  /** [내부함수] 드래그 진행
+   * @param {MouseEvent} event - 마우스 이벤트
+   */
+  _startDragMove = (event) => {
+    // 리사이징 중이면 드래그 불가
+    if (this._dragState.isResizing) return;
+
+    // 레이아웃 내부 진입 여부
+    const isInsideLayout = this._detectLayoutEntry(event, this._offsetPos);
+
+    if (isInsideLayout) {
+      const position = this._getActiveElementPosition(event, this._offsetPos);
+      this._updateElementBounds(position);
+    }
+  };
+
+  /** [내부함수] 드래그 종료 */
+  _stopDrag = () => {
+    // 정상적인 드래그 상태인 경우 리셋 후 종료 (단순 클릭, 레이아웃 외부에서 드래그 종료)
+    if (!this._dragState.isDragging) {
+      this._resetDrag();
+      return;
+    }
+
+    // 1) 기존 배치요소인 경우
+    if (this._alreadyExist) {
+      // 충돌 시 기존 위치로 복귀
+      if (this._detectElementCollision()) {
+        alert('아이템이 겹칩니다. 다른 위치로 드래그해주세요.');
+        this._activeElement.position.x = this._startPos.x;
+        this._activeElement.position.y = this._startPos.y;
+        this._resetDrag(true);
+      } else {
+        this._resetDrag(true, true);
+      }
+
+      return;
+    }
+    // 2) 신규 아이템인 경우
+    else {
+      // 충돌 시 추가 취소 (로컬에만 반영됨)
+      if (this._detectElementCollision()) {
+        alert('겹치는 위치에 배치할 수 없습니다.');
+        this.setActiveElement(null, 'add');
+      } else {
+        this.guides = { x: null, y: null, w: null, h: null };
+        this.eventBus.emit('freeDrop:requestAddElement', {
+          element: this._activeElement,
+          timestamp: Date.now(),
+        });
+      }
+      this._resetDrag();
+      return;
+    }
+  };
+
+  /** [내부함수] 드래그 관련 상태 초기화
+   * @param {boolean} emitEvent - 업데이트 이벤트 발송 여부
+   * @param {boolean} historyEvent - 히스토리 이벤트 기록 여부
+   */
+  _resetDrag(emitEvent = false, historyEvent = false) {
+    this._dragState.isDragging = false;
+    this.guides = { x: null, y: null, w: null, h: null };
+
+    this._startPos = { x: 0, y: 0 };
+    this._startSize = { w: 0, h: 0 };
+    this._offsetPos = { x: 0, y: 0 };
+
+    if (emitEvent) {
+      this.eventBus.emit('freeDrop:requestUpdateElement', {
+        historyEvent: historyEvent,
+        elementId: this._activeElement.id,
+        position: this._activeElement.position,
+        size: this._activeElement.size,
+        elements: cloneDeep(this.freeElements),
+        guides: this.guides,
+        timestamp: Date.now(),
+      });
+    }
+
+    document.removeEventListener('mousemove', this._startDragMove);
+    document.removeEventListener('mouseup', this._stopDrag);
+  }
+
+  /** ---------------------------------- 리사이징 관련 메소드 ---------------------------------- **/
+  /** 리사이징 시작
+   * @param {MouseEvent} event - 마우스 이벤트
+   * @param {string} direction - 리사이징 방향
+   */
+  startResize(event, direction) {
+    if (!this._activeElement) {
+      console.error('[FreeDropEngine] 활성화된 배치요소를 찾을 수 없습니다.');
+      return false;
+    }
+
+    // 배치요소 잠겨 있으면 드래그/삭제 불가
+    if (this._activeElement.isLocked) return;
+
+    this._dragState.isResizing = true;
+    this._dragState.direction = direction;
+    this._offsetPos = { x: event.clientX, y: event.clientY };
+
+    this._startPos = { x: this._activeElement.position.x, y: this._activeElement.position.y };
+    this._startSize = { w: this._activeElement.size.w, h: this._activeElement.size.h };
+
+    document.addEventListener('mousemove', this._startResizeMove);
+    document.addEventListener('mouseup', this._stopResize);
+  }
+
+  /** [내부함수] 리사이징 진행
+   * @param {MouseEvent} event - 마우스 이벤트
+   */
+  _startResizeMove = (event) => {
+    // 리사이징 중인 경우에만 드래그 가능
+    if (!this._dragState.isResizing) return;
+
+    const { newX, newY, newW, newH } = this._getNewSizeAndPosition(event, this._dragState.direction);
+    this._updateElementBounds({ x: newX, y: newY }, { w: newW, h: newH });
+  };
+
+  /** [내부함수] 리사이징 종료 */
+  _stopResize = () => {
+    // 충돌 시 기존 위치로 복귀
+    if (this._detectElementCollision()) {
+      alert('아이템이 겹칩니다. 사이즈 조정이 취소되었습니다.');
+      this._activeElement.position = this._startPos;
+      this._activeElement.size = this._startSize;
+      this._resetResize();
+    } else {
+      this._resetResize(true);
+    }
+
+    return;
+  };
+
+  /** [내부함수] 리사이즈 관련 상태 초기화
+   * @param {boolean} historyEvent - 히스토리 이벤트 기록 여부
+   */
+  _resetResize(historyEvent = false) {
+    this._dragState.isResizing = false;
+    this._dragState.direction = false;
+
+    this.guides = { x: null, y: null, w: null, h: null };
+
+    this._startPos = { x: 0, y: 0 };
+    this._startSize = { w: 0, h: 0 };
+    this._offsetPos = { x: 0, y: 0 };
+
+    this.eventBus.emit('freeDrop:requestUpdateElement', {
+      historyEvent: historyEvent,
+      elementId: this._activeElement.id,
+      position: this._activeElement.position,
+      size: this._activeElement.size,
+      activeElement: this._activeElement,
+      guides: this.guides,
+      timestamp: Date.now(),
+    });
+
+    document.removeEventListener('mousemove', this._startResizeMove);
+    document.removeEventListener('mouseup', this._stopResize);
+  }
+}
+
+export default FreeDropEngine;