diff --git a/app/modules/cupang/templates/cupang/box_calc.html b/app/modules/cupang/templates/cupang/box_calc.html index 0d0685e..e29a60e 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 %}
@@ -159,6 +159,7 @@ var el = document.getElementById(id); try { return JSON.parse((el && el.textContent) || "[]"); } catch (e) { return []; } } + var raf = window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : null; var rules = readJson("cpg-calc-rules"); var centers = readJson("cpg-centers"); @@ -298,6 +299,11 @@ ""; } + // 드래그는 핸들에서만 시작한다 — 카드 본문 클릭/텍스트 선택과 충돌하지 않게. + function handleHtml() { + return '⠿'; + } + function kpi(label, value, hint) { return '
' + esc(label) + "" + '' + esc(value) + "" + @@ -341,6 +347,7 @@ ph += '
' + '
' + + (remain ? handleHtml() : "") + '' + esc(r.product_name) + "" + '' + esc(r.box_name) + "" + "
" + @@ -374,7 +381,8 @@ ' style="animation-delay:' + (n * 60) + 'ms">' + '
' + boxSvg(b.fill_percent, m.box_name) + "
" + '
' + - '
' + esc(m.box_name) + " 혼합 #" + (i + 1) + + '
' + (remain ? handleHtml() : "") + + esc(m.box_name) + " 혼합 #" + (i + 1) + (remain ? "" : ' 배분됨') + "
" + '
    ' + items + "
