From 7d9f7fa364fb537ffb84a04b0c7ebde6b005bfa0 Mon Sep 17 00:00:00 2001
From: king <heoseungpil@gmail.com>
Date: Tue, 1 Sep 2026 20:39:25 +0900
Subject: [PATCH] =?UTF-8?q?feat(cupang):=20=EB=B6=84=EB=B0=B0=20=ED=99=95?=
 =?UTF-8?q?=EC=A0=95=20=EC=A6=89=EC=8B=9C=20=EC=8B=A4=ED=96=89=20+=20?=
 =?UTF-8?q?=EC=A0=80=EC=9E=A5=20=EC=A4=91=20=EC=8A=A4=ED=94=BC=EB=84=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 출고일자 선택 대화상자 제거. 확정 시 활성 출고일(업로드 F13−1일, 없으면 오늘)로 바로 저장
- 저장 중 스피너 모달 표시 → 응답 오면 닫고 달력으로 이동(여러 날짜면 다음 날짜로 이어감)
- 실패 시 모달 닫고 사유를 상단 메시지로 표시, 버튼 재활성화

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../cupang/templates/cupang/box_calc.html     | 178 +++++-------------
 .../cupang/templates/cupang/box_rules.html    |   2 +-
 .../cupang/templates/cupang/index.html        |   2 +-
 .../cupang/templates/cupang/products.html     |   2 +-
 app/modules/cupang/templates/cupang/view.html |   2 +-
 app/static/cupang.css                         |  60 ++----
 6 files changed, 72 insertions(+), 174 deletions(-)

diff --git a/app/modules/cupang/templates/cupang/box_calc.html b/app/modules/cupang/templates/cupang/box_calc.html
index f2ab887..d2e561c 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 %}<link rel="stylesheet" href="/static/cupang.css?v=20260903f" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903g" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
@@ -137,33 +137,14 @@
     </div>
   </div>
 
-  <!-- 분배 확정 — 출고일자 선택 -->
-  <div class="cpg-modal" id="cpg-cfm-dlg" hidden>
-    <div class="cpg-modal-back" data-cfm-close></div>
-    <div class="cpg-modal-box cpg-cfm-box" role="dialog" aria-modal="true" aria-labelledby="cpg-cfm-title">
-      <h3 id="cpg-cfm-title">분배 확정 — 출고일자 선택</h3>
-
-      <div class="cpg-cal">
-        <div class="cpg-cal-head">
-          <button type="button" class="erp-btn erp-btn-outline cpg-btn-sm" id="cpg-cal-prev" aria-label="이전 달">◀</button>
-          <strong id="cpg-cal-label"></strong>
-          <button type="button" class="erp-btn erp-btn-outline cpg-btn-sm" id="cpg-cal-next" aria-label="다음 달">▶</button>
-        </div>
-        <div class="cpg-cal-dow">
-          <span>일</span><span>월</span><span>화</span><span>수</span><span>목</span><span>금</span><span>토</span>
-        </div>
-        <div class="cpg-cal-grid" id="cpg-cal-grid"></div>
-      </div>
-
-      <p class="cpg-cfm-pick" id="cpg-cfm-pick"></p>
-      <div class="cpg-cfm-list" id="cpg-cfm-list"></div>
-      <p class="erp-muted cpg-cfm-note">센터입고일은 출고일과 같게 저장됩니다. 필요하면 출고 상세에서 고치세요.</p>
-
-      <div class="cpg-dlg-actions cpg-cfm-act">
-        <span class="erp-muted" id="cpg-cfm-msg"></span>
-        <button type="button" class="erp-btn erp-btn-primary" id="cpg-cfm-ok" disabled>확인</button>
-        <button type="button" class="erp-btn erp-btn-outline" data-cfm-close>취소</button>
-      </div>
+  <!-- 저장 중 -->
+  <div class="cpg-modal cpg-saving" id="cpg-saving" hidden>
+    <div class="cpg-modal-back"></div>
+    <div class="cpg-modal-box cpg-saving-box" role="alertdialog" aria-live="assertive"
+         aria-labelledby="cpg-saving-title">
+      <div class="cpg-spinner" aria-hidden="true"></div>
+      <strong id="cpg-saving-title">저장 중…</strong>
+      <span class="erp-muted" id="cpg-saving-note"></span>
     </div>
   </div>
 
