From 2e3ea610b7108243b40e30a7a84367bac1e10248 Mon Sep 17 00:00:00 2001
From: king <heoseungpil@gmail.com>
Date: Sat, 30 May 2026 06:03:02 +0900
Subject: [PATCH] =?UTF-8?q?ui(cupang):=20=EB=B0=95=EC=8A=A4=20=EC=9E=85?=
 =?UTF-8?q?=EC=88=98=EB=9F=89=202=EC=97=B4=20=EB=B0=B0=EC=B9=98=20+=20?=
 =?UTF-8?q?=EA=B3=A0=EC=A0=95=ED=8F=AD=20+=20=EC=9E=85=EC=88=98=EB=9F=89?=
 =?UTF-8?q?=20"=EA=B0=9C"=20=EB=8B=A8=EC=9C=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 추가/수정 480px(좌), 입수량 규칙 900px(우)
- 제품명/제품코드/박스이름 입력 140px, 박스당 입수량 60px + "개" 접미
- 캐시 버전 e

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../cupang/templates/cupang/box_rules.html    | 55 +++++++++++--------
 .../cupang/templates/cupang/centers.html      |  2 +-
 .../cupang/templates/cupang/detail.html       |  2 +-
 app/modules/cupang/templates/cupang/form.html |  4 +-
 .../cupang/templates/cupang/index.html        |  2 +-
 .../cupang/templates/cupang/products.html     |  2 +-
 app/static/cupang.css                         | 22 ++++++++
 app/templates/erp_base.html                   |  4 +-
 8 files changed, 61 insertions(+), 32 deletions(-)

diff --git a/app/modules/cupang/templates/cupang/box_rules.html b/app/modules/cupang/templates/cupang/box_rules.html
index 783efb5..66d1108 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=20260530d" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530e" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
@@ -9,15 +9,17 @@
     <a class="erp-btn erp-btn-primary" href="/cupang/">◀◀ 달력</a>
   </div>
 
-  <!-- 추가/수정 (product_code UNIQUE → upsert) -->
-  <div class="erp-card cpg-form-card">
+  <div class="cpg-brule-layout">
+
+  <!-- 왼쪽: 추가/수정 (product_code UNIQUE → upsert) -->
+  <div class="erp-card cpg-form-card cpg-brule-add">
     <div class="cpg-card-head">
       <h2>박스 입수량 추가 / 수정</h2>
-      <span class="erp-muted">같은 제품코드는 덮어씁니다. 쿠팡박스 1박스당 들어가는 수량.</span>
+      <span class="erp-muted">같은 제품코드는 덮어씁니다.</span>
     </div>
     <form method="post" action="/cupang/box-rules">
       <input type="hidden" name="product_name_snapshot" id="brule-name-snap" />
-      <div class="cpg-header-grid">
+      <div class="cpg-brule-fields">
         <label class="erp-field"><span>제품명 *</span>
           <select class="erp-select" id="brule-name" required>
             <option value="">— 제품명 선택 —</option>
@@ -26,13 +28,16 @@
             {% endfor %}
           </select></label>
         <label class="erp-field"><span>제품코드</span>
-          <input class="erp-input" type="text" name="product_code" id="brule-code" required placeholder="제품명 선택 시 자동" /></label>
+          <input class="erp-input" type="text" name="product_code" id="brule-code" required placeholder="자동" /></label>
         <label class="erp-field"><span>박스이름</span>
           <input class="erp-input" type="text" name="box_name" value="쿠팡박스" /></label>
         <label class="erp-field"><span>박스당 입수량 *</span>
-          <input class="erp-input" type="number" name="units_per_box" min="1" required /></label>
+          <span class="cpg-upb-wrap">
+            <input class="erp-input cpg-brule-upb" type="number" name="units_per_box" min="1" required />
+            <span class="cpg-upb-unit">개</span>
+          </span></label>
         <label class="erp-field cpg-full"><span>메모</span>
-          <input class="erp-input" type="text" name="memo" /></label>
+          <input class="erp-input cpg-brule-memo" type="text" name="memo" /></label>
       </div>
       <div class="erp-page-actions" style="margin-top:12px;">
         <button type="submit" class="erp-btn erp-btn-primary">저장</button>
@@ -41,24 +46,24 @@
     {% if not products %}
     <p class="erp-muted"><a href="/cupang/products">설정에서 제품명을 먼저 등록</a>하면 드롭다운에 표시됩니다.</p>
     {% endif %}
+
+    <script>
+      (function () {
+        var sel = document.getElementById("brule-name");
+        var code = document.getElementById("brule-code");
+        var snap = document.getElementById("brule-name-snap");
+        if (!sel) return;
+        sel.addEventListener("change", function () {
+          var opt = sel.options[sel.selectedIndex];
+          code.value = sel.value;
+          snap.value = opt ? (opt.getAttribute("data-name") || "") : "";
+        });
+      })();
+    </script>
   </div>
 
