🔖 feat & fix: Portal 오버레이 패턴 적용 및 Stack 아이템 드래그 점프 버그 수정

[y-minion]

💡 작업 요약

• Portal 패턴 도입: Selection Overlay 등 시각적 보조 요소들을 DOM 노드 계층으로부터 완전히 분리하여 예상치 못한 레이아웃 간섭을 방지하는 구조로 변경(리팩토링)했습니다.
• Node Jump 버그 해결: 라이브러리(react-rnd) 내부의 상태 관리 한계로 발생하던 position: relative 아이템의 UI 튀어어오름(버그)을 최적화된 시점에 내부 상태를 초기화하여 해결했습니다.

🛠️ 주요 변경 사항

1. ✨ Portal 패턴 오버레이 리팩토링 (Nago 작업)

Selection Overlay 등 핸들러 UI를 React Portal을 이용해 DOM 트리 밖으로 분리하여 렌더링하도록 개선했습니다.
선택 가이드라인 오버레이 리팩토링에 따라, 기존에 스택 노드(Stack Component) 내부에 자체적으로 구현되어 있던 불필요한 리사이징 핸들 UI 코드를 삭제했습니다.
-> 이로인해 item노드가 stack노드의 밖으로 나와 overflow:hidden 상황에서도 핸들러ui를 볼 수 있게 되었습니다.

2. 🐛 Stack 아이템 리사이즈 직후 드래그 점프 버그 해결

[문제점]

Stack 내부 아이템(position: relative)을 마우스로 요소 상단/좌측 방향으로 리사이즈할 때 !transform-none으로 DOM 렌더링에선 막혀있었으나, react-rnd 내부 상태엔 position 이동 지표가 누적으로 계산되고 있었습니다. 그 직후, 사용자가 드래그를 시작하면 억제되어 있던 누적 transform 값이 한꺼번에 적용되면서 화면 내 다른 지점으로 크게 점프하는 버그가 있었습니다.

[해결책]

드래그 시작(onDragStart) 시점 제일 상단에 rndRef.current?.updatePosition({ x: 0, y: 0 })를 선언하여 react-rnd 내부의 DOM 상태 위치를 항상 (0,0)으로 강제 릴리즈시킨 다음 드래그 활성(setIsTransformActive(true))을 시작하도록 방어 코드를 작성하여 해결했습니다.

3. 📝 트러블슈팅 문서화

위에서 해결한 react-rnd 라이브러리의 Uncontrolled 특성(내부 상태 누적 계산)에서 기인한 버그 발생 원인 및 해결 과정을 상세하게 기술한 문서를 작성했습니다.
경로: .notes/troubleshooting/stack-item-resize-drag-jump.md

🔍 확인 (리뷰) 사항

EditorNodeWrapper 내부 onDragStart에 작성된 react-rnd 내부 상태 강제 릴리즈 로직이 다른 Node Type 이벤트에 미치는 사이드 이펙트는 없는지 확인 부탁드립니다.