From aab51573862bf660572a4a5c46c60c0cd33d0e31 Mon Sep 17 00:00:00 2001 From: king Date: Fri, 28 Aug 2026 12:35:48 +0900 Subject: [PATCH] =?UTF-8?q?fix(cupang):=20=EB=B0=95=EC=8A=A4=20=EA=B3=84?= =?UTF-8?q?=EC=82=B0=ED=91=9C=20=EA=B0=80=EB=A1=9C=20=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A1=A4=20=EC=A0=9C=EA=B1=B0=C2=B7=EC=A2=8C=EC=9A=B0=20?= =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=EB=86=92=EC=9D=B4=20=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit .erp-input 의 min-width:240px 때문에 수량 칸이 넓어져 표가 가로로 넘쳤다. 계산표를 table-layout:fixed + colgroup 고정폭으로 바꾸고 수량/선택 입력의 min-width 를 해제, 셀 여백을 8px 6px 로 축소. 박스명·입수량 열을 "박스 / 입수량" 한 열로 합치고(쿠팡 2호 · 8개), 헤더를 박스/낱개/필요 로 줄이고 삭제 버튼을 ✕ 아이콘으로 바꿔 열 수를 8 → 7 로 줄였다. 2열 그리드를 align-items:stretch 로 두고 카드를 flex column 으로 만들어 좌우 카드 높이를 맞춘다. Co-Authored-By: Claude Opus 5 --- .../cupang/templates/cupang/box_calc.html | 37 +++++++++++-------- .../cupang/templates/cupang/box_rules.html | 2 +- .../cupang/templates/cupang/centers.html | 2 +- .../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 | 21 +++++++++-- 8 files changed, 46 insertions(+), 24 deletions(-) diff --git a/app/modules/cupang/templates/cupang/box_calc.html b/app/modules/cupang/templates/cupang/box_calc.html index 2eca0a5..493e170 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 %}{% endblock %} +{% block head_extra %}{% endblock %} {% block content %}
@@ -29,16 +29,24 @@
+ + + + + + + + + - - - - - - + + + + + @@ -106,11 +114,10 @@ '" + '' + '' + - '' + '' + '' + '' + - ''; + ''; tbody.appendChild(tr); if (code) tr.querySelector(".cpg-calc-name").value = code; return tr; @@ -119,7 +126,6 @@ function clearResults() { Array.prototype.forEach.call(tbody.querySelectorAll(".cpg-calc-row"), function (tr) { tr.querySelector(".cpg-calc-box").textContent = "—"; - tr.querySelector(".cpg-calc-upb").textContent = "—"; tr.querySelector(".cpg-calc-boxes").textContent = "—"; tr.querySelector(".cpg-calc-rem").textContent = "—"; tr.querySelector(".cpg-calc-req").textContent = "—"; @@ -158,12 +164,13 @@ results.forEach(function (res, i) { var tr = items[i] && items[i]._tr; if (!tr) return; - tr.querySelector(".cpg-calc-box").textContent = res.box_name || "—"; - tr.querySelector(".cpg-calc-upb").textContent = res.units_per_box ? res.units_per_box + "개" : "미설정"; + tr.querySelector(".cpg-calc-box").textContent = res.units_per_box + ? (res.box_name || "-") + " · " + res.units_per_box + "개" + : "미설정"; if (res.configured) { - tr.querySelector(".cpg-calc-boxes").textContent = res.full_boxes + "박스"; - tr.querySelector(".cpg-calc-rem").textContent = res.remainder_units + "개"; - tr.querySelector(".cpg-calc-req").textContent = res.required_boxes + "박스"; + tr.querySelector(".cpg-calc-boxes").textContent = res.full_boxes; + tr.querySelector(".cpg-calc-rem").textContent = res.remainder_units; + tr.querySelector(".cpg-calc-req").textContent = res.required_boxes; tr.classList.remove("cpg-calc-warn"); } else { tr.querySelector(".cpg-calc-boxes").textContent = "—"; diff --git a/app/modules/cupang/templates/cupang/box_rules.html b/app/modules/cupang/templates/cupang/box_rules.html index 6f5c78a..dc96aed 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 %}{% endblock %} +{% block head_extra %}{% endblock %} {% block content %}
diff --git a/app/modules/cupang/templates/cupang/centers.html b/app/modules/cupang/templates/cupang/centers.html index 3f8d552..2518557 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 %}{% endblock %} +{% block head_extra %}{% endblock %} {% block content %}
diff --git a/app/modules/cupang/templates/cupang/detail.html b/app/modules/cupang/templates/cupang/detail.html index 74f3a88..6f6015f 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 %}{% endblock %} +{% block head_extra %}{% endblock %} {% block content %}
diff --git a/app/modules/cupang/templates/cupang/form.html b/app/modules/cupang/templates/cupang/form.html index 77b3d32..de1a4fd 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 %}{% endblock %} +{% block head_extra %}{% endblock %} {% block content %}
diff --git a/app/modules/cupang/templates/cupang/index.html b/app/modules/cupang/templates/cupang/index.html index 2198f10..b74ba4f 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 %}{% endblock %} +{% block head_extra %}{% endblock %} {% block content %}
diff --git a/app/modules/cupang/templates/cupang/products.html b/app/modules/cupang/templates/cupang/products.html index 92e8fb7..6b9425b 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 %}{% endblock %} +{% block head_extra %}{% endblock %} {% block content %}
diff --git a/app/static/cupang.css b/app/static/cupang.css index f8325c3..fdd5121 100644 --- a/app/static/cupang.css +++ b/app/static/cupang.css @@ -327,11 +327,20 @@ .cpg-sort.is-asc .cpg-sort-ind::after { content: "▲"; opacity: 1; } .cpg-sort.is-desc .cpg-sort-ind::after { content: "▼"; opacity: 1; } -/* 박스 계산기 */ +/* 박스 계산기 — 가로 스크롤이 생기지 않게 열 폭·여백을 좁게 잡는다. */ +.cpg-calc-table { table-layout: fixed; width: 100%; } +.cpg-calc-table th, .cpg-calc-table td { padding: 8px 6px; } .cpg-calc-table .cpg-calc-num { text-align: right; white-space: nowrap; } .cpg-calc-table th.cpg-calc-num { text-align: right; } -.cpg-calc-table .cpg-calc-name { min-width: 240px; } -.cpg-calc-table .cpg-calc-qty { width: 96px; text-align: right; } +.cpg-calc-table .cpg-calc-name { width: 100%; min-width: 0; } +.cpg-calc-table .cpg-calc-qty { width: 100%; min-width: 0; text-align: right; padding-left: 6px; padding-right: 6px; } +.cpg-calc-table .cpg-calc-box { white-space: nowrap; font-size: 13px; } +.cpg-calc-table .cpg-calc-act { text-align: center; } +.cpg-calc-table .cpg-calc-del { padding: 2px 8px; line-height: 1.4; } +.cpg-calc-table col.cpg-col-qty { width: 76px; } +.cpg-calc-table col.cpg-col-box { width: 108px; } +.cpg-calc-table col.cpg-col-n { width: 54px; } +.cpg-calc-table col.cpg-col-act { width: 40px; } .cpg-calc-row.cpg-calc-warn { background: color-mix(in srgb, var(--color-callout-red) 8%, transparent); } .cpg-calc-actions { margin-top: 12px; gap: 8px; align-items: center; } .cpg-calc-sum { margin-top: 16px; } @@ -514,3 +523,9 @@ background: var(--color-canvas-white); } .cpg-calc-actions { flex-wrap: wrap; } + +/* 1열/2열 카드 높이를 맞춘다(요약이 비어 있을 때는 왼쪽만 표시). */ +.cpg-calc-layout { align-items: stretch; } +.cpg-calc-layout > .erp-card { display: flex; flex-direction: column; } +.cpg-calc-card .erp-table-wrap { flex: 1 1 auto; } +.cpg-calc-sum { overflow: auto; max-height: min(78vh, 900px); }
제품명 수량박스명입수량박스 수남은 낱개총 필요 박스동작박스 / 입수량박스낱개필요
—————