From 74e33efa5531524d4bb8987ad1ee556f25a358a7 Mon Sep 17 00:00:00 2001
From: king <heoseungpil@gmail.com>
Date: Mon, 31 Aug 2026 12:12:18 +0900
Subject: [PATCH] =?UTF-8?q?feat(cupang):=20=EC=84=BC=ED=84=B0=20=EC=95=8C?=
 =?UTF-8?q?=EB=A6=BC=EC=9D=84=20=EA=B0=80=EC=9A=B4=EB=8D=B0=20=ED=8C=9D?=
 =?UTF-8?q?=EC=97=85=EC=9C=BC=EB=A1=9C,=20=EA=B7=B8=EB=A3=B9=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94/=EB=AA=A9=EB=A1=9D=20=EA=B5=AC=EB=B6=84=20=EA=B0=95?=
 =?UTF-8?q?=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

브라우저 기본 alert/confirm 은 상단에 붙고 URL 이 그대로 보여 어수선했다.
기존 .cpg-modal 스타일을 재사용해 화면 가운데 팝업으로 바꾸고, 삭제 확인도
같은 팝업(빨간 확인 버튼)으로 통일했다. ESC·배경 클릭으로 닫힘.

목록은 헤더와 항목이 같은 평면에 있어 구분이 약했다. 그룹을 테두리 있는
패널로 만들고 헤더에 회색 바 + 카운트 배지 + 접기 캐럿을 뒀다. 센터명은
고정폭 글꼴로 정렬감을 주고, 비활성은 취소선으로 표시.
---
 .../cupang/templates/cupang/box_calc.html     |   2 +-
 .../cupang/templates/cupang/box_rules.html    |   2 +-
 .../cupang/templates/cupang/centers.html      | 141 ++++++++++++++----
 .../cupang/templates/cupang/detail.html       |   2 +-
 app/modules/cupang/templates/cupang/form.html |   2 +-
 .../cupang/templates/cupang/index.html        |   2 +-
 .../cupang/templates/cupang/products.html     |   2 +-
 app/static/cupang.css                         |  99 ++++++++----
 8 files changed, 188 insertions(+), 64 deletions(-)

diff --git a/app/modules/cupang/templates/cupang/box_calc.html b/app/modules/cupang/templates/cupang/box_calc.html
index e82bbd6..c28f5f8 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=20260831c" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260831d" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
diff --git a/app/modules/cupang/templates/cupang/box_rules.html b/app/modules/cupang/templates/cupang/box_rules.html
index e1b6b7b..8a59f6b 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=20260831c" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260831d" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
diff --git a/app/modules/cupang/templates/cupang/centers.html b/app/modules/cupang/templates/cupang/centers.html
index 3d668ba..b84dace 100644
--- a/app/modules/cupang/templates/cupang/centers.html
+++ b/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=20260831c" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260831d" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
@@ -27,32 +27,33 @@
       <span class="erp-muted">지역별로 묶어 표시. 이름 변경은 지원하지 않음 — 삭제 후 새로 등록.</span>
     </div>
 
-    <!-- 목록: 지역 그룹 카드, 위→아래로 읽고 열로 흐름 -->
+    <!-- 목록: 지역 그룹 패널, 위→아래로 읽고 열로 흐름 -->
     <div class="cpg-center-cols" id="cpgCenterGrid">
       {% for g in center_groups %}
-      <div class="cpg-center-group" data-group="{{ g.name|lower }}">
-        <div class="cpg-center-gtitle">
+      <section class="cpg-center-group" data-group="{{ g.name|lower }}">
+        <button type="button" class="cpg-center-gtitle" aria-expanded="true">
+          <span class="cpg-center-caret" aria-hidden="true"></span>
           <span class="cpg-center-gname">{{ g.name }}</span>
           <span class="cpg-center-gcount">{{ g.count }}</span>
+        </button>
+        <div class="cpg-center-glist">
+          {% for c in g["items"] %}
+          <div class="cpg-center-row {% if not c.active %}is-inactive{% endif %}" data-name="{{ c.name|lower }}">
+            <span class="cpg-center-dot" title="{% if c.active %}활성{% else %}비활성{% endif %}"></span>
+            <span class="cpg-center-name">{{ c.name }}</span>
+            <span class="cpg-center-acts">
+              <form method="post" action="/cupang/centers/{{ c.id }}/edit" class="cpg-inline-form">
+                <input type="hidden" name="active" value="{% if c.active %}0{% else %}1{% endif %}" />
+                <button type="submit" class="cpg-icon-btn"
+                        title="{% if c.active %}비활성으로 전환{% else %}활성으로 전환{% endif %}">{% if c.active %}비활성{% else %}활성{% endif %}</button>
+              </form>
+              <button type="button" class="cpg-icon-btn is-danger" title="삭제"
+                      data-del-url="/cupang/centers/{{ c.id }}/delete" data-del-name="{{ c.name }}">삭제</button>
+            </span>
+          </div>
+          {% endfor %}
         </div>
