feat(erp): 공용 확인/경고 창으로 브라우저 기본 confirm 대체

브라우저 기본 confirm()/alert() 은 제목에 도메인이 찍히고("dbx.no1king. freeddns.org 내용:") 위치·정렬·아이콘을 바꿀 수 없다. 같은 역할의 창을 직접 그려 화면 정중앙에 띄운다. - app/static/erp-dialog.{js,css} 신규. 제목은 "No.1 King ERP 프로그램", 내용은 가운데 정렬, 왼쪽에 경고 삼각형 아이콘(인라인 SVG - 외부 아이콘 라이브러리를 쓰지 않는다). - erpConfirm()/erpAlert() 은 Promise 를 돌려준다. 기본 confirm() 과 달리 동기 반환이 불가능하므로 호출부를 then() 으로 바꿨다. 폼 제출은 일단 막고 확인 후 form.submit() 으로 다시 보낸다(required 검사는 그 전에 이미 통과한다). - HTML 만으로 쓰려면 form 에 data-erp-confirm 을 달면 된다. 카페24 시스템· 예약 화면의 인라인 onsubmit=confirm(...) 을 이 방식으로 옮겼다. - 메시지는 textContent 로 넣어 서버·사용자 문자열이 HTML 로 해석되지 않는다. - Esc 취소 / Enter 확인 / Tab 은 창 안에서만 돌고, 닫을 때 원래 포커스로 돌아간다. 바깥을 누르면 취소(안전한 쪽). - erp_base.html 에서 전역 로드. defer 를 쓰지 않아 각 화면의 인라인 스크립트가 곧바로 쓸 수 있다. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-19 22:33:42 +09:00
parent a58fa7b83b
commit 8cfe963526
6 changed files with 328 additions and 43 deletions
@@ -378,8 +378,9 @@
    var reloadBtn = pane.querySelector("[data-reload]");
    if (reloadBtn) {
      reloadBtn.addEventListener("click", function () {
-        if (!confirmLeave()) return;
-        select(reloadBtn.dataset.reload, false);
+        confirmLeave().then(function (ok) {
+          if (ok) select(reloadBtn.dataset.reload, false);
+        });
      });
    }

@@ -456,9 +457,14 @@
        // date/time 이 필수(required)라 브라우저가 빈 값이면 여기까지 오지 않는다.
        if (atHolder && dateEl && timeEl) atHolder.value = dateEl.value + "T" + timeEl.value;

-        if (!window.confirm(schedForm.dataset.confirm)) { e.preventDefault(); return; }
-        // 예약 등록으로 화면을 떠나므로 편집 중 경고를 끈다.
-        dirty = false;
+        // 확인창이 비동기라 일단 제출을 멈추고, 확인을 받으면 다시 보낸다.
+        // (required 검사는 이미 통과한 뒤라 form.submit() 으로 보내도 안전하다)
+        e.preventDefault();
+        window.erpConfirm(schedForm.dataset.confirm).then(function (ok) {
+          if (!ok) return;
+          dirty = false;   // 예약 등록으로 화면을 떠나므로 편집 중 경고를 끈다.
+          schedForm.submit();
+        });
      });
    }

@@ -502,10 +508,16 @@

      function save() {
        var name = input.value.trim();
-        if (!name) { window.alert("상품명을 입력하세요."); input.focus(); return; }
+        if (!name) {
+          window.erpAlert("상품명을 입력하세요.").then(function () { input.focus(); });
+          return;
+        }
        if (name === text.textContent) { open(false); return; }
-        if (!window.confirm("상품명을 「" + name + "」(으)로 바꿉니다.\n카페24 쇼핑몰에 바로 반영됩니다. 계속할까요?")) return;
+        window.erpConfirm("상품명을 「" + name + "」(으)로 바꿉니다.\n카페24 쇼핑몰에 바로 반영됩니다. 계속할까요?")
+          .then(function (ok) { if (ok) send(name); });
+      }

+      function send(name) {
        busy(true);
        fetch("/cafe24/products/" + no + "/name", {
          method: "POST",
@@ -529,7 +541,7 @@
            open(false);
          })
          .catch(function (err) {
-            window.alert("상품명 변경에 실패했습니다: " + err.message);
+            window.erpAlert("상품명 변경에 실패했습니다: " + err.message);
          })
          .then(function () { busy(false); });
      }
@@ -592,45 +604,54 @@
          var want = btn.dataset.statusOn !== "1";
          var msg = label.word + " 상태를 「" + (want ? label.on : label.off) + "」(으)로 바꿉니다.\n" +
                    "카페24 쇼핑몰에 바로 반영됩니다. 계속할까요?";
