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>

app/modules/cafe24/templates/cafe24/products.html

@@ -378,8 +378,9 @@
     var reloadBtn = pane.querySelector("[data-reload]");
     if (reloadBtn) {
       reloadBtn.addEventListener("click", function () {
-        if (!confirmLeave()) return;
+        confirmLeave().then(function (ok) {
-        select(reloadBtn.dataset.reload, false);
+          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; }
+        // 확인창이 비동기라 일단 제출을 멈추고, 확인을 받으면 다시 보낸다.
-        // 예약 등록으로 화면을 떠나므로 편집 중 경고를 끈다.
+        // (required 검사는 이미 통과한 뒤라 form.submit() 으로 보내도 안전하다)
-        dirty = false;
+        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;
+          window.erpConfirm(msg).then(function (ok) { if (ok) 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.alert("상태 변경에 실패했습니다: " + err.message);
-            })
-            .then(function () { busy(false); });
         });
       });
+
+      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; }
+        e.preventDefault();
-        dirty = false;
+        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;
+      confirmLeave().then(function (ok) {
-      document.querySelectorAll("#cf24-list tr.is-active").forEach(function (el) {
+        if (!ok) return;
-        el.classList.remove("is-active");
+        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;
+      });
     });
   });
 

app/modules/cafe24/templates/cafe24/schedules.html

@@ -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 %}

app/modules/cafe24/templates/cafe24/system.html

@@ -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 %}

app/static/erp-dialog.css