-        {% for c in g["items"] %}
-        <div class="cpg-center-row {% if not c.active %}is-inactive{% endif %}" data-name="{{ c.name|lower }}">
-          <span class="cpg-center-dot" title="{% if c.active %}활성{% else %}비활성{% endif %}"></span>
-          <span class="cpg-center-name">{{ c.name }}</span>
-          <span class="cpg-center-acts">
-            <form method="post" action="/cupang/centers/{{ c.id }}/edit" class="cpg-inline-form">
-              <input type="hidden" name="active" value="{% if c.active %}0{% else %}1{% endif %}" />
-              <button type="submit" class="cpg-icon-btn"
-                      title="{% if c.active %}비활성으로 전환{% else %}활성으로 전환{% endif %}">{% if c.active %}비활성{% else %}활성{% endif %}</button>
-            </form>
-            <form method="post" action="/cupang/centers/{{ c.id }}/delete" class="cpg-inline-form"
-                  onsubmit="return confirm('{{ c.name }} 센터를 삭제할까요?');">
-              <button type="submit" class="cpg-icon-btn is-danger" title="삭제">삭제</button>
-            </form>
-          </span>
-        </div>
-        {% endfor %}
-      </div>
+      </section>
       {% endfor %}
     </div>
 
@@ -61,20 +62,103 @@
   </div>
 </section>
 
+<!-- 화면 가운데 알림/확인 팝업 -->
+<div class="cpg-modal" id="cpgCenterDlg" hidden>
+  <div class="cpg-modal-back" data-dlg-close></div>
+  <div class="cpg-modal-box cpg-center-dlg" role="dialog" aria-modal="true" aria-labelledby="cpgCenterDlgTitle">
+    <h3 id="cpgCenterDlgTitle">알림</h3>
+    <p class="cpg-center-dlgmsg" id="cpgCenterDlgMsg"></p>
+    <div class="cpg-dlg-actions cpg-center-dlgact">
+      <button type="button" class="erp-btn erp-btn-outline" id="cpgCenterDlgCancel" data-dlg-close hidden>취소</button>
+      <button type="button" class="erp-btn erp-btn-primary" id="cpgCenterDlgOk">확인</button>
+    </div>
+  </div>
+</div>
+
+<form method="post" id="cpgCenterDelForm" hidden></form>
+
 <script>
 (function () {
-  // 추가 결과 알림 (중복 등록 방지)
+  // ── 가운데 팝업 (alert/confirm 대체) ──
+  var dlg = document.getElementById('cpgCenterDlg');
+  var dlgTitle = document.getElementById('cpgCenterDlgTitle');
+  var dlgMsg = document.getElementById('cpgCenterDlgMsg');
+  var dlgOk = document.getElementById('cpgCenterDlgOk');
+  var dlgCancel = document.getElementById('cpgCenterDlgCancel');
+  var onConfirm = null;
+  var lastFocus = null;
+
+  function closeDlg() {
+    dlg.hidden = true;
+    onConfirm = null;
+    if (lastFocus && lastFocus.focus) lastFocus.focus();
+  }
+
+  function openDlg(opts) {
+    lastFocus = document.activeElement;
+    dlgTitle.textContent = opts.title || '알림';
+    dlgMsg.textContent = opts.message || '';
+    onConfirm = opts.onConfirm || null;
+    dlgCancel.hidden = !opts.onConfirm;
+    dlgOk.textContent = opts.okText || '확인';
+    dlgOk.classList.toggle('erp-btn-danger', !!opts.danger);
+    dlgOk.classList.toggle('erp-btn-primary', !opts.danger);
+    dlg.hidden = false;
+    dlgOk.focus();
+  }
+
+  dlgOk.addEventListener('click', function () {
+    var fn = onConfirm;
+    closeDlg();
+    if (fn) fn();
+  });
+  Array.prototype.forEach.call(dlg.querySelectorAll('[data-dlg-close]'), function (el) {
+    el.addEventListener('click', closeDlg);
+  });
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape' && !dlg.hidden) closeDlg();
+  });
+
+  // ── 추가 결과 알림 (중복 등록 차단) ──
   var flash = {{ flash|tojson }};
   var fname = {{ flash_name|tojson }};
   if (flash === 'dup') {
-    alert('"' + fname + '" 센터는 이미 등록되어 있습니다.');
+    openDlg({ title: '이미 등록된 센터', message: '"' + fname + '" 센터는 이미 목록에 있습니다.' });
   } else if (flash === 'dup_inactive') {
-    alert('"' + fname + '" 센터는 이미 등록되어 있습니다. (현재 비활성 상태 — 목록에서 활성으로 전환하세요.)');
-  }
-  if (flash) {
-    history.replaceState(null, '', '/cupang/centers');
+    openDlg({
+      title: '이미 등록된 센터',
+      message: '"' + fname + '" 센터는 이미 목록에 있습니다. 지금은 비활성 상태이니 목록에서 [활성] 을 눌러 사용하세요.'
+    });
   }