-          if (!window.confirm(msg)) return;
-
-          busy(true);
-          fetch("/cafe24/products/" + no + "/status", {
-            method: "POST",
-            credentials: "same-origin",
-            cache: "no-store",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ field: field, value: want })
-          })
-            .then(function (res) {
-              return res.json().catch(function () { return {}; }).then(function (data) {
-                if (!res.ok) throw new Error(data.detail || "HTTP " + res.status);
-                return data;
-              });
-            })
-            .then(function (data) {
-              buttons.forEach(function (b) { paint(b, !!data[b.dataset.statusField]); });
-              paintRow(data);
-            })
-            .catch(function (err) {
-              window.alert("상태 변경에 실패했습니다: " + err.message);
-            })
-            .then(function () { busy(false); });
+          window.erpConfirm(msg).then(function (ok) { if (ok) send(field, want); });
        });
      });
+
+      function send(field, want) {
+        busy(true);
+        fetch("/cafe24/products/" + no + "/status", {
+          method: "POST",
+          credentials: "same-origin",
+          cache: "no-store",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ field: field, value: want })
+        })
+          .then(function (res) {
+            return res.json().catch(function () { return {}; }).then(function (data) {
+              if (!res.ok) throw new Error(data.detail || "HTTP " + res.status);
+              return data;
+            });
+          })
+          .then(function (data) {
+            buttons.forEach(function (b) { paint(b, !!data[b.dataset.statusField]); });
+            paintRow(data);
+          })
+          .catch(function (err) {
+            window.erpAlert("상태 변경에 실패했습니다: " + err.message);
+          })
+          .then(function () { busy(false); });
+      }
    })();

    var form = pane.querySelector(".cf24-editor-form");
    if (form) {
      form.addEventListener("submit", function (e) {
-        if (!window.confirm(form.dataset.confirm)) { e.preventDefault(); return; }
-        dirty = false;
+        e.preventDefault();
+        window.erpConfirm(form.dataset.confirm).then(function (ok) {
+          if (!ok) return;
+          dirty = false;
+          form.submit();
+        });
      });
    }
  };

+  // 공용 확인창(erp-dialog.js)은 비동기다 — 기본 confirm() 과 달리 Promise 를
+  // 돌려주므로 호출부는 모두 then() 안에서 이어간다.
  function confirmLeave() {
-    return !dirty || window.confirm("편집한 내용이 저장되지 않았습니다. 이동할까요?");
+    if (!dirty) return Promise.resolve(true);
+    return window.erpConfirm("편집한 내용이 저장되지 않았습니다. 이동할까요?");
  }

  // ── 목록 클릭 → 오른쪽만 교체 ──
@@ -663,12 +684,14 @@
  document.querySelectorAll("#cf24-list tbody tr.cf24-row").forEach(function (tr) {
    tr.addEventListener("click", function (e) {
      if (e.target.tagName === "A") e.preventDefault();
-      if (!confirmLeave()) return;
-      document.querySelectorAll("#cf24-list tr.is-active").forEach(function (el) {
-        el.classList.remove("is-active");
+      confirmLeave().then(function (ok) {
+        if (!ok) return;
+        document.querySelectorAll("#cf24-list tr.is-active").forEach(function (el) {
+          el.classList.remove("is-active");
+        });
+        tr.classList.add("is-active");
+        select(tr.dataset.no, true);
      });
-      tr.classList.add("is-active");
-      select(tr.dataset.no, true);
    });
  });

@@ -680,7 +703,11 @@
  var filterForm = document.getElementById("cf24-filter-form");
  filterForm.querySelectorAll('input[type="checkbox"]').forEach(function (cb) {
    cb.addEventListener("change", function () {
-      if (confirmLeave()) filterForm.submit();
+      confirmLeave().then(function (ok) {
+        // 확인창이 비동기라 체크는 이미 바뀌어 있다 — 취소하면 되돌린다.
+        if (ok) filterForm.submit();
+        else cb.checked = !cb.checked;
+      });
    });
  });

@@ -64,7 +64,7 @@
          <td class="cf24-nowrap">
            {% if r.editable %}
            <form method="post" action="/cafe24/schedules/{{ r.id }}/cancel" style="display:inline;"
-                  onsubmit="return confirm('예약 #{{ r.id }} 을 취소할까요?');">
+                  data-erp-confirm="예약 #{{ r.id }} 을 취소할까요?">
              <button type="submit" class="erp-btn erp-btn-outline">취소</button>
            </form>
            {% endif %}
@@ -64,7 +64,7 @@
    </a>
    {% if status.connected or status.needs_reauth %}
    <form method="post" action="/cafe24/system/oauth/disconnect" style="display:inline;"
-          onsubmit="return confirm('저장된 카페24 토큰을 삭제합니다. 계속할까요?\n(변경 이력·예약 데이터는 지워지지 않습니다)');">
+          data-erp-confirm="저장된 카페24 토큰을 삭제합니다. 계속할까요?&#10;(변경 이력·예약 데이터는 지워지지 않습니다)">
      <button type="submit" class="erp-btn erp-btn-outline">연결 해제</button>
    </form>
    {% endif %}