fix: Sortable 드래그 좌표를 실제 스크롤 컨테이너 기준으로 계산

[205sla]

드래그를 시작한 뒤 목록을 스크롤할 때 정렬 드롭 좌표가 어긋나는 문제를 수정했습니다.

원인

SortableList가 react-sortable-hoc에 getContainer를 넘기지 않아 내부 목록 요소를 스크롤 컨테이너로 삼았습니다. 하지만 실제로 스크롤되는 요소는 react-custom-scroll이 만든 상위 .rcs-inner-container입니다. 이 요소의 scrollTop 변화가 드래그 좌표 계산에 반영되지 않아 newIndex가 포인터 아래 항목과 달라졌습니다.

변경 사항

• sortable 루트 요소의 ref를 보관합니다.
• getContainer로 가장 가까운 .rcs-inner-container를 반환합니다.
• 커스텀 스크롤 컨테이너가 없으면 sortable 루트로 폴백합니다.
• 초기 마운트 시 루트 ref가 준비될 때까지 기다린 뒤 컨테이너를 반환합니다.
• SortableList에 getContainer를 전달합니다.

react-sortable-hoc@0.8.4는 getContainer 결과를 Promise.resolve()로 처리하므로 비동기 컨테이너를 지원합니다.

검증

• npm run build:prod: 기존 번들 크기 경고만 발생하며 통과.
• 모양 목록: scrollTop 610 → 915 / 포인터 인덱스·emit된 newIndex·모델 인덱스·DOM 인덱스 17 일치.
• 소리 목록: scrollTop 915 → 610 / 포인터 인덱스·emit된 newIndex·모델 인덱스·DOM 인덱스 12 일치.
• 장면 정렬: emit 인덱스·모델 인덱스·DOM 인덱스 일치.
• 마우스·터치 정렬 경로 통과.
• 모양·소리의 드래그 중 스크롤 동작도 수동으로 확인.

참고

모양·소리·장면 목록은 이 Sortable 컴포넌트를 공유합니다.

장면 목록의 가로 방향 드래그 중 스크롤은 가로 휠 장치가 없어 수동으로 테스트하지 못했지만 일반적인 장면 정렬은 브라우저 자동화로 확인했습니다.

동작 확인 영상

https://youtu.be/p_tc8PTfUHc

• 0:00–0:21: 기존 문제 재현 — 드래그 중 목록을 스크롤하면 포인터 위치와 드롭 결과가 어긋남
• 0:22–0:47: 수정 후 동작 — 드래그 중 스크롤해도 포인터 위치와 드롭 결과가 일치함

[Copilot]

Pull request overview

Fixes incorrect drop index calculation when dragging sortable lists while the list is scrolled, by ensuring react-sortable-hoc computes drag coordinates relative to the actual scroll container (.rcs-inner-container from react-custom-scroll) instead of the inner list element.

Changes:

• Store the sortable root element via a ref callback.
• Provide getContainer to react-sortable-hoc to return the nearest .rcs-inner-container (with fallback to root).
• Delay container resolution until the root ref is available (via a Promise-based resolver).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[205sla]

210bb38에서 반영했습니다. Element.closest()를 직접 쓰던 코드를 제거하고 레거시 브라우저를 위해 matches/msMatchesSelector 기반의 간단한 부모 순회 폴백을 추가했습니다.