@@ -1496,19 +1477,27 @@
 
     // ── 분배 확정 ─────────────────────────────────────
     var confirmBtn = document.getElementById("cpg-confirm");
-    var cfmDlg = document.getElementById("cpg-cfm-dlg");
-    var cfmOk = document.getElementById("cpg-cfm-ok");
-    var cfmMsg = document.getElementById("cpg-cfm-msg");
-    var cfmPick = document.getElementById("cpg-cfm-pick");
-    var cfmList = document.getElementById("cpg-cfm-list");
-    var calGrid = document.getElementById("cpg-cal-grid");
-    var calLabel = document.getElementById("cpg-cal-label");
-    var picked = "";            // 선택한 출고일 (YYYY-MM-DD)
-    var calY = 0, calM = 0;     // 달력이 보여주는 연/월
+    var savingDlg = document.getElementById("cpg-saving");
+    var savingNote = document.getElementById("cpg-saving-note");
 
     function pad2(n) { return (n < 10 ? "0" : "") + n; }
     function iso(y, m, d) { return y + "-" + pad2(m + 1) + "-" + pad2(d); }
 
+    // 확정에 쓸 출고일 — 업로드한 발주서의 출고일(F13 − 1일), 없으면 오늘.
+    function shipDateForConfirm() {
+      if (activeDate) return activeDate;
+      if (uploadShipDate) return uploadShipDate;
+      var t = new Date();
+      return iso(t.getFullYear(), t.getMonth(), t.getDate());
+    }
+
+    function showSaving(text) {
+      if (!savingDlg) return;
+      if (savingNote) savingNote.textContent = text || "";
+      savingDlg.hidden = false;
+    }
+    function hideSaving() { if (savingDlg) savingDlg.hidden = true; }
+
     // 배분이 남았는지 — ② 요약과 같은 기준
     function boxTotals() {
       var total = 0, remain = 0;
@@ -1545,7 +1534,7 @@
       if (!confirmBtn) return;
       var why = confirmBlockReason();
       confirmBtn.disabled = !!why;
-      confirmBtn.title = why || "출고일자를 골라 출고 묶음을 만듭니다.";
+      confirmBtn.title = why || ("출고일 " + shipDateForConfirm() + " 로 바로 확정합니다.");
     }
 
     // 센터별 전송 payload — 혼합 상자는 내용물 제품으로 풀어서 담는다.
@@ -1622,63 +1611,20 @@
       });
     }
 