+  if (flash) history.replaceState(null, '', '/cupang/centers');
 
+  // ── 삭제 확인 ──
+  var delForm = document.getElementById('cpgCenterDelForm');
+  document.addEventListener('click', function (e) {
+    var btn = e.target.closest('[data-del-url]');
+    if (!btn) return;
+    openDlg({
+      title: '센터 삭제',
+      message: '"' + btn.dataset.delName + '" 센터를 삭제할까요?',
+      okText: '삭제',
+      danger: true,
+      onConfirm: function () {
+        delForm.action = btn.dataset.delUrl;
+        delForm.submit();
+      }
+    });
+  });
+
+  // ── 그룹 접기 ──
+  document.addEventListener('click', function (e) {
+    var head = e.target.closest('.cpg-center-gtitle');
+    if (!head) return;
+    var group = head.closest('.cpg-center-group');
+    var collapsed = group.classList.toggle('is-collapsed');
+    head.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
+  });
+
+  // ── 검색 ──
   var box = document.getElementById('cpgCenterSearch');
   var grid = document.getElementById('cpgCenterGrid');
   var count = document.getElementById('cpgCenterCount');
@@ -92,6 +176,7 @@
         if (hit) shown += 1;
       });
       g.style.display = shown ? '' : 'none';
+      if (q && shown) g.classList.remove('is-collapsed');
       n += shown;
     });
     if (count) count.textContent = '(' + n + ')';
