diff --git a/app/modules/cupang/templates/cupang/box_calc.html b/app/modules/cupang/templates/cupang/box_calc.html index fdd36bb..0d0685e 100644 --- a/app/modules/cupang/templates/cupang/box_calc.html +++ b/app/modules/cupang/templates/cupang/box_calc.html @@ -1,6 +1,6 @@ {% extends "erp_base.html" %} -{% block head_extra %}{% endblock %} +{% block head_extra %}{% endblock %} {% block content %}
@@ -338,8 +338,7 @@ var key = prodKey(r.product_code); var remain = remainFor(key); var used = r.full_boxes - remain; - ph += '
' + '
' + '' + esc(r.product_name) + "" + @@ -370,8 +369,7 @@ var items = b.items.map(function (it) { return "
  • " + esc(it.product_name) + "" + it.quantity + "개
    • "; }).join(""); - bh += '
    ' + '
    ' + boxSvg(b.fill_percent, m.box_name) + "
    " + @@ -427,7 +425,7 @@ distList.innerHTML = html; } - function render() { renderSummary(); bindDragSources(); renderDist(); } + function render() { renderSummary(); renderDist(); } // ── 수량 대화상자 ───────────────────────────────── function openDialog(key, centerId) { @@ -476,43 +474,16 @@ if (e.key === "Escape" && !dlg.hidden) closeDialog(); }); - // ── 드래그 앤 드롭 (+ 클릭 대체 경로) ───────────── - // 브라우저마다 다른 실패 지점을 모두 막는다: - // · 리스너를 카드에 직접 건다(위임 시 dragstart 가 안 잡히는 환경 대비) - // · dragenter/dragover 둘 다 preventDefault (드롭 허용 신호) - // · 드롭 대상은 좌표(elementFromPoint)로도 찾고, 못 찾으면 ③ 영역 전체를 대상으로 본다 - // · dataTransfer 를 못 읽는 브라우저 대비로 dragKey 를 따로 보관 - var dragKey = null; - var dragEndedAt = 0; - - function bindDragSources() { - Array.prototype.forEach.call(sumBody.querySelectorAll('[data-key][draggable="true"]'), function (card) { - card.addEventListener("dragstart", function (e) { - dragKey = card.getAttribute("data-key"); - try { - e.dataTransfer.setData("text/plain", dragKey); - e.dataTransfer.effectAllowed = "copy"; - } catch (err) { /* 일부 브라우저는 setData 를 막는다 — dragKey 로 진행 */ } - card.classList.add("is-dragging"); - if (distCard) distCard.classList.add("is-drop-ready"); - }); - card.addEventListener("dragend", function () { - card.classList.remove("is-dragging"); - if (distCard) distCard.classList.remove("is-drop-ready"); - dragEndedAt = Date.now(); - dragKey = null; - clearOver(); - }); - }); - } - - // 드래그가 끝난 직후 브라우저가 click 을 한 번 더 쏘는 경우가 있어 무시한다. - sumBody.addEventListener("click", function (e) { - if (Date.now() - dragEndedAt < 250) return; - var card = e.target.closest("[data-key]"); - if (!card) return; - openDialog(card.getAttribute("data-key"), openCenters[0]); - }); + // ── 드래그 (마우스 이벤트 기반) ─────────────────── + // HTML5 네이티브 DnD(draggable + dragstart)는 브라우저에 따라 드래그가 + // 아예 시작되지 않는다(웨일에서 미리보기조차 안 생김) → 직접 구현한다. + // · mousedown 후 4px 이상 움직이면 드래그 시작, 카드 복제본(고스트)이 커서를 따라온다 + // · 커서 아래 요소를 elementFromPoint 로 찾아 센터 패널을 강조 + // · mouseup 위치의 센터에 놓으면 수량 대화상자가 열린다 + // · 드래그 없이 클릭하면 첫 번째 센터를 기본값으로 대화상자가 열린다 + var drag = null; // {key, card, ghost, startX, startY, moved} + var suppressClickOn = null; // 드래그로 끝난 카드의 잔여 click 1회 무시 + var DRAG_THRESHOLD = 4; function clearOver() { if (!distList) return; @@ -521,54 +492,95 @@ }); } - function zoneFromEvent(e) { - var z = e.target && e.target.closest ? e.target.closest("[data-drop-for]") : null; - if (z) return z; - if (document.elementFromPoint && typeof e.clientX === "number") { - var el = document.elementFromPoint(e.clientX, e.clientY); - if (el && el.closest) { - z = el.closest("[data-drop-for]"); - if (z) return z; - } - } - // ③ 영역 안이지만 패널 사이 여백에 놓은 경우 — 센터가 하나면 그 센터로. - if (openCenters.length === 1 && distList) { + function zoneAt(x, y) { + if (!distList) return null; + var el = document.elementFromPoint ? document.elementFromPoint(x, y) : null; + var zone = el && el.closest ? el.closest("[data-drop-for]") : null; + if (zone) return zone; + // ③ 영역 안(패널 사이 여백 포함)에서 놓았고 센터가 하나뿐이면 그 센터로. + if (el && el.closest && el.closest(".cpg-dist-card") && openCenters.length === 1) { return distList.querySelector("[data-drop-for]"); } return null; } - function keyFromEvent(e) { - var key = ""; - try { key = e.dataTransfer.getData("text/plain") || ""; } catch (err) { key = ""; } - return key || dragKey || ""; + function moveGhost(x, y) { + if (!drag || !drag.ghost) return; + drag.ghost.style.left = (x + 12) + "px"; + drag.ghost.style.top = (y + 12) + "px"; } - if (distCard) { - // ③ 카드 전체에서 드롭을 허용한다(패널 여백·빈 공간 포함). - ["dragenter", "dragover"].forEach(function (type) { - distCard.addEventListener(type, function (e) { - if (!dragKey && !(e.dataTransfer && e.dataTransfer.types && - Array.prototype.indexOf.call(e.dataTransfer.types, "text/plain") >= 0)) return; - e.preventDefault(); - if (e.dataTransfer) e.dataTransfer.dropEffect = "copy"; - var zone = zoneFromEvent(e); - if (zone) { clearOver(); zone.classList.add("is-over"); } - }); - }); - distCard.addEventListener("dragleave", function (e) { - if (!distCard.contains(e.relatedTarget)) clearOver(); - }); - distCard.addEventListener("drop", function (e) { - e.preventDefault(); - clearOver(); - var key = keyFromEvent(e); - if (!key) { msg.textContent = "드래그 정보를 읽지 못했습니다 — 카드를 클릭해 담아 주세요."; return; } - var zone = zoneFromEvent(e); - openDialog(key, zone ? zone.getAttribute("data-drop-for") : openCenters[0]); - }); + function startDrag(card, x, y) { + var ghost = card.cloneNode(true); + ghost.className = card.className + " cpg-drag-ghost"; + ghost.removeAttribute("style"); + ghost.style.width = card.offsetWidth ? card.offsetWidth + "px" : "240px"; + document.body.appendChild(ghost); + drag.ghost = ghost; + drag.moved = true; + card.classList.add("is-dragging"); + document.body.classList.add("cpg-dragging"); + if (distCard) distCard.classList.add("is-drop-ready"); + moveGhost(x, y); } + function endDrag(commit, x, y, upTarget) { + if (!drag) return; + var key = drag.key, moved = drag.moved, card = drag.card; + if (drag.ghost && drag.ghost.parentNode) drag.ghost.parentNode.removeChild(drag.ghost); + if (drag.card) drag.card.classList.remove("is-dragging"); + document.body.classList.remove("cpg-dragging"); + if (distCard) distCard.classList.remove("is-drop-ready"); + clearOver(); + drag = null; + if (!moved) return; // 움직이지 않았으면 클릭으로 처리 + // 카드 위에서 손을 뗀 경우에만 뒤따르는 click 을 1회 무시한다. + suppressClickOn = (card && upTarget && card.contains(upTarget)) ? card : null; + if (!commit) return; + var zone = zoneAt(x, y); + if (!zone) { msg.textContent = "센터 위에 놓아야 담깁니다."; return; } + openDialog(key, zone.getAttribute("data-drop-for")); + } + + sumBody.addEventListener("mousedown", function (e) { + if (e.button !== 0) return; + var card = e.target.closest("[data-key]"); + if (!card || card.classList.contains("is-done")) return; + drag = { key: card.getAttribute("data-key"), card: card, startX: e.clientX, startY: e.clientY, moved: false, ghost: null }; + e.preventDefault(); // 텍스트 선택 방지 + }); + + document.addEventListener("mousemove", function (e) { + if (!drag) return; + if (!drag.moved) { + if (Math.abs(e.clientX - drag.startX) < DRAG_THRESHOLD && + Math.abs(e.clientY - drag.startY) < DRAG_THRESHOLD) return; + startDrag(drag.card, e.clientX, e.clientY); + } + moveGhost(e.clientX, e.clientY); + var zone = zoneAt(e.clientX, e.clientY); + clearOver(); + if (zone) zone.classList.add("is-over"); + }); + + document.addEventListener("mouseup", function (e) { + if (!drag) return; + endDrag(true, e.clientX, e.clientY, e.target); + }); + + document.addEventListener("keydown", function (e) { + if (e.key === "Escape" && drag) endDrag(false, 0, 0, null); + }); + + // 드래그하지 않고 클릭한 경우 — 첫 센터를 기본값으로 대화상자를 연다. + // (드래그를 끝낸 카드에서 브라우저가 한 번 더 쏘는 click 은 1회만 무시) + sumBody.addEventListener("click", function (e) { + var card = e.target.closest("[data-key]"); + if (!card) return; + if (card === suppressClickOn) { suppressClickOn = null; return; } + openDialog(card.getAttribute("data-key"), openCenters[0]); + }); + if (distList) { distList.addEventListener("input", function (e) { if (!e.target.classList.contains("cpg-dist-qty")) return; @@ -583,7 +595,6 @@ entry.count = want; li.querySelector(".cpg-dist-unit").textContent = "박스 · " + (want * (units[entry.key] || 0)) + "개"; renderSummary(); - bindDragSources(); updateCenterTotals(cid); }); diff --git a/app/modules/cupang/templates/cupang/box_rules.html b/app/modules/cupang/templates/cupang/box_rules.html index 7d98293..09574fc 100644 --- a/app/modules/cupang/templates/cupang/box_rules.html +++ b/app/modules/cupang/templates/cupang/box_rules.html @@ -1,6 +1,6 @@ {% extends "erp_base.html" %} -{% block head_extra %}{% endblock %} +{% block head_extra %}{% endblock %} {% block content %}
    diff --git a/app/modules/cupang/templates/cupang/centers.html b/app/modules/cupang/templates/cupang/centers.html index 7bae566..8a88e83 100644 --- a/app/modules/cupang/templates/cupang/centers.html +++ b/app/modules/cupang/templates/cupang/centers.html @@ -1,6 +1,6 @@ {% extends "erp_base.html" %} -{% block head_extra %}{% endblock %} +{% block head_extra %}{% endblock %} {% block content %}
    diff --git a/app/modules/cupang/templates/cupang/detail.html b/app/modules/cupang/templates/cupang/detail.html index 492adbf..a5ce896 100644 --- a/app/modules/cupang/templates/cupang/detail.html +++ b/app/modules/cupang/templates/cupang/detail.html @@ -1,6 +1,6 @@ {% extends "erp_base.html" %} -{% block head_extra %}{% endblock %} +{% block head_extra %}{% endblock %} {% block content %}
    diff --git a/app/modules/cupang/templates/cupang/form.html b/app/modules/cupang/templates/cupang/form.html index 24307c4..6e96960 100644 --- a/app/modules/cupang/templates/cupang/form.html +++ b/app/modules/cupang/templates/cupang/form.html @@ -1,6 +1,6 @@ {% extends "erp_base.html" %} -{% block head_extra %}{% endblock %} +{% block head_extra %}{% endblock %} {% block content %}
    diff --git a/app/modules/cupang/templates/cupang/index.html b/app/modules/cupang/templates/cupang/index.html index e3a4b66..38505d2 100644 --- a/app/modules/cupang/templates/cupang/index.html +++ b/app/modules/cupang/templates/cupang/index.html @@ -1,6 +1,6 @@ {% extends "erp_base.html" %} -{% block head_extra %}{% endblock %} +{% block head_extra %}{% endblock %} {% block content %}
    diff --git a/app/modules/cupang/templates/cupang/products.html b/app/modules/cupang/templates/cupang/products.html index 907b531..e4bf8e6 100644 --- a/app/modules/cupang/templates/cupang/products.html +++ b/app/modules/cupang/templates/cupang/products.html @@ -1,6 +1,6 @@ {% extends "erp_base.html" %} -{% block head_extra %}{% endblock %} +{% block head_extra %}{% endblock %} {% block content %}
    diff --git a/app/static/cupang.css b/app/static/cupang.css index 6914be0..dea8490 100644 --- a/app/static/cupang.css +++ b/app/static/cupang.css @@ -596,13 +596,29 @@ } /* ② 요약: 카드가 드래그 가능함을 알린다 */ -.cpg-sum-prod[draggable="true"], .cpg-box-card[draggable="true"] { cursor: grab; } -.cpg-sum-prod[draggable="true"]:hover, .cpg-box-card[draggable="true"]:hover { +.cpg-sum-prod.is-draggable, .cpg-box-card.is-draggable { cursor: grab; } +.cpg-sum-prod.is-draggable:hover, .cpg-box-card.is-draggable:hover { border-color: var(--color-rich-black); } -.cpg-sum-prod.is-dragging, .cpg-box-card.is-dragging { opacity: .45; } +.cpg-sum-prod.is-dragging, .cpg-box-card.is-dragging { opacity: .35; } .cpg-sum-prod.is-done, .cpg-box-card.is-done { opacity: .5; } +/* 커서를 따라다니는 복제 카드 */ +body.cpg-dragging { cursor: grabbing; user-select: none; } +.cpg-drag-ghost { + position: fixed; + z-index: 1300; + pointer-events: none; + opacity: .9; + max-width: 320px; + background: var(--color-canvas-white); + border: 1px solid var(--color-rich-black); + border-radius: 10px; + box-shadow: 0 12px 28px rgba(0, 0, 0, .25); + transform: rotate(-1.5deg); + animation: none; +} + /* ③ 센터 분배 */ .cpg-dist-list { display: flex; diff --git a/tests/js/box_calc_ui.test.js b/tests/js/box_calc_ui.test.js index 389bd90..cd8d922 100644 --- a/tests/js/box_calc_ui.test.js +++ b/tests/js/box_calc_ui.test.js @@ -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() : ""); +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);