" + '
' + @@ -474,16 +482,22 @@ if (e.key === "Escape" && !dlg.hidden) closeDialog(); }); - // ── 드래그 (마우스 이벤트 기반) ─────────────────── - // HTML5 네이티브 DnD(draggable + dragstart)는 브라우저에 따라 드래그가 - // 아예 시작되지 않는다(웨일에서 미리보기조차 안 생김) → 직접 구현한다. - // · mousedown 후 4px 이상 움직이면 드래그 시작, 카드 복제본(고스트)이 커서를 따라온다 - // · 커서 아래 요소를 elementFromPoint 로 찾아 센터 패널을 강조 - // · mouseup 위치의 센터에 놓으면 수량 대화상자가 열린다 - // · 드래그 없이 클릭하면 첫 번째 센터를 기본값으로 대화상자가 열린다 - var drag = null; // {key, card, ghost, startX, startY, moved} - var suppressClickOn = null; // 드래그로 끝난 카드의 잔여 click 1회 무시 + // ── 드래그 엔진 (Pointer Events) ───────────────── + // HTML5 네이티브 DnD 는 브라우저(웨일 등)에서 시작조차 안 되는 경우가 있어 쓰지 않는다. + // · 핸들(⠿)에서만 드래그 시작 → 카드 클릭/텍스트 선택과 충돌 없음 + // · setPointerCapture 로 창 밖·다른 요소 위에서도 이벤트를 놓치지 않음 + // · 커서 위치의 센터에 "여기에 담기" 플레이스홀더를 끼워 넣어 놓일 자리를 보여줌 + // · 목록 위/아래 끝에 커서가 오면 자동 스크롤(센터가 많을 때 필수) + // · 이동 처리는 rAF 로 1프레임 1회만 — 커서를 빨리 흔들어도 렉이 없다 + var drag = null; // {key, card, ghost, startX, startY, moved, pointerId} + var suppressClickOn = null; // 드래그로 끝난 카드의 잔여 click 1회 무시 + var placeholder = null; // 놓일 자리 표시 요소 + var lastPoint = { x: 0, y: 0 }; + var moveScheduled = false; + var autoScrollTimer = null; var DRAG_THRESHOLD = 4; + var EDGE = 44; // 오토스크롤이 걸리는 가장자리 두께(px) + var EDGE_SPEED = 14; // 1틱 스크롤량(px) function clearOver() { if (!distList) return; @@ -497,24 +511,53 @@ 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 moveGhost(x, y) { - if (!drag || !drag.ghost) return; - drag.ghost.style.left = (x + 12) + "px"; - drag.ghost.style.top = (y + 12) + "px"; + function showPlaceholder(zone) { + if (!drag) return; + if (!placeholder) { + placeholder = document.createElement("div"); + placeholder.className = "cpg-drop-placeholder"; + } + placeholder.textContent = (labels[drag.key] || drag.key) + " — 여기에 담기"; + var list = zone.querySelector(".cpg-dist-items"); + (list || zone).appendChild(placeholder); } - function startDrag(card, x, y) { + function hidePlaceholder() { + if (placeholder && placeholder.parentNode) placeholder.parentNode.removeChild(placeholder); + } + + function autoScrollTick() { + if (!drag || !distList || !distList.getBoundingClientRect) return; + var box = distList.getBoundingClientRect(); + if (!box.height) return; + var y = lastPoint.y; + if (y > box.top && y < box.top + EDGE) distList.scrollTop -= EDGE_SPEED; + else if (y < box.bottom && y > box.bottom - EDGE) distList.scrollTop += EDGE_SPEED; + } + + function moveGhost(x, y) { + if (!drag || !drag.ghost) return; + drag.ghost.style.left = (x + 14) + "px"; + drag.ghost.style.top = (y + 14) + "px"; + } + + function startDrag(x, y) { + var card = drag.card; var ghost = card.cloneNode(true); ghost.className = card.className + " cpg-drag-ghost"; ghost.removeAttribute("style"); - ghost.style.width = card.offsetWidth ? card.offsetWidth + "px" : "240px"; + ghost.style.width = (card.offsetWidth || 260) + "px"; + var badge = document.createElement("span"); + badge.className = "cpg-drag-badge"; + badge.textContent = "잔여 " + remainFor(drag.key) + "박스"; + ghost.appendChild(badge); document.body.appendChild(ghost); drag.ghost = ghost; drag.moved = true; @@ -522,15 +565,34 @@ document.body.classList.add("cpg-dragging"); if (distCard) distCard.classList.add("is-drop-ready"); moveGhost(x, y); + if (!autoScrollTimer) autoScrollTimer = setInterval(autoScrollTick, 40); + } + + function handleMove() { + moveScheduled = false; + if (!drag) return; + moveGhost(lastPoint.x, lastPoint.y); + var zone = zoneAt(lastPoint.x, lastPoint.y); + clearOver(); + hidePlaceholder(); + if (zone) { + zone.classList.add("is-over"); + showPlaceholder(zone); + if (drag.ghost) drag.ghost.classList.remove("is-invalid"); + } else if (drag.ghost) { + drag.ghost.classList.add("is-invalid"); + } } 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"); + if (card) card.classList.remove("is-dragging"); document.body.classList.remove("cpg-dragging"); if (distCard) distCard.classList.remove("is-drop-ready"); + if (autoScrollTimer) { clearInterval(autoScrollTimer); autoScrollTimer = null; } + hidePlaceholder(); clearOver(); drag = null; if (!moved) return; // 움직이지 않았으면 클릭으로 처리 @@ -542,38 +604,45 @@ openDialog(key, zone.getAttribute("data-drop-for")); } - sumBody.addEventListener("mousedown", function (e) { - if (e.button !== 0) return; - var card = e.target.closest("[data-key]"); + sumBody.addEventListener("pointerdown", function (e) { + if (e.pointerType === "mouse" && e.button !== 0) return; + var handle = e.target.closest(".cpg-drag-handle"); + if (!handle) return; + var card = handle.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(); // 텍스트 선택 방지 + drag = { key: card.getAttribute("data-key"), card: card, startX: e.clientX, startY: e.clientY, + moved: false, ghost: null, pointerId: e.pointerId }; + lastPoint = { x: e.clientX, y: e.clientY }; + if (handle.setPointerCapture && e.pointerId != null) { + try { handle.setPointerCapture(e.pointerId); } catch (err) { /* 지원 안 하면 무시 */ } + } + e.preventDefault(); // 텍스트 선택·스크롤 제스처 방지 }); - document.addEventListener("mousemove", function (e) { + document.addEventListener("pointermove", function (e) { if (!drag) return; + lastPoint = { x: e.clientX, y: e.clientY }; 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); + startDrag(e.clientX, e.clientY); } - moveGhost(e.clientX, e.clientY); - var zone = zoneAt(e.clientX, e.clientY); - clearOver(); - if (zone) zone.classList.add("is-over"); + if (moveScheduled) return; + moveScheduled = true; + if (raf) raf(handleMove); else handleMove(); }); - document.addEventListener("mouseup", function (e) { + document.addEventListener("pointerup", function (e) { if (!drag) return; endDrag(true, e.clientX, e.clientY, e.target); }); - + document.addEventListener("pointercancel", function () { endDrag(false, 0, 0, null); }); + window.addEventListener("blur", function () { if (drag) endDrag(false, 0, 0, null); }); 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; diff --git a/app/modules/cupang/templates/cupang/box_rules.html b/app/modules/cupang/templates/cupang/box_rules.html index 09574fc..5419e65 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 8a88e83..169b874 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 a5ce896..4ae6f47 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 6e96960..5d6e0de 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 38505d2..9ecdada 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 e4bf8e6..bb08a54 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 dea8490..dde2f54 100644 --- a/app/static/cupang.css +++ b/app/static/cupang.css @@ -596,7 +596,7 @@ } /* ② 요약: 카드가 드래그 가능함을 알린다 */ -.cpg-sum-prod.is-draggable, .cpg-box-card.is-draggable { cursor: grab; } +.cpg-sum-prod.is-draggable, .cpg-box-card.is-draggable { cursor: pointer; } .cpg-sum-prod.is-draggable:hover, .cpg-box-card.is-draggable:hover { border-color: var(--color-rich-black); } @@ -695,3 +695,51 @@ body.cpg-dragging { cursor: grabbing; user-select: none; } /* 드래그 중일 때 ③ 영역을 강조 — 어디에 놓아야 하는지 보이게 */ .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); } + +/* 드래그 핸들 / 플레이스홀더 / 고스트 배지 */ +.cpg-drag-handle { + display: inline-flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + margin-right: 4px; + border-radius: 5px; + color: var(--color-midtone-gray); + cursor: grab; + touch-action: none; /* 모바일에서 스크롤 제스처와 충돌 방지 */ + user-select: none; + flex: 0 0 auto; +} +.cpg-drag-handle:hover { background: var(--color-ghost-gray); color: var(--color-rich-black); } +body.cpg-dragging .cpg-drag-handle { cursor: grabbing; } + +.cpg-drop-placeholder { + margin-top: 6px; + padding: 8px; + border: 1.5px dashed var(--color-rich-black); + border-radius: 8px; + font-size: 12px; + color: var(--color-rich-black); + background: var(--color-ghost-gray); + animation: cpg-ph-in .15s ease-out; +} +@keyframes cpg-ph-in { + from { opacity: 0; transform: translateY(-4px); } + to { opacity: 1; transform: none; } +} + +.cpg-drag-badge { + position: absolute; + top: -10px; + right: -10px; + padding: 2px 8px; + border-radius: 999px; + background: var(--color-rich-black); + color: var(--color-canvas-white); + font-size: 11px; + font-weight: 700; + white-space: nowrap; +} +.cpg-drag-ghost.is-invalid { border-color: var(--color-callout-red); } +.cpg-drag-ghost.is-invalid .cpg-drag-badge { background: var(--color-callout-red); } diff --git a/tests/js/box_calc_ui.test.js b/tests/js/box_calc_ui.test.js index cd8d922..5eb7a77 100644 --- a/tests/js/box_calc_ui.test.js +++ b/tests/js/box_calc_ui.test.js @@ -35,20 +35,24 @@ 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 })); +// 이동 처리는 requestAnimationFrame 으로 1프레임 지연되므로 한 프레임 기다린다. +const frame = () => new Promise(r => setTimeout(r, 30)); -// 마우스 드래그 시뮬레이션. +// 포인터 드래그 시뮬레이션. // 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 pointer(el, type, x, y) { + el.dispatchEvent(new w.PointerEvent(type, { + bubbles: true, cancelable: true, clientX: x, clientY: y, button: 0, pointerId: 1, pointerType: "mouse", })); } +function handleOf(card) { return card.querySelector(".cpg-drag-handle"); } + 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); + pointer(handleOf(card), "pointerdown", 10, 10); + pointer(d, "pointermove", 60, 60); // 임계값(4px) 초과 → 드래그 시작 + pointer(d, "pointermove", 200, 200); + pointer(d, "pointerup", 200, 200); d.elementFromPoint = () => null; } @@ -86,15 +90,39 @@ function dragCardTo(card, target) { // ── 마우스 드래그 → 드롭 → 대화상자 ─────────────── const card = $(".cpg-sum-prod.is-draggable"); + check("드래그 핸들이 있다", !!handleOf(card)); d.elementFromPoint = () => $(".cpg-dist-center"); - mouse(card, "mousedown", 10, 10); - mouse(d, "mousemove", 60, 60); - check("4px 이상 움직이면 드래그 시작", card.classList.contains("is-dragging")); + + // 핸들이 아닌 카드 본문에서는 드래그가 시작되지 않는다 + pointer(card.querySelector(".cpg-sum-prod-name"), "pointerdown", 10, 10); + pointer(d, "pointermove", 60, 60); + check("핸들 밖에서는 드래그 안 됨", !card.classList.contains("is-dragging") && !$(".cpg-drag-ghost")); + + pointer(handleOf(card), "pointerdown", 10, 10); + pointer(d, "pointermove", 60, 60); + await frame(); + check("핸들에서 4px 이상 움직이면 드래그 시작", card.classList.contains("is-dragging")); check("고스트(복제 카드) 생성", !!$(".cpg-drag-ghost")); + check("고스트에 잔여 배지", text(".cpg-drag-badge") === "잔여 2박스", text(".cpg-drag-badge")); check("드래그 중 대상 센터 강조", $(".cpg-dist-center").classList.contains("is-over")); - mouse(d, "mouseup", 200, 200); + check("놓일 자리 플레이스홀더 표시", !!$(".cpg-drop-placeholder")); + check("플레이스홀더에 대상 이름", text(".cpg-drop-placeholder").includes("미라네 1호 세트"), + text(".cpg-drop-placeholder")); + + // 대상 밖으로 나가면 금지 표시 + d.elementFromPoint = () => $(".cpg-calc-card"); + pointer(d, "pointermove", 400, 400); + await frame(); + check("대상 밖이면 고스트가 금지 표시", $(".cpg-drag-ghost").classList.contains("is-invalid")); + check("대상 밖이면 플레이스홀더 제거", !$(".cpg-drop-placeholder")); + + d.elementFromPoint = () => $(".cpg-dist-center"); + pointer(d, "pointermove", 200, 200); + await frame(); + pointer(d, "pointerup", 200, 200); d.elementFromPoint = () => null; check("드롭 후 고스트 제거", !$(".cpg-drag-ghost")); + check("드롭 후 플레이스홀더 제거", !$(".cpg-drop-placeholder")); check("드롭하면 대화상자가 열린다", $("#cpg-dlg").hidden === false); check("대화상자에 잔여/개수 표시", text("#cpg-dlg-item").includes("잔여 2박스 (16개)"), text("#cpg-dlg-item")); check("대화상자 센터 = 드롭한 센터", $("#cpg-dlg-center").value === "1"); @@ -169,7 +197,17 @@ function dragCardTo(card, target) { check("③ 밖에 놓으면 담기지 않는다", $("#cpg-dlg").hidden === true && $$(".cpg-dist-item").length === 0); check("③ 밖 드롭 안내 메시지", text("#cpg-calc-msg").includes("센터 위에 놓아야"), text("#cpg-calc-msg")); - // (3) 드래그 없이 클릭한 경우 + // (3) Esc 로 드래그 취소 + d.elementFromPoint = () => $(".cpg-dist-center"); + const card4 = $(".cpg-sum-prod.is-draggable"); + pointer(handleOf(card4), "pointerdown", 10, 10); + pointer(d, "pointermove", 80, 80); + d.dispatchEvent(new w.KeyboardEvent("keydown", { key: "Escape", bubbles: true })); + check("Esc 로 드래그 취소", !$(".cpg-drag-ghost") && $("#cpg-dlg").hidden === true); + pointer(d, "pointerup", 200, 200); + d.elementFromPoint = () => null; + + // (4) 드래그 없이 클릭한 경우 $(".cpg-sum-prod.is-draggable").click(); check("클릭 대체 경로 동작", $("#cpg-dlg").hidden === false); $("#cpg-dlg-qty").value = "1";