king/dbx-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(cupang): 센터 분배를 마우스 기반 드래그로 교체 (웨일 대응)

Browse Source 
웨일에서 카드를 눌러 움직여도 드래그 미리보기조차 생기지 않았다 =
HTML5 네이티브 DnD 가 시작 자체를 못 한 것. 브라우저 구현에 기대는
draggable/dragstart 를 걷어내고 마우스 이벤트로 직접 구현했다.

- mousedown 후 4px 이상 이동하면 드래그 시작, 카드 복제본(고스트)이
  커서를 따라온다. 커서 아래 센터 패널은 elementFromPoint 로 찾아 강조.
- mouseup 위치의 센터에 놓으면 수량 대화상자가 열린다. ③ 카드 여백에
  놓아도 센터가 하나면 그 센터로, ③ 밖이면 안내만 띄우고 담지 않는다.
- Esc 로 드래그 취소. 카드 위에서 손을 뗀 경우에만 뒤따르는 click 을
  1회 무시해, 드래그 후에도 클릭 경로가 막히지 않는다.

tests/js: 드래그 시작 임계값·고스트 생성/제거·대상 강조·여백 드롭·
③ 밖 드롭·클릭 대체 경로까지 마우스 이벤트로 검증. 전체 통과.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
king
2026-08-29 03:17:08 +09:00
parent ae7daabae5
commit e7db2a90fc
9 changed files with 187 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/js/box_calc_ui.test.js
+68 -57
View File
@@ -1,9 +1,11 @@
// 박스 계산 화면(cupang/box_calc.html) UI 테스트 — jsdom.
// 실행 전 `python tests/js/render_box_calc.py` 로 템플릿을 렌더해 둔다.
const fs = require("fs");
const path = require("path");
const { JSDOM } = require("jsdom");
const path = require("path");
const RENDER = path.join(__dirname, ".out", "box_calc_render.html");
const html = fs.readFileSync(RENDER, "utf8"); // 먼저 render_box_calc.py 실행
const html = fs.readFileSync(RENDER, "utf8");
// 서버 응답 고정: 미라네 1호 18개(2박스+자투리2), 미라네 4호 12개(1박스+자투리4)
const apiResponse = {
@@ -32,8 +34,23 @@ function check(name, cond, extra) {
const $ = (s) => d.querySelector(s);
const $$ = (s) => Array.from(d.querySelectorAll(s));
const text = (s) => ($(s) ? $(s).textContent.replace(/\s+/g, " ").trim() : "<none>");
const fire = (el, type) => el.dispatchEvent(new w.Event(type, { bubbles: true }));
function fire(el, type, init) { el.dispatchEvent(new w.Event(type, Object.assign({bubbles:true}, init))); }
// 마우스 드래그 시뮬레이션.
// jsdom 은 레이아웃이 없어 elementFromPoint 가 항상 null 이므로 드롭 대상을 스텁한다.
function mouse(el, type, x, y) {
el.dispatchEvent(new w.MouseEvent(type, {
bubbles: true, cancelable: true, clientX: x, clientY: y, button: 0,
}));
}
function dragCardTo(card, target) {
d.elementFromPoint = () => target;
mouse(card, "mousedown", 10, 10);
mouse(d, "mousemove", 60, 60); // 임계값(4px) 초과 → 드래그 시작
mouse(d, "mousemove", 200, 200);
mouse(d, "mouseup", 200, 200);
d.elementFromPoint = () => null;
}
(async () => {
// ── ① 입력 → 계산 ──────────────────────────────────
@@ -41,7 +58,6 @@ function fire(el, type, init) { el.dispatchEvent(new w.Event(type, Object.assign
row1.querySelector(".cpg-calc-name").value = "MS-1001";
row1.querySelector(".cpg-calc-qty").value = "18";
// Tab 으로 다음 행 생성 + 포커스 이동
const ke = new w.KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true });
row1.querySelector(".cpg-calc-qty").dispatchEvent(ke);
check("Tab 이 새 행을 만든다", $$(".cpg-calc-row").length === 2, "행수=" + $$(".cpg-calc-row").length);
@@ -57,7 +73,8 @@ function fire(el, type, init) { el.dispatchEvent(new w.Event(type, Object.assign
check("요약이 표시된다", $("#cpg-sum-body").hidden === false);
check("제품 카드 2장", $$(".cpg-sum-prod").length === 2, String($$(".cpg-sum-prod").length));
check("혼합 박스 1장", $$(".cpg-box-card").length === 1);
check("제품별 잔여 = 2박스(16개)", text(".cpg-sum-prod .cpg-sum-prod-nums").startsWith("2박스16개"), text(".cpg-sum-prod .cpg-sum-prod-nums"));
check("제품별 잔여 = 2박스(16개)", text(".cpg-sum-prod .cpg-sum-prod-nums").startsWith("2박스16개"),
text(".cpg-sum-prod .cpg-sum-prod-nums"));
check("KPI 총 박스 4", text(".cpg-kpi .cpg-kpi-value") === "4박스", text(".cpg-kpi .cpg-kpi-value"));
// ── ③ 센터는 추가한 것만 표시 ─────────────────────
@@ -67,20 +84,17 @@ function fire(el, type, init) { el.dispatchEvent(new w.Event(type, Object.assign
check("센터 추가 후 1개 표시", $$(".cpg-dist-center").length === 1, String($$(".cpg-dist-center").length));
check("추가한 센터 이름", text(".cpg-dist-center strong") === "대구3", text(".cpg-dist-center strong"));
// ── 드래그 → 드롭 → 대화상자 ──────────────────────
const card = $(".cpg-sum-prod[draggable='true']");
const dt = { data: {}, setData(t, v) { this.data[t] = v; }, getData(t) { return this.data[t]; } };
const ds = new w.Event("dragstart", { bubbles: true }); ds.dataTransfer = dt;
card.dispatchEvent(ds);
check("dragstart 가 key 를 싣는다", dt.getData("text/plain") === "p:MS-1001", dt.getData("text/plain"));
const zone = $(".cpg-dist-center");
const dov = new w.Event("dragover", { bubbles: true, cancelable: true }); dov.dataTransfer = dt;
zone.dispatchEvent(dov);
check("dragover 가 기본동작을 막는다(드롭 허용)", dov.defaultPrevented);
const drop = new w.Event("drop", { bubbles: true, cancelable: true }); drop.dataTransfer = dt;
zone.dispatchEvent(drop);
// ── 마우스 드래그 → 드롭 → 대화상자 ───────────────
const card = $(".cpg-sum-prod.is-draggable");
d.elementFromPoint = () => $(".cpg-dist-center");
mouse(card, "mousedown", 10, 10);
mouse(d, "mousemove", 60, 60);
check("4px 이상 움직이면 드래그 시작", card.classList.contains("is-dragging"));
check("고스트(복제 카드) 생성", !!$(".cpg-drag-ghost"));
check("드래그 중 대상 센터 강조", $(".cpg-dist-center").classList.contains("is-over"));
mouse(d, "mouseup", 200, 200);
d.elementFromPoint = () => null;
check("드롭 후 고스트 제거", !$(".cpg-drag-ghost"));
check("드롭하면 대화상자가 열린다", $("#cpg-dlg").hidden === false);
check("대화상자에 잔여/개수 표시", text("#cpg-dlg-item").includes("잔여 2박스 (16개)"), text("#cpg-dlg-item"));
check("대화상자 센터 = 드롭한 센터", $("#cpg-dlg-center").value === "1");
@@ -90,35 +104,37 @@ function fire(el, type, init) { el.dispatchEvent(new w.Event(type, Object.assign
$("#cpg-dlg-ok").click();
check("대화상자가 닫힌다", $("#cpg-dlg").hidden === true);
check("센터에 항목 1줄", $$(".cpg-dist-item").length === 1);
check("센터 항목에 박스·개수 표시", text(".cpg-dist-item .cpg-dist-unit") === "박스 · 8개", text(".cpg-dist-item .cpg-dist-unit"));
check("센터 합계 배지 1박스/8개", text(".cpg-dist-sum").startsWith("1박스 8개✕") || text(".cpg-dist-sum").startsWith("1박스8개"), text(".cpg-dist-sum"));
check("요약 잔여가 1박스로 줄어든다", text(".cpg-sum-prod .cpg-sum-prod-nums").startsWith("1박스8개"), text(".cpg-sum-prod .cpg-sum-prod-nums"));
check("센터 항목에 박스·개수 표시", text(".cpg-dist-item .cpg-dist-unit") === "박스 · 8개",
text(".cpg-dist-item .cpg-dist-unit"));
check("센터 합계 배지 1박스/8개", text(".cpg-dist-sum").replace(/\s/g, "").startsWith("1박스8개"),
text(".cpg-dist-sum"));
check("요약 잔여가 1박스로 줄어든다", text(".cpg-sum-prod .cpg-sum-prod-nums").startsWith("1박스8개"),
text(".cpg-sum-prod .cpg-sum-prod-nums"));
check("KPI 센터 배분 1박스", $$(".cpg-kpi-value")[1].textContent === "1박스", $$(".cpg-kpi-value")[1].textContent);
// ── 잔여 전부 담기 ────────────────────────────────
$$(".cpg-sum-prod")[0].click(); // 클릭 대체 경로
// ── 클릭 대체 경로 + 잔여 전부 담기 ───────────────
$$(".cpg-sum-prod")[0].click();
check("클릭으로도 대화상자가 열린다", $("#cpg-dlg").hidden === false);
$("#cpg-dlg-all").click();
check("전량 담기 후 잔여 0", text(".cpg-sum-prod .cpg-sum-prod-nums").startsWith("0박스0개"), text(".cpg-sum-prod .cpg-sum-prod-nums"));
check("잔여 0 카드는 드래그 불가", $$(".cpg-sum-prod")[0].getAttribute("draggable") === null);
check("센터 합계 2박스/16개", text(".cpg-dist-sum").replace(/\s/g,"").startsWith("2박스16개"), text(".cpg-dist-sum"));
check("전량 담기 후 잔여 0", text(".cpg-sum-prod .cpg-sum-prod-nums").startsWith("0박스0개"),
text(".cpg-sum-prod .cpg-sum-prod-nums"));
check("잔여 0 카드는 드래그 불가", $$(".cpg-sum-prod")[0].classList.contains("is-done"));
check("센터 합계 2박스/16개", text(".cpg-dist-sum").replace(/\s/g, "").startsWith("2박스16개"),
text(".cpg-dist-sum"));
// ── 수량 직접 수정 (상한 = 잔여+자기수량) ─────────
// ── 수량 직접 수정 (상한 = 잔여 + 자기 수량) ──────
const qty = $(".cpg-dist-item .cpg-dist-qty");
qty.value = "5"; fire(qty, "input");
check("잔여 초과 입력은 최대치로 잘림", qty.value === "2", qty.value);
qty.value = "1"; fire(qty, "input");
check("수량 줄이면 개수 표시 갱신", text(".cpg-dist-item .cpg-dist-unit") === "박스 · 8개", text(".cpg-dist-item .cpg-dist-unit"));
check("수량 줄이면 요약 잔여 복귀", text(".cpg-sum-prod .cpg-sum-prod-nums").startsWith("1박스8개"), text(".cpg-sum-prod .cpg-sum-prod-nums"));
check("수량 줄이면 개수 표시 갱신", text(".cpg-dist-item .cpg-dist-unit") === "박스 · 8개",
text(".cpg-dist-item .cpg-dist-unit"));
check("수량 줄이면 요약 잔여 복귀", text(".cpg-sum-prod .cpg-sum-prod-nums").startsWith("1박스8개"),
text(".cpg-sum-prod .cpg-sum-prod-nums"));
// ── 혼합 박스 담기 ────────────────────────────────
const mix = $(".cpg-box-card[draggable='true']");
const dt2 = { data:{}, setData(t,v){this.data[t]=v;}, getData(t){return this.data[t];} };
const ds2 = new w.Event("dragstart", { bubbles: true }); ds2.dataTransfer = dt2;
mix.dispatchEvent(ds2);
const drop2 = new w.Event("drop", { bubbles: true, cancelable: true }); drop2.dataTransfer = dt2;
$(".cpg-dist-center").dispatchEvent(drop2);
dragCardTo($(".cpg-box-card.is-draggable"), $(".cpg-dist-center"));
check("혼합 박스도 대화상자가 열린다", $("#cpg-dlg").hidden === false);
check("혼합 박스 잔여 1박스(6개)", text("#cpg-dlg-item").includes("잔여 1박스 (6개)"), text("#cpg-dlg-item"));
$("#cpg-dlg-ok").click();
@@ -132,38 +148,33 @@ function fire(el, type, init) { el.dispatchEvent(new w.Event(type, Object.assign
$(".cpg-dist-close").click();
check("센터 빼기", $$(".cpg-dist-center").length === 0);
check("센터 빼면 전량 잔여 복귀", text(".cpg-sum-prod .cpg-sum-prod-nums").startsWith("2박스16개"), text(".cpg-sum-prod .cpg-sum-prod-nums"));
check("센터 빼면 전량 잔여 복귀", text(".cpg-sum-prod .cpg-sum-prod-nums").startsWith("2박스16개"),
text(".cpg-sum-prod .cpg-sum-prod-nums"));
// ── 드롭 실패 경로 방어 확인 ──────────────────────
// ── 드롭 실패 경로 방어 ───────────────────────────
$("#cpg-center-pick").value = "2";
$("#cpg-center-add").click();
check("센터 다시 추가", $$(".cpg-dist-center").length === 1, String($$(".cpg-dist-center").length));
// (1) 패널이 아닌 여백(리스트 자체)에 놓아도, 센터가 하나면 그 센터로 담긴다
const card2 = $(".cpg-sum-prod[draggable='true']");
const dt3 = { data: {}, setData(t, v) { this.data[t] = v; }, getData(t) { return this.data[t] || ""; }, types: ["text/plain"] };
const ds3 = new w.Event("dragstart", { bubbles: true }); ds3.dataTransfer = dt3;
card2.dispatchEvent(ds3);
const den = new w.Event("dragenter", { bubbles: true, cancelable: true }); den.dataTransfer = dt3;
$(".cpg-dist-card").dispatchEvent(den);
check("dragenter 도 기본동작을 막는다", den.defaultPrevented);
const drop3 = new w.Event("drop", { bubbles: true, cancelable: true }); drop3.dataTransfer = dt3;
$("#cpg-dist-list").dispatchEvent(drop3);
// (1) 패널이 아닌 ③ 카드 여백에 놓아도 센터가 하나면 그 센터로
dragCardTo($(".cpg-sum-prod.is-draggable"), $(".cpg-dist-card"));
check("여백에 놓아도 대화상자가 열린다", $("#cpg-dlg").hidden === false);
$("#cpg-dlg-qty").value = "1";
$("#cpg-dlg-ok").click();
check("여백 드롭도 센터에 담긴다", $$(".cpg-dist-item").length === 1, String($$(".cpg-dist-item").length));
// (2) setData 를 막는 브라우저: dataTransfer 가 비어도 dragKey 로 담긴다
// (2) ③ 밖에 놓으면 담기지 않고 안내만 뜬다
$(".cpg-dist-del").click();
const card3 = $(".cpg-sum-prod[draggable='true']");
const dtBlocked = { setData() { throw new Error("blocked"); }, getData() { return ""; }, types: [] };
const ds4 = new w.Event("dragstart", { bubbles: true }); ds4.dataTransfer = dtBlocked;
card3.dispatchEvent(ds4);
const drop4 = new w.Event("drop", { bubbles: true, cancelable: true }); drop4.dataTransfer = dtBlocked;
$(".cpg-dist-center").dispatchEvent(drop4);
check("setData 가 막혀도 드롭이 동작한다", $("#cpg-dlg").hidden === false, text("#cpg-calc-msg"));
dragCardTo($(".cpg-sum-prod.is-draggable"), $(".cpg-calc-card"));
check("③ 밖에 놓으면 담기지 않는다", $("#cpg-dlg").hidden === true && $$(".cpg-dist-item").length === 0);
check("③ 밖 드롭 안내 메시지", text("#cpg-calc-msg").includes("센터 위에 놓아야"), text("#cpg-calc-msg"));
// (3) 드래그 없이 클릭한 경우
$(".cpg-sum-prod.is-draggable").click();
check("클릭 대체 경로 동작", $("#cpg-dlg").hidden === false);
$("#cpg-dlg-qty").value = "1";
$("#cpg-dlg-ok").click();
check("setData 차단 환경에서도 담긴다", $$(".cpg-dist-item").length === 1);
check("클릭으로 담긴다", $$(".cpg-dist-item").length === 1);
console.log("\n" + (fails.length ? "FAILED: " + fails.join(" | ") : "ALL PASS"));
process.exit(fails.length ? 1 : 0);