chore(cupang): 되돌린 뒤 CSS 캐시버전 갱신

47e09b9 되돌리기로 cupang.css 내용이 20260829e 시점으로 돌아갔지만,
브라우저에 20260829f(핸들 스타일 포함)가 캐시돼 있을 수 있어 새 버전으로
올린다.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

app/modules/cupang/templates/cupang/box_calc.html

@@ -1,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829f" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829g" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
@@ -159,7 +159,6 @@
       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");
 
@@ -299,11 +298,6 @@
         "</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>" +
@@ -347,7 +341,6 @@
         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>" +
@@ -381,8 +374,7 @@
                     ' 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">' + (remain ? handleHtml() : "") +
+                      '<div class="cpg-box-title">' + esc(m.box_name) + " 혼합 #" + (i + 1) +
-                        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>' +
@@ -482,22 +474,16 @@
       if (e.key === "Escape" && !dlg.hidden) closeDialog();
     });
 
-    // ── 드래그 엔진 (Pointer Events) ─────────────────
+    // ── 드래그 (마우스 이벤트 기반) ───────────────────
-    // HTML5 네이티브 DnD 는 브라우저(웨일 등)에서 시작조차 안 되는 경우가 있어 쓰지 않는다.
+    // HTML5 네이티브 DnD(draggable + dragstart)는 브라우저에 따라 드래그가
-    //  · 핸들(⠿)에서만 드래그 시작 → 카드 클릭/텍스트 선택과 충돌 없음
+    // 아예 시작되지 않는다(웨일에서 미리보기조차 안 생김) → 직접 구현한다.
-    //  · setPointerCapture 로 창 밖·다른 요소 위에서도 이벤트를 놓치지 않음
+    //  · mousedown 후 4px 이상 움직이면 드래그 시작, 카드 복제본(고스트)이 커서를 따라온다
-    //  · 커서 위치의 센터에 "여기에 담기" 플레이스홀더를 끼워 넣어 놓일 자리를 보여줌
+    //  · 커서 아래 요소를 elementFromPoint 로 찾아 센터 패널을 강조
-    //  · 목록 위/아래 끝에 커서가 오면 자동 스크롤(센터가 많을 때 필수)
+    //  · mouseup 위치의 센터에 놓으면 수량 대화상자가 열린다
-    //  · 이동 처리는 rAF 로 1프레임 1회만 — 커서를 빨리 흔들어도 렉이 없다
+    //  · 드래그 없이 클릭하면 첫 번째 센터를 기본값으로 대화상자가 열린다
-    var drag = null;                 // {key, card, ghost, startX, startY, moved, pointerId}
+    var drag = null;              // {key, card, ghost, startX, startY, moved}
-    var suppressClickOn = null;      // 드래그로 끝난 카드의 잔여 click 1회 무시
+    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;
@@ -511,53 +497,24 @@
       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 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 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.left = (x + 12) + "px";
-      drag.ghost.style.top = (y + 14) + "px";
+      drag.ghost.style.top = (y + 12) + "px";
     }
 
-    function startDrag(x, y) {
+    function startDrag(card, 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 || 260) + "px";
+      ghost.style.width = card.offsetWidth ? card.offsetWidth + "px" : "240px";
-      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;
@@ -565,34 +522,15 @@
       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 (card) card.classList.remove("is-dragging");
+      if (drag.card) drag.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;                  // 움직이지 않았으면 클릭으로 처리
@@ -604,45 +542,38 @@
       openDialog(key, zone.getAttribute("data-drop-for"));
     }
 
