From 2608fd7f23dbc9a4ac70e01e6ed6cbcbbd32e432 Mon Sep 17 00:00:00 2001 From: king Date: Tue, 1 Sep 2026 17:46:40 +0900 Subject: [PATCH] =?UTF-8?q?fix(cupang):=20=EC=A2=81=EC=9D=80=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=EC=97=90=EC=84=9C=EB=8A=94=20=EC=B9=B4=EB=93=9C?= =?UTF-8?q?=EA=B0=80=20=EB=8A=98=EA=B3=A0=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EA=B0=80=20=EC=8A=A4=ED=81=AC=EB=A1=A4=EB=90=98=EA=B2=8C=20?= =?UTF-8?q?=EB=B6=84=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 진단 결과 1열로 접힌 상태에서 .cpg-calc3 가 704px 를 세 카드가 나눠 가져(224px씩) 내용이 잘렸고, JS 가 준 높이(561px)는 카드보다 커서 무용지물이었다. - 1501px 이상: 카드 안쪽만 스크롤. 높이는 "카드 아래끝 − 영역 top" 으로 계산 - 1500px 이하: 카드/영역 높이 제한 해제, .cpg 를 flex:0 0 auto 로 두어 내용만큼 늘고 페이지(.erp-page)가 스크롤 Co-Authored-By: Claude Opus 5 --- .../cupang/templates/cupang/box_calc.html | 24 +++++++++++++------ .../cupang/templates/cupang/box_rules.html | 2 +- .../cupang/templates/cupang/centers.html | 2 +- .../cupang/templates/cupang/index.html | 2 +- .../cupang/templates/cupang/products.html | 2 +- app/modules/cupang/templates/cupang/view.html | 2 +- app/static/cupang.css | 18 ++++++++++---- 7 files changed, 36 insertions(+), 16 deletions(-) diff --git a/app/modules/cupang/templates/cupang/box_calc.html b/app/modules/cupang/templates/cupang/box_calc.html index 771a9ad..e553486 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 %}
@@ -1066,10 +1066,13 @@ syncConfirm(); } - // ── 스크롤 영역 높이 (CSS 만으로 안 잡히는 경우 대비) ── - // 각 영역의 화면상 위치를 재서 "창 아래까지" 높이를 직접 준다. - // window.CPG_DEBUG = true 로 두면 계산값을 콘솔에 찍는다. + // ── 스크롤 영역 높이 ────────────────────────────── + // 넓은 화면(3열): 카드 안쪽에서만 스크롤 → 카드 아래끝까지를 높이로 준다. + // 좁은 화면(2열/1열): 카드가 세로로 쌓이므로 높이를 풀고 페이지가 스크롤. + var FRAME_MIN_WIDTH = 1501; + function fitScrollAreas() { + var wide = window.innerWidth >= FRAME_MIN_WIDTH; var panes = [ [".cpg-calc-card .erp-table-wrap", document.querySelector(".cpg-calc-card .erp-table-wrap")], [".cpg-sum-scroll", document.querySelector(".cpg-calc-sum .cpg-sum-scroll")], @@ -1078,15 +1081,22 @@ panes.forEach(function (pair) { var el = pair[1]; if (!el) return; + if (!wide) { // 좁은 화면: 제한 해제(페이지가 스크롤) + el.style.removeProperty("max-height"); + el.style.removeProperty("overflow-y"); + el.removeAttribute("data-fit"); + return; + } + var card = el.closest(".erp-card"); var top = el.getBoundingClientRect().top; - var avail = Math.floor(window.innerHeight - top - 16); - var h = avail > 200 ? avail : Math.round(window.innerHeight * 0.6); + var bottom = card ? card.getBoundingClientRect().bottom - 16 : window.innerHeight - 16; + var h = Math.max(160, Math.floor(Math.min(bottom, window.innerHeight - 16) - top)); el.style.setProperty("max-height", h + "px", "important"); el.style.setProperty("overflow-y", "auto", "important"); el.style.setProperty("min-height", "0", "important"); el.setAttribute("data-fit", h); if (window.CPG_DEBUG) { - console.log("[cpg fit]", pair[0], "top=", Math.round(top), "avail=", avail, + console.log("[cpg fit]", pair[0], "top=", Math.round(top), "cardBottom=", Math.round(bottom), "set=", h, "client=", el.clientHeight, "scroll=", el.scrollHeight); } }); diff --git a/app/modules/cupang/templates/cupang/box_rules.html b/app/modules/cupang/templates/cupang/box_rules.html index 8deada8..95355c9 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 232052f..b1f21be 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/index.html b/app/modules/cupang/templates/cupang/index.html index 3051a45..dadf404 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 f605ff4..003c8f2 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/modules/cupang/templates/cupang/view.html b/app/modules/cupang/templates/cupang/view.html index 7595fac..eda4c65 100644 --- a/app/modules/cupang/templates/cupang/view.html +++ b/app/modules/cupang/templates/cupang/view.html @@ -1,6 +1,6 @@ {% extends "erp_base.html" %} -{% block head_extra %}{% endblock %} +{% block head_extra %}{% endblock %} {% block content %} {# 출고 묶음 보기 — 상자 계산 화면과 같은 3열 구성. 읽기 전용(수정 없음). #} diff --git a/app/static/cupang.css b/app/static/cupang.css index ced0f42..693d1a3 100644 --- a/app/static/cupang.css +++ b/app/static/cupang.css @@ -1496,9 +1496,19 @@ body.cpg-dragging { cursor: grabbing; user-select: none; } } .cpg-dist-card .cpg-dist-list::-webkit-scrollbar-thumb:hover { background: var(--color-midtone-gray); } -/* 3열이 2열/1열로 접히면 행이 여러 개라 1fr 고정이 통하지 않는다. - 그때는 카드마다 최대 높이를 준다. */ +/* 3열이 2열/1열로 접히면 카드가 세로로 쌓여 화면 높이를 나눠 갖게 된다. + 그때는 높이 제한을 풀고 내용만큼 늘어나게 두어 페이지가 스크롤되게 한다. */ @media (max-width: 1500px) { - .cpg-calc3 { grid-template-rows: none; } - .cpg-calc3 > .erp-card { max-height: min(76vh, 820px); } + .erp-page > .cpg { flex: 0 0 auto; min-height: auto; } + .cpg-calc3 { + grid-template-rows: none; + flex: 0 0 auto; + } + .cpg-calc3 > .erp-card { max-height: none; overflow: visible; } + .cpg-calc-card .erp-table-wrap, + .cpg-calc-sum .cpg-sum-scroll, + .cpg-dist-card .cpg-dist-list { + max-height: none; + overflow: visible; + } }