@@ -0,0 +1,98 @@
+/* ════════════════════════════════════════════════════
+   ERP 공용 확인/경고 창
+   브라우저 기본 confirm()/alert() 은 제목에 도메인이 찍히고 위치·모양을 바꿀 수
+   없다. 화면 정중앙에 같은 모양으로 띄우기 위해 직접 그린다(erp-dialog.js).
+   ════════════════════════════════════════════════════ */
+
+.erp-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;      /* 화면 정중앙 */
+  justify-content: center;
+  padding: var(--sp-16, 16px);
+  background: rgba(10, 10, 10, 0.45);
+  font-family: var(--font-geist, system-ui, sans-serif);
+  animation: erp-dialog-fade 0.12s ease-out;
+}
+
+.erp-dialog {
+  width: 100%;
+  max-width: 420px;
+  background: var(--color-canvas-white, #fff);
+  border-radius: var(--r-card, 14px);
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
+  overflow: hidden;
+  text-align: center;       /* 제목·본문·버튼 모두 가운데 정렬 */
+  animation: erp-dialog-pop 0.12s ease-out;
+}
+
+.erp-dialog-title {
+  margin: 0;
+  padding: var(--sp-12, 12px) var(--sp-20, 20px);
+  border-bottom: 1px solid var(--color-subtle-ash, #e5e5e5);
+  background: var(--color-ghost-gray, #f2f2f2);
+  font-size: var(--text-body, 14px);
+  font-weight: 600;
+  letter-spacing: var(--tracking-heading, -0.45px);
+  color: var(--color-rich-black, #0a0a0a);
+}
+
+/* 아이콘은 글 왼쪽에 고정하고, 글 묶음만 가운데 정렬한다. */
+.erp-dialog-body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sp-12, 12px);
+  padding: var(--sp-24, 24px) var(--sp-20, 20px);
+}
+
+.erp-dialog-icon {
+  flex: 0 0 auto;
+  line-height: 0;
+  color: var(--color-callout-red, #c22b10);
+}
+
+/* 확인(질문)용은 붉은 경고색 대신 차분한 검정으로 */
+.erp-dialog-ask .erp-dialog-icon {
+  color: var(--color-rich-black, #0a0a0a);
+}
+
+.erp-dialog-message {
+  margin: 0;
+  font-size: var(--text-body, 14px);
+  line-height: var(--leading-body, 1.43);
+  color: var(--color-rich-black, #0a0a0a);
+  /* 메시지의 줄바꿈(\n)을 그대로 살린다 */
+  white-space: pre-line;
+  word-break: break-word;
+}
+
+.erp-dialog-actions {
+  display: flex;
+  justify-content: center;
+  gap: var(--sp-8, 8px);
+  padding: 0 var(--sp-20, 20px) var(--sp-20, 20px);
+}
+
+.erp-dialog-actions .erp-btn {
+  min-width: 88px;
+  padding: 9px 18px;
+  font-size: var(--text-body, 14px);
+}
+
+@keyframes erp-dialog-fade {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes erp-dialog-pop {
+  from { opacity: 0; transform: translateY(6px) scale(0.98); }
+  to   { opacity: 1; transform: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .erp-dialog-backdrop,
+  .erp-dialog { animation: none; }
+}

app/static/erp-dialog.js

@@ -0,0 +1,156 @@
+/* ════════════════════════════════════════════════════
+   ERP 공용 확인/경고 창 — window.confirm()/alert() 대체
+   ────────────────────────────────────────────────────
+   브라우저 기본 창은 제목에 도메인("dbx.no1king.freeddns.org 내용:")이 찍히고
+   위치·정렬·아이콘을 바꿀 수 없다. 그래서 같은 역할의 창을 직접 그린다.
+
+   쓰는 법 (기본 창과 달리 **비동기**다 — Promise 를 돌려준다):
+       erpConfirm("지울까요?").then(function (ok) { if (ok) ... });
+       erpAlert("실패했습니다.").then(...)
+
+   HTML 만으로 쓰려면 form 에 data-erp-confirm 을 달면 된다. 제출을 가로채
+   확인을 받은 뒤 통과시킨다(가로챈 제출은 form.submit() 으로 다시 보내므로
+   이 스크립트의 submit 리스너를 다시 타지 않는다).
+       <form ... data-erp-confirm="정말 지울까요?">
+   ════════════════════════════════════════════════════ */
+(function () {
+  "use strict";
+
+  var TITLE = "No.1 King ERP 프로그램";
+
+  // 경고 삼각형. 외부 아이콘 라이브러리를 쓰지 않는다(자체 호스팅 원칙).
+  var ICON =
+    '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" aria-hidden="true">' +
+    '<path d="M12 3.2 1.8 20.4h20.4L12 3.2Z" stroke="currentColor" stroke-width="1.6"' +
+    ' stroke-linejoin="round"/>' +
+    '<path d="M12 9.4v4.8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>' +
+    '<circle cx="12" cy="17.1" r="1.05" fill="currentColor"/>' +
+    "</svg>";
+
+  function build(message, options) {
+    var backdrop = document.createElement("div");
+    backdrop.className = "erp-dialog-backdrop";
+
+    var box = document.createElement("div");
+    box.className = "erp-dialog" + (options.ask ? " erp-dialog-ask" : "");
+    box.setAttribute("role", "alertdialog");
+    box.setAttribute("aria-modal", "true");
+    box.setAttribute("aria-label", TITLE);
+
+    var title = document.createElement("h2");
+    title.className = "erp-dialog-title";
+    title.textContent = TITLE;
+
+    var body = document.createElement("div");
+    body.className = "erp-dialog-body";
+
+    var icon = document.createElement("span");
+    icon.className = "erp-dialog-icon";
+    icon.innerHTML = ICON;
+
+    var text = document.createElement("p");
+    text.className = "erp-dialog-message";
+    // 메시지는 반드시 textContent 로 넣는다 — 서버/사용자 문자열이 들어와도
+    // HTML 로 해석되지 않게.
+    text.textContent = String(message == null ? "" : message);
+
+    var actions = document.createElement("div");
+    actions.className = "erp-dialog-actions";
+
+    var cancel = null;
+    if (options.ask) {
+      cancel = document.createElement("button");
+      cancel.type = "button";
+      cancel.className = "erp-btn erp-btn-outline";
+      cancel.textContent = options.cancelText || "취소";
+      actions.appendChild(cancel);
+    }
+
+    var ok = document.createElement("button");
+    ok.type = "button";
+    ok.className = "erp-btn erp-btn-primary";
+    ok.textContent = options.okText || "확인";
+    actions.appendChild(ok);
+
+    body.appendChild(icon);
+    body.appendChild(text);
+    box.appendChild(title);
+    box.appendChild(body);
+    box.appendChild(actions);
+    backdrop.appendChild(box);
+
+    return { backdrop: backdrop, box: box, ok: ok, cancel: cancel };
+  }
+
+  function open(message, options) {
+    return new Promise(function (resolve) {
+      var el = build(message, options);
+      var previous = document.activeElement;
+      var closed = false;
+
+      function close(result) {
+        if (closed) return;
+        closed = true;
+        document.removeEventListener("keydown", onKey, true);
+        el.backdrop.remove();
+        if (previous && typeof previous.focus === "function") previous.focus();
+        resolve(result);
+      }
+
+      function onKey(e) {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          close(false);          // 확인창의 Esc = 취소, 알림창의 Esc = 닫기
+        } else if (e.key === "Enter") {
+          e.preventDefault();
+          close(true);
+        } else if (e.key === "Tab") {
+          // 포커스가 창 밖으로 나가지 않게 두 버튼 사이에서만 돈다.
+          var focusable = el.cancel ? [el.cancel, el.ok] : [el.ok];
+          var index = focusable.indexOf(document.activeElement);
+          e.preventDefault();
+          var next = e.shiftKey ? index - 1 : index + 1;
+          if (next < 0) next = focusable.length - 1;
+          if (next >= focusable.length) next = 0;
+          focusable[next].focus();
+        }
+      }
+
+      el.ok.addEventListener("click", function () { close(true); });
+      if (el.cancel) el.cancel.addEventListener("click", function () { close(false); });
+      // 바깥을 누르면 취소(= 안전한 쪽). 창 안쪽 클릭은 그대로 둔다.
+      el.backdrop.addEventListener("mousedown", function (e) {
+        if (e.target === el.backdrop) close(false);
+      });
+      document.addEventListener("keydown", onKey, true);
+
+      document.body.appendChild(el.backdrop);
+      el.ok.focus();
+    });
+  }
+
+  window.erpConfirm = function (message, options) {
+    var opts = options || {};
+    opts.ask = true;
+    return open(message, opts);
+  };
+
+  window.erpAlert = function (message, options) {
+    var opts = options || {};
+    opts.ask = false;
+    return open(message, opts).then(function () { return undefined; });
+  };
+
+  // data-erp-confirm 이 달린 폼은 제출 전에 확인을 받는다.
+  document.addEventListener("submit", function (e) {
+    var form = e.target;
+    if (!form || !form.dataset || !form.dataset.erpConfirm) return;
+    if (form.dataset.erpConfirmed === "1") return;   // 확인을 마치고 다시 보낸 것
+    e.preventDefault();
+    window.erpConfirm(form.dataset.erpConfirm).then(function (ok) {
+      if (!ok) return;
+      form.dataset.erpConfirmed = "1";
+      form.submit();                                  // submit 이벤트를 다시 타지 않는다
+    });
+  });
+})();

app/templates/erp_base.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="/static/erp.css?v=20260615b" />
     <link rel="stylesheet" href="/static/erp-shell.css?v=20260615b" />
     <link rel="stylesheet" href="/static/erp-attach-viewer.css" />
+    <link rel="stylesheet" href="/static/erp-dialog.css?v=20260819a" />
     {% block head_extra %}{% endblock %}
   </head>
   <body class="erp-body erp-app-body">
@@ -161,6 +162,9 @@
       })();
     </script>
 
+    {# 공용 확인/경고 창. defer 를 쓰지 않는다 — 아래 {% block scripts %} 의
+       인라인 스크립트가 곧바로 erpConfirm/erpAlert 을 쓸 수 있어야 한다. #}
+    <script src="/static/erp-dialog.js?v=20260819a"></script>
     <script src="/static/erp-attach-viewer.js" defer></script>
     {% block scripts %}{% endblock %}
   </body>