diff --git a/app/modules/cupang/templates/cupang/detail.html b/app/modules/cupang/templates/cupang/detail.html
index d2948ee..8706626 100644
--- a/app/modules/cupang/templates/cupang/detail.html
+++ b/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=20260831c" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260831d" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
diff --git a/app/modules/cupang/templates/cupang/form.html b/app/modules/cupang/templates/cupang/form.html
index 5b92acf..90607b1 100644
--- a/app/modules/cupang/templates/cupang/form.html
+++ b/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=20260831c" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260831d" />{% 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 8ce1002..5e60495 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=20260831c" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260831d" />{% 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 b781cce..4c9b40d 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=20260831c" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260831d" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
diff --git a/app/static/cupang.css b/app/static/cupang.css
index 834a280..15c7d08 100644
--- a/app/static/cupang.css
+++ b/app/static/cupang.css
@@ -169,7 +169,7 @@
 .cpg-inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
 .cpg-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
 
-/* ── 입고센터 관리 (상단: 추가·검색 / 아래: 지역 그룹 목록) ── */
+/* ── 입고센터 관리 (상단: 추가·검색 / 아래: 지역 그룹 패널) ── */
 .cpg-center-card { padding: 16px; }
 
 .cpg-center-bar {
@@ -184,46 +184,80 @@
 
 /* 멀티컬럼: 한 열을 위→아래로 읽고, 다 차면 다음 열로 */
 .cpg-center-cols {
-  columns: 4 220px;
-  column-gap: 20px;
-}
-.cpg-center-group {
-  break-inside: avoid; page-break-inside: avoid;
-  margin: 0 0 16px;
-}
-.cpg-center-gtitle {
-  display: flex; align-items: center; gap: 6px;
-  padding: 0 4px 4px;
-  border-bottom: 2px solid var(--color-rich-black);
-  margin-bottom: 4px;
-}
-.cpg-center-gname { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
-.cpg-center-gcount {
-  font-size: 11px; font-weight: 600; line-height: 1;
-  padding: 2px 6px; border-radius: 999px;
-  background: var(--color-subtle-ash); color: var(--color-midtone-gray);
+  columns: 4 230px;
+  column-gap: 16px;
 }
 
+/* 그룹 = 헤더 바 + 목록 패널 */
+.cpg-center-group {
+  break-inside: avoid; page-break-inside: avoid;
+  margin: 0 0 12px;
+  border: 1px solid var(--color-subtle-ash);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--color-canvas-white);
+}
+
+.cpg-center-gtitle {
+  display: flex; align-items: center; gap: 6px; width: 100%;
+  padding: 7px 10px;
+  border: 0; border-bottom: 1px solid var(--color-subtle-ash);
+  background: var(--color-ghost-gray);
+  cursor: pointer; text-align: left;
+  font-family: inherit;
+}
+.cpg-center-gtitle:hover { background: var(--color-subtle-ash); }
+.cpg-center-gname {
+  flex: 1 1 auto; min-width: 0;
+  font-size: 12px; font-weight: 700; letter-spacing: .04em;
+  color: var(--color-rich-black);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.cpg-center-gcount {
+  flex: 0 0 auto;
+  font-family: var(--font-geist-mono);
+  font-size: 11px; font-weight: 600; line-height: 1;
+  padding: 3px 6px; border-radius: 4px;
+  background: var(--color-canvas-white);
+  border: 1px solid var(--color-subtle-ash);
+  color: var(--color-midtone-gray);
+}
+/* 접기 캐럿 */
+.cpg-center-caret {
+  flex: 0 0 auto; width: 0; height: 0;
+  border-left: 4px solid var(--color-midtone-gray);
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  transform: rotate(90deg);
+  transition: transform .12s ease;
+}
+.cpg-center-group.is-collapsed .cpg-center-caret { transform: rotate(0deg); }
+.cpg-center-group.is-collapsed .cpg-center-glist { display: none; }
+.cpg-center-group.is-collapsed .cpg-center-gtitle { border-bottom: 0; }
+
+.cpg-center-glist { padding: 2px 0; }
+
 .cpg-center-row {
-  display: flex; align-items: center; gap: 7px;
-  padding: 5px 4px;
-  border-bottom: 1px solid var(--color-subtle-ash);
+  display: flex; align-items: center; gap: 8px;
+  padding: 5px 10px;
   min-width: 0;
 }
-.cpg-center-row:last-child { border-bottom: none; }
+.cpg-center-row + .cpg-center-row { border-top: 1px solid var(--color-ghost-gray); }
+.cpg-center-row:hover { background: var(--color-ghost-gray); }
 .cpg-center-dot {
-  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
-  background: var(--color-success-green, #10c22b);
+  flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
+  background: var(--color-success-green);
 }
-.cpg-center-row.is-inactive { opacity: .5; }
+.cpg-center-row.is-inactive .cpg-center-name { color: var(--color-midtone-gray); text-decoration: line-through; }
 .cpg-center-row.is-inactive .cpg-center-dot { background: var(--color-subtle-ash); }
 .cpg-center-name {
   flex: 1 1 auto; min-width: 0;
-  font-size: 14px; font-weight: 500;
+  font-family: var(--font-geist-mono);
+  font-size: 13px;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 
-/* 행 액션: 평소엔 흐리게, hover/focus 시 또렷하게 */
+/* 행 액션: hover/focus 시에만 노출 */
 .cpg-center-acts {
   display: inline-flex; gap: 2px; flex: 0 0 auto;
   opacity: 0; transition: opacity .12s ease;
@@ -235,14 +269,19 @@
 }
 .cpg-icon-btn {
   border: 0; background: none; cursor: pointer;
-  font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: 6px;
+  font-family: inherit;
+  font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: 4px;
   color: var(--color-midtone-gray);
 }
 .cpg-icon-btn:hover { background: var(--color-subtle-ash); color: var(--color-rich-black); }
-.cpg-icon-btn.is-danger:hover { background: var(--color-ghost-gray); color: var(--color-callout-red); }
+.cpg-icon-btn.is-danger:hover { background: var(--color-subtle-ash); color: var(--color-callout-red); }
 
 .cpg-center-empty { margin: 8px 0 0; }
 
+/* 센터 관리 팝업 */
+.cpg-center-dlgmsg { margin: 0; font-size: 14px; line-height: 1.5; word-break: keep-all; }
+.cpg-center-dlgact { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }
+
 .cpg-btn-sm { padding: 3px 8px; font-size: 12px; flex: 0 0 auto; }
 
 /* ── 라인 테이블 ── */