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

feat(cupang): 드래그 조작감 개선 — 핸들·플레이스홀더·오토스크롤

Browse Source 
Pointer Events 기반으로 바꾸고(터치·펜 지원, setPointerCapture 로 창 밖
이동에도 이벤트 유실 없음) 업무툴 수준의 조작 피드백을 붙였다.

- 드래그 핸들(⠿)에서만 드래그 시작 → 카드 클릭/텍스트 선택과 충돌 없음
- 커서를 따라오는 고스트에 "잔여 N박스" 배지, 담을 수 없는 위치에서는
  빨간 테두리로 금지 표시
- 대상 센터에 "○○ — 여기에 담기" 플레이스홀더를 끼워 놓일 자리를 보여줌
- 센터 목록 위/아래 44px 안에 커서가 오면 자동 스크롤(센터가 많을 때 필수)
- pointermove 처리는 requestAnimationFrame 으로 1프레임 1회만 실행
- pointercancel / 창 blur / Esc 에서 드래그를 안전하게 취소

SortableJS 도입은 보류했다. 웨일에서 네이티브 DnD 가 시작조차 되지 않아
어차피 fallback 모드로만 동작하고, 브라우저 실측 검증 수단이 없는 상태에서
의존성만 늘어난다.

tests/js: 핸들 밖 드래그 차단·고스트 배지·플레이스홀더·금지 표시·Esc 취소
시나리오 추가(rAF 지연을 고려해 프레임 대기). 전체 통과.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
king
2026-08-29 03:28:12 +09:00
parent e7db2a90fc
commit 47e09b94d7
9 changed files with 208 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/modules/cupang/templates/cupang/box_calc.html
+102 -33
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829e" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829f" />{% endblock %}
{% block content %}
<section class="cpg">
@@ -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 @@
"</svg>";
}
// 드래그는 핸들에서만 시작한다 — 카드 본문 클릭/텍스트 선택과 충돌하지 않게.
function handleHtml() {
return '<span class="cpg-drag-handle" title="끌어서 센터로 담기" aria-label="드래그 핸들">⠿</span>';
}
function kpi(label, value, hint) {
return '<div class="cpg-kpi"><span class="cpg-kpi-label">' + esc(label) + "</span>" +
'<strong class="cpg-kpi-value">' + esc(value) + "</strong>" +
@@ -341,6 +347,7 @@
ph += '<div class="cpg-sum-prod' + (remain ? " is-draggable" : " is-done") + '"' +
' data-key="' + esc(key) + '">' +
'<div class="cpg-sum-prod-head">' +
(remain ? handleHtml() : "") +
'<span class="cpg-sum-prod-name">' + esc(r.product_name) + "</span>" +
'<span class="erp-badge erp-badge-neutral">' + esc(r.box_name) + "</span>" +
"</div>" +
@@ -374,7 +381,8 @@
' style="animation-delay:' + (n * 60) + 'ms">' +
'<div class="cpg-box-art">' + boxSvg(b.fill_percent, m.box_name) + "</div>" +
'<div class="cpg-box-info">' +
'<div class="cpg-box-title">' + esc(m.box_name) + " 혼합 #" + (i + 1) +
'<div class="cpg-box-title">' + (remain ? handleHtml() : "") +
esc(m.box_name) + " 혼합 #" + (i + 1) +
(remain ? "" : ' <span class="erp-badge erp-badge-success">배분됨</span>') + "</div>" +
'<ul class="cpg-box-items">' + items + "</ul>" +
'<div class="cpg-box-bar"><span style="width:' + b.fill_percent + '%"></span></div>' +
@@ -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;
app/modules/cupang/templates/cupang/box_rules.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829e" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829f" />{% endblock %}
{% block content %}
<section class="cpg">
app/modules/cupang/templates/cupang/centers.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829e" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829f" />{% endblock %}
{% block content %}
<section class="cpg">
app/modules/cupang/templates/cupang/detail.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829e" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829f" />{% endblock %}
{% block content %}
<section class="cpg">
app/modules/cupang/templates/cupang/form.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829e" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829f" />{% endblock %}
{% block content %}
<section class="cpg">
app/modules/cupang/templates/cupang/index.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829e" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829f" />{% endblock %}
{% block content %}
<section class="cpg">
app/modules/cupang/templates/cupang/products.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829e" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829f" />{% endblock %}
{% block content %}
<section class="cpg">
app/static/cupang.css
+49 -1
View File
@@ -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); }