-    sumBody.addEventListener("pointerdown", function (e) {
+    sumBody.addEventListener("mousedown", function (e) {
-      if (e.pointerType === "mouse" && e.button !== 0) return;
+      if (e.button !== 0) return;
-      var handle = e.target.closest(".cpg-drag-handle");
+      var card = e.target.closest("[data-key]");
-      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,
+      drag = { key: card.getAttribute("data-key"), card: card, startX: e.clientX, startY: e.clientY, moved: false, ghost: null };
-               moved: false, ghost: null, pointerId: e.pointerId };
+      e.preventDefault();   // 텍스트 선택 방지
-      lastPoint = { x: e.clientX, y: e.clientY };
-      if (handle.setPointerCapture && e.pointerId != null) {
-        try { handle.setPointerCapture(e.pointerId); } catch (err) { /* 지원 안 하면 무시 */ }
-      }
-      e.preventDefault();   // 텍스트 선택·스크롤 제스처 방지
     });
 
-    document.addEventListener("pointermove", function (e) {
+    document.addEventListener("mousemove", 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(e.clientX, e.clientY);
+        startDrag(drag.card, e.clientX, e.clientY);
       }
-      if (moveScheduled) return;
+      moveGhost(e.clientX, e.clientY);
-      moveScheduled = true;
+      var zone = zoneAt(e.clientX, e.clientY);
-      if (raf) raf(handleMove); else handleMove();
+      clearOver();
+      if (zone) zone.classList.add("is-over");
     });
 
-    document.addEventListener("pointerup", function (e) {
+    document.addEventListener("mouseup", 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,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829f" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829g" />{% endblock %}
 
 {% block content %}
 <section class="cpg">

app/modules/cupang/templates/cupang/centers.html

@@ -1,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829f" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829g" />{% endblock %}
 
 {% block content %}
 <section class="cpg">

app/modules/cupang/templates/cupang/detail.html

@@ -1,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829f" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829g" />{% endblock %}
 
 {% block content %}
 <section class="cpg">

app/modules/cupang/templates/cupang/form.html

@@ -1,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829f" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829g" />{% endblock %}
 
 {% block content %}
 <section class="cpg">

app/modules/cupang/templates/cupang/index.html

@@ -1,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829f" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829g" />{% endblock %}
 
 {% block content %}
 <section class="cpg">

app/modules/cupang/templates/cupang/products.html

@@ -1,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829f" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829g" />{% endblock %}
 
 {% block content %}
 <section class="cpg">

app/static/cupang.css

@@ -596,7 +596,7 @@
 }
 
 /* ② 요약: 카드가 드래그 가능함을 알린다 */
-.cpg-sum-prod.is-draggable, .cpg-box-card.is-draggable { cursor: pointer; }
+.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);
 }
@@ -695,51 +695,3 @@ 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); }

tests/js/box_calc_ui.test.js

@@ -35,24 +35,20 @@ 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 }));
-// 이동 처리는 requestAnimationFrame 으로 1프레임 지연되므로 한 프레임 기다린다.
-const frame = () => new Promise(r => setTimeout(r, 30));
 
-// 포인터 드래그 시뮬레이션.
+// 마우스 드래그 시뮬레이션.
 // jsdom 은 레이아웃이 없어 elementFromPoint 가 항상 null 이므로 드롭 대상을 스텁한다.
-function pointer(el, type, x, y) {
+function mouse(el, type, x, y) {
-  el.dispatchEvent(new w.PointerEvent(type, {
+  el.dispatchEvent(new w.MouseEvent(type, {
-    bubbles: true, cancelable: true, clientX: x, clientY: y, button: 0, pointerId: 1, pointerType: "mouse",
+    bubbles: true, cancelable: true, clientX: x, clientY: y, button: 0,
   }));
 }
-function handleOf(card) { return card.querySelector(".cpg-drag-handle"); }
-
 function dragCardTo(card, target) {
   d.elementFromPoint = () => target;
-  pointer(handleOf(card), "pointerdown", 10, 10);
+  mouse(card, "mousedown", 10, 10);
-  pointer(d, "pointermove", 60, 60);     // 임계값(4px) 초과 → 드래그 시작
+  mouse(d, "mousemove", 60, 60);     // 임계값(4px) 초과 → 드래그 시작
-  pointer(d, "pointermove", 200, 200);
+  mouse(d, "mousemove", 200, 200);
-  pointer(d, "pointerup", 200, 200);
+  mouse(d, "mouseup", 200, 200);
   d.elementFromPoint = () => null;
 }
 
@@ -90,39 +86,15 @@ 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);
-  pointer(card.querySelector(".cpg-sum-prod-name"), "pointerdown", 10, 10);
+  check("4px 이상 움직이면 드래그 시작", card.classList.contains("is-dragging"));
-  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"));
-  check("놓일 자리 플레이스홀더 표시", !!$(".cpg-drop-placeholder"));
+  mouse(d, "mouseup", 200, 200);
-  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");
@@ -197,17 +169,7 @@ 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) Esc 로 드래그 취소
+  // (3) 드래그 없이 클릭한 경우
-  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";