-    function renderCal() {
-      if (!calGrid) return;
-      calLabel.textContent = calY + "년 " + (calM + 1) + "월";
-      var first = new Date(calY, calM, 1).getDay();
-      var days = new Date(calY, calM + 1, 0).getDate();
-      var now = new Date();
-      var todayIso = iso(now.getFullYear(), now.getMonth(), now.getDate());
-      var html = "";
-      for (var i = 0; i < first; i++) html += '<span class="cpg-cal-cell is-blank"></span>';
-      for (var d = 1; d <= days; d++) {
-        var v = iso(calY, calM, d);
-        var dow = (first + d - 1) % 7;
-        html += '<button type="button" class="cpg-cal-cell' +
-                  (v === picked ? " is-picked" : "") +
-                  (v === todayIso ? " is-today" : "") +
-                  (dow === 0 ? " is-sun" : (dow === 6 ? " is-sat" : "")) +
-                '" data-day="' + v + '">' + d + "</button>";
-      }
-      calGrid.innerHTML = html;
-      cfmPick.textContent = picked ? "출고일: " + picked : "달력에서 출고일자를 고르세요.";
-      cfmOk.disabled = !picked;
-    }
-
-    function openConfirm() {
+    function submitConfirm() {
       var why = confirmBlockReason();
       if (why) { msg.textContent = why; return; }
-      var t = new Date();
-      picked = iso(t.getFullYear(), t.getMonth(), t.getDate());
-      if (uploadShipDate) picked = uploadShipDate;   // 업로드한 발주서의 출고일(F13 − 1일)
-      var pp = picked.split("-");
-      calY = parseInt(pp[0], 10);
-      calM = parseInt(pp[1], 10) - 1;
-      cfmMsg.textContent = "";
-      cfmList.innerHTML = buildPlans().map(function (pl) {
-        var pieces = pl.items.reduce(function (n, it) { return n + it.quantity; }, 0);
-        return '<div class="cpg-cfm-row">' +
-                 '<span class="cpg-cfm-cname">' + esc(centerName(pl.center_id)) + "</span>" +
-                 '<span class="cpg-cfm-cmeta">' + esc(pl.ship_method) + " · " + pl.boxes + "상자 · " + pieces + "개</span>" +
-               "</div>";
-      }).join("");
-      renderCal();
-      cfmDlg.hidden = false;
-      cfmOk.focus();
-    }
-
-    function closeConfirm() { cfmDlg.hidden = true; }
-
-    function submitConfirm() {
-      if (!picked) return;
       var plans = buildPlans();
-      if (!plans.length) { cfmMsg.textContent = "담긴 품목이 없습니다."; return; }
-      cfmOk.disabled = true;
-      cfmMsg.textContent = "저장 중…";
+      if (!plans.length) { msg.textContent = "담긴 품목이 없습니다."; return; }
+
+      var shipDate = shipDateForConfirm();
+      if (confirmBtn) confirmBtn.disabled = true;
+      showSaving(shipDate + " 출고 " + plans.length + "건");
+
       fetch("/cupang/api/box-calc/confirm", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ ship_date: picked, centers: plans })
+        body: JSON.stringify({ ship_date: shipDate, centers: plans })
       })
         .then(function (r) {
           if (!r.ok) {
@@ -1689,65 +1635,43 @@
           return r.json();
         })
         .then(function (data) {
-          var d = (data && data.ship_date) || picked;
-          // 출고리스트는 구글 시트에 기록한다. 엑셀이 필요하면
-          // /cupang/export.xlsx?date=YYYY-MM-DD 로 따로 받을 수 있다(자동 다운로드 없음).
-          // 구글 시트 기록 결과 (설정돼 있을 때만 동작)
+          var d = (data && data.ship_date) || shipDate;
+          // 출고리스트는 구글 시트에 기록한다(설정돼 있을 때만).
+          // 엑셀이 필요하면 /cupang/export.xlsx?date=YYYY-MM-DD 로 따로 받는다.
           var sh = (data && data.sheet) || {};
           var sheetNote = sh.ok
                 ? "구글 시트 " + (sh.title || "") + " 기록 완료"
                 : "구글 시트 기록 안 됨 — " + (sh.reason || "사유 불명");
+
           // 업로드한 출고일이 여러 개면 남은 날짜 작업을 이어서 한다.
           var idx = dateOrder.indexOf(activeDate);
           if (idx >= 0 && dateOrder.length > 1) {
             var done = activeDate;
             dateOrder.splice(idx, 1);
             delete sets[done];
-            closeConfirm();
             activeDate = "";
             loadDate(dateOrder[Math.min(idx, dateOrder.length - 1)]);
-            msg.textContent = done + " 출고 확정 완료 — 남은 출고일 " + dateOrder.length + "개" +
-                              (sheetNote ? " · " + sheetNote : "");
+            hideSaving();
+            syncConfirm();
+            msg.textContent = done + " 출고 확정 완료 — 남은 출고일 " + dateOrder.length + "개 · " + sheetNote;
             poMsg.textContent = done + " 확정됨. 남은 날짜: " + dateOrder.join(", ");
-            cfmOk.disabled = false;
             return;
           }
+
+          // 저장이 끝났으면 창을 닫고 달력으로 이동한다.
+          hideSaving();
           var parts = d.split("-");
-          // 달력으로 이동해 방금 만든 출고 묶음을 보여준다(엑셀 저장 뒤).
-          cfmMsg.textContent = "출고 확정 완료." +
-                               (sheetNote ? " " + sheetNote + "." : "") + " 달력으로 이동합니다…";
-          setTimeout(function () {
-            window.location.href = "/cupang/?year=" + parts[0] + "&month=" + parseInt(parts[1], 10) + "&date=" + d;
-          }, 1200);
+          window.location.href = "/cupang/?year=" + parts[0] +
+                                 "&month=" + parseInt(parts[1], 10) + "&date=" + d;
         })
         .catch(function (err) {
-          cfmMsg.textContent = (err && err.message) || "확정 실패 — 다시 시도하세요.";
-          cfmOk.disabled = false;
+          hideSaving();
+          if (confirmBtn) confirmBtn.disabled = false;
+          msg.textContent = (err && err.message) || "확정 실패 — 다시 시도하세요.";
         });
     }
 