-  <script>
-    (function () {
-      var sel = document.getElementById("brule-name");
-      var code = document.getElementById("brule-code");
-      var snap = document.getElementById("brule-name-snap");
-      if (!sel) return;
-      sel.addEventListener("change", function () {
-        var opt = sel.options[sel.selectedIndex];
-        code.value = sel.value;
-        snap.value = opt ? (opt.getAttribute("data-name") || "") : "";
-      });
-    })();
-  </script>
-
-  <!-- 목록 -->
-  <div class="erp-card cpg-form-card">
+  <!-- 오른쪽: 목록 -->
+  <div class="erp-card cpg-form-card cpg-brule-list">
     <div class="cpg-card-head"><h2>입수량 규칙 ({{ box_rules|length }})</h2></div>
     <div class="erp-table-wrap">
       <table class="erp-table">
@@ -89,5 +94,7 @@
     </div>
   </div>
 
+  </div><!-- /cpg-brule-layout -->
+
 </section>
 {% endblock %}
diff --git a/app/modules/cupang/templates/cupang/centers.html b/app/modules/cupang/templates/cupang/centers.html
index bfd5c6c..1e02ee6 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=20260530d" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530e" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
diff --git a/app/modules/cupang/templates/cupang/detail.html b/app/modules/cupang/templates/cupang/detail.html
index c4afea1..ef160a0 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=20260530d" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530e" />{% 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 1a54dc4..fae0be9 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=20260530d" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530e" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
@@ -118,4 +118,4 @@
 </script>
 {% endblock %}
 
-{% block scripts %}<script src="/static/cupang.js?v=20260530d" defer></script>{% endblock %}
+{% block scripts %}<script src="/static/cupang.js?v=20260530e" defer></script>{% endblock %}
diff --git a/app/modules/cupang/templates/cupang/index.html b/app/modules/cupang/templates/cupang/index.html
index 4b125ae..3bd7faf 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=20260530d" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530e" />{% 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 a4c1aca..c4d55ac 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=20260530d" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530e" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
diff --git a/app/static/cupang.css b/app/static/cupang.css
index afb8aa2..eacf321 100644
--- a/app/static/cupang.css
+++ b/app/static/cupang.css
@@ -239,6 +239,28 @@
 .cpg-src-item.cpg-registered .cpg-src-code { color: #d4d4d4; }
 .cpg-src-item.cpg-registered:hover { background: #3a3a3a; }
 
+/* ── 박스 입수량 (좌: 추가/수정 480 / 우: 목록 900) ── */
+.cpg-brule-layout { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
+.cpg-brule-add { flex: 0 0 480px; width: 480px; min-width: 0; margin-bottom: 0; }
+.cpg-brule-list { flex: 0 0 900px; width: 900px; min-width: 0; margin-bottom: 0; }
+@media (max-width: 1420px) { .cpg-brule-list { flex-basis: auto; width: 100%; } }
+@media (max-width: 540px) { .cpg-brule-add { flex-basis: 100%; width: 100%; } }
+
+.cpg-brule-fields { display: flex; flex-wrap: wrap; gap: 12px 16px; }
+/* 제품명·제품코드·박스이름 140px 고정 (erp.css min-width:240 오버라이드) */
+.cpg .cpg-brule-fields .erp-field > .erp-input,
+.cpg .cpg-brule-fields .erp-field > .erp-select {
+  width: 140px; min-width: 140px; max-width: 140px; box-sizing: border-box;
+}
+/* 박스당 입수량 60px + "개" */
+.cpg-upb-wrap { display: inline-flex; align-items: center; gap: 4px; }
+.cpg .cpg-brule-fields .cpg-upb-wrap > .cpg-brule-upb {
+  width: 60px; min-width: 60px; max-width: 60px; box-sizing: border-box;
+}
+.cpg-upb-unit { font-size: 13px; color: var(--color-midtone-gray); }
+/* 메모는 넓게 */
+.cpg .cpg-brule-fields .cpg-brule-memo { width: 300px; min-width: 300px; max-width: 300px; }
+
 /* ── 상품 검색 드롭다운 ── */
 .cpg-search-pop {
   position: absolute; z-index: 50;
diff --git a/app/templates/erp_base.html b/app/templates/erp_base.html
index 1f3c17e..23f9c4c 100644
--- a/app/templates/erp_base.html
+++ b/app/templates/erp_base.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{{ page_title or "ERP" }} — DBX Corporation</title>
-    <link rel="stylesheet" href="/static/erp.css?v=20260530d" />
-    <link rel="stylesheet" href="/static/erp-shell.css?v=20260530d" />
+    <link rel="stylesheet" href="/static/erp.css?v=20260530e" />
+    <link rel="stylesheet" href="/static/erp-shell.css?v=20260530e" />
     <link rel="stylesheet" href="/static/erp-attach-viewer.css" />
     {% block head_extra %}{% endblock %}
   </head>