fix(cupang): 센터 분배 드래그 실패 지점 제거·센터 목록 가나다 정렬

드래그가 브라우저에서 먹지 않던 문제를 추정 대신 실패 가능 지점별로
전부 막았다.

- dragstart 리스너를 카드 요소에 직접 바인딩(위임으로는 잡히지 않는
  환경 대비). 렌더할 때마다 다시 바인딩한다.
- dragenter/dragover 를 모두 preventDefault — 하나만 막으면 드롭을
  거부하는 브라우저가 있다.
- 드롭 대상 범위를 ③ 카드 전체로 확대하고, 대상 패널은
  closest → elementFromPoint → (센터가 하나면) 그 센터 순으로 찾는다.
  패널 사이 여백에 놓아도 담긴다.
- dataTransfer.setData/getData 가 막힌 환경 대비로 dragKey 를 따로 보관해
  드롭 시 사용한다. 그래도 못 읽으면 클릭으로 담으라는 안내를 띄운다.
- 드래그 중에는 ③ 영역에 점선 강조를 준다.
- 드래그 직후 발생하는 click 은 무시해 대화상자가 두 번 뜨지 않게 한다.

센터 선택 목록은 이름 가나다순 정렬(한글 음절은 코드포인트 순).

tests/js: 여백 드롭·dragenter·setData 차단 환경 시나리오 추가. 전체 통과.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-29 03:08:09 +09:00
parent ead1361790
commit ae7daabae5
10 changed files with 132 additions and 41 deletions
+4
View File
@@ -675,3 +675,7 @@
.cpg-dlg-item { margin: 0; font-weight: 600; }
.cpg-dlg-actions { margin: 4px 0 0; flex-wrap: wrap; }
.cpg-modal-box .erp-input, .cpg-modal-box .erp-select { width: 100%; min-width: 0; }
/* 드래그 중일 때 ③ 영역을 강조 — 어디에 놓아야 하는지 보이게 */
.cpg-dist-card.is-drop-ready { outline: 2px dashed var(--color-rich-black); outline-offset: 2px; }
.cpg-dist-card.is-drop-ready .cpg-dist-center { border-color: var(--color-midtone-gray); }