-    if (confirmBtn) confirmBtn.addEventListener("click", openConfirm);
-    if (cfmDlg) {
-      Array.prototype.forEach.call(cfmDlg.querySelectorAll("[data-cfm-close]"), function (el) {
-        el.addEventListener("click", closeConfirm);
-      });
-      calGrid.addEventListener("click", function (e) {
-        var cell = e.target.closest("[data-day]");
-        if (!cell) return;
-        picked = cell.getAttribute("data-day");
-        renderCal();
-      });
-      document.getElementById("cpg-cal-prev").addEventListener("click", function () {
-        calM -= 1; if (calM < 0) { calM = 11; calY -= 1; } renderCal();
-      });
-      document.getElementById("cpg-cal-next").addEventListener("click", function () {
-        calM += 1; if (calM > 11) { calM = 0; calY += 1; } renderCal();
-      });
-      cfmOk.addEventListener("click", submitConfirm);
-    }
-    document.addEventListener("keydown", function (e) {
-      if (e.key === "Escape" && cfmDlg && !cfmDlg.hidden) closeConfirm();
-    });
+    if (confirmBtn) confirmBtn.addEventListener("click", submitConfirm);
 
     // 센터 헤더의 출고방식 선택
     if (distList) {
diff --git a/app/modules/cupang/templates/cupang/box_rules.html b/app/modules/cupang/templates/cupang/box_rules.html
index 18f54c6..eeb1def 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 %}<link rel="stylesheet" href="/static/cupang.css?v=20260903f" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903g" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
diff --git a/app/modules/cupang/templates/cupang/index.html b/app/modules/cupang/templates/cupang/index.html
index d98460f..8014cd9 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 %}<link rel="stylesheet" href="/static/cupang.css?v=20260903f" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903g" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
diff --git a/app/modules/cupang/templates/cupang/products.html b/app/modules/cupang/templates/cupang/products.html
index a9b0174..527755b 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 %}<link rel="stylesheet" href="/static/cupang.css?v=20260903f" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903g" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
diff --git a/app/modules/cupang/templates/cupang/view.html b/app/modules/cupang/templates/cupang/view.html
index 1f0cf6e..14a60ba 100644
--- a/app/modules/cupang/templates/cupang/view.html
+++ b/app/modules/cupang/templates/cupang/view.html
@@ -1,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903f" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903g" />{% endblock %}
 
 {% block content %}
 {# 출고 묶음 보기 — 상자 계산 화면과 같은 3열 구성. 읽기 전용(수정 없음). #}
diff --git a/app/static/cupang.css b/app/static/cupang.css
index 50e0218..90acd34 100644
--- a/app/static/cupang.css
+++ b/app/static/cupang.css
@@ -780,52 +780,26 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
   border-color: var(--color-callout-red);
 }
 
-/* 분배 확정 대화상자 — 달력 */
-.cpg-cfm-box { width: min(460px, calc(100vw - 32px)); }
-.cpg-cal { border: 1px solid var(--color-subtle-ash); border-radius: 8px; overflow: hidden; }
-.cpg-cal-head {
-  display: flex; align-items: center; justify-content: space-between; gap: 8px;
-  padding: 6px 8px;
-  background: var(--color-ghost-gray);
-  border-bottom: 1px solid var(--color-subtle-ash);
-  font-size: 13px;
+/* 저장 중 알림 — 확정을 누르면 바로 뜨고, 저장이 끝나면 닫힌다. */
+.cpg-saving-box {
+  width: min(320px, calc(100vw - 32px));
+  display: flex; flex-direction: column; align-items: center; gap: 10px;
+  text-align: center;
+  padding: 24px 20px;
 }
-.cpg-cal-dow, .cpg-cal-grid {
-  display: grid; grid-template-columns: repeat(7, 1fr);
+.cpg-saving-box strong { font-size: 15px; }
+.cpg-saving-box .erp-muted { font-size: 12px; font-family: var(--font-geist-mono); }
+.cpg-spinner {
+  width: 34px; height: 34px;
+  border: 3px solid var(--color-subtle-ash);
+  border-top-color: var(--color-deep-black);
+  border-radius: 50%;
+  animation: cpg-spin 720ms linear infinite;
 }
-.cpg-cal-dow {
-  padding: 4px 6px 2px;
-  font-size: 11px; color: var(--color-midtone-gray); text-align: center;
+@keyframes cpg-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) {
+  .cpg-spinner { animation-duration: 2s; }
 }
-.cpg-cal-dow > span:first-child { color: var(--color-callout-red); }
-.cpg-cal-grid { gap: 2px; padding: 6px; }
-.cpg-cal-cell {
-  border: 1px solid transparent; background: none; cursor: pointer;
-  font-family: var(--font-geist-mono);
-  font-size: 13px; line-height: 1;
-  padding: 7px 0; border-radius: 6px;
-  color: var(--color-rich-black);
-}
-.cpg-cal-cell.is-blank { cursor: default; }
-.cpg-cal-cell.is-sun { color: var(--color-callout-red); }
-.cpg-cal-cell.is-sat { color: #1a56c2; }
-.cpg-cal-cell:not(.is-blank):hover { background: var(--color-ghost-gray); }
-.cpg-cal-cell.is-today { border-color: var(--color-subtle-ash); font-weight: 700; }
-.cpg-cal-cell.is-picked {
-  background: var(--color-rich-black); border-color: var(--color-rich-black);
-  color: var(--color-canvas-white); font-weight: 700;
-}
-
-.cpg-cfm-pick { margin: 0; font-size: 13px; font-weight: 600; }
-.cpg-cfm-list { border: 1px solid var(--color-subtle-ash); border-radius: 8px; max-height: 140px; overflow-y: auto; }
-.cpg-cfm-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
-.cpg-cfm-row + .cpg-cfm-row { border-top: 1px solid var(--color-ghost-gray); }
-.cpg-cfm-cname { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.cpg-cfm-cmeta { flex: 0 0 auto; font-family: var(--font-geist-mono); font-size: 11px; color: var(--color-midtone-gray); }
-.cpg-cfm-note { margin: 0; font-size: 12px; }
-.cpg-cfm-act { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
-.cpg-cfm-act > .erp-muted { flex: 1 1 auto; min-width: 0; font-size: 12px; }
 
 /* 임시 저장 / 불러오기 대화상자 */
 .cpg-draft-box { width: min(520px, calc(100vw - 32px)); }