From ca87c254c0fb1a945552dd93aad9a7cefa215d95 Mon Sep 17 00:00:00 2001 From: king Date: Tue, 1 Sep 2026 17:38:51 +0900 Subject: [PATCH] =?UTF-8?q?fix(cupang):=203=EC=97=B4=20=ED=94=84=EB=A0=88?= =?UTF-8?q?=EC=9E=84=20=EB=86=92=EC=9D=B4=EB=A5=BC=20=EA=B7=B8=EB=A6=AC?= =?UTF-8?q?=EB=93=9C=20=ED=96=89(1fr)=EB=A1=9C=20=EA=B3=A0=EC=A0=95=20?= =?UTF-8?q?=E2=80=94=20=E2=91=A2=20=EB=AA=A9=EB=A1=9D=EB=A7=8C=20=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A1=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 원인: .cpg-calc3 의 행 높이가 auto 라 카드가 화면 아래로 넘치도록 늘어났고, 페이지 스크롤도 없어서 아래쪽(마지막 상자, [+ 새 혼합 상자])이 잘렸다. - grid-template-rows: minmax(0,1fr) 로 행을 컨테이너 높이에 고정 - 카드 overflow:hidden, ①표/②목록/③센터목록만 내부 스크롤 - 그동안 덧댄 !important 패치와 JS 높이 강제 지정 제거(충돌 정리) - 2열/1열로 접히면 행이 여러 개라 카드 max-height(76vh)로 처리 Co-Authored-By: Claude Opus 5 --- .../cupang/templates/cupang/box_calc.html | 26 +------ .../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 | 68 +++++++------------ 7 files changed, 33 insertions(+), 71 deletions(-) diff --git a/app/modules/cupang/templates/cupang/box_calc.html b/app/modules/cupang/templates/cupang/box_calc.html index d4c9c9c..2b147e8 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,29 +1066,7 @@ syncConfirm(); } - // ── ①②③ 스크롤 영역 높이 ──────────────────────── - // 세 영역 모두 화면 안에서만 스크롤한다(문서 전체는 스크롤하지 않음). - function fitScrollAreas() { - var panes = [ - document.querySelector(".cpg-calc-card .erp-table-wrap"), - document.querySelector(".cpg-calc-sum .cpg-sum-scroll"), - distList - ]; - panes.forEach(function (el) { - if (!el) return; - var top = el.getBoundingClientRect().top; - var avail = window.innerHeight - top - 24; - var h = avail > 260 ? avail : Math.round(window.innerHeight * 0.6); - el.style.setProperty("max-height", h + "px", "important"); - el.style.setProperty("overflow-y", "auto", "important"); - }); - } - - window.addEventListener("resize", fitScrollAreas); - var pageScroller = document.querySelector(".erp-page"); - if (pageScroller) pageScroller.addEventListener("scroll", fitScrollAreas, { passive: true }); - - function render() { renderSummary(); renderDist(); fitScrollAreas(); } + function render() { renderSummary(); renderDist(); } // ── 수량 대화상자 ───────────────────────────────── function openDialog(key, centerId) { diff --git a/app/modules/cupang/templates/cupang/box_rules.html b/app/modules/cupang/templates/cupang/box_rules.html index 1e9d938..4da7079 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 7d7a0c2..e5c829d 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 0b380cc..93808e2 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 5380aaa..c7cae53 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 b5abe63..cd4ca69 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 b018a61..ced0f42 100644 --- a/app/static/cupang.css +++ b/app/static/cupang.css @@ -1466,55 +1466,39 @@ body.cpg-dragging { cursor: grabbing; user-select: none; } /* 용량 초과 표시 */ .cpg-mix-fill.is-over { color: var(--color-callout-red); font-weight: 600; } -/* ── 스크롤 확실히 (부모 높이 계산 실패해도 동작하도록 이중 안전장치) ── */ -/* 카드마다 최대 높이 → 넘치면 카드 자체가 스크롤된다 */ -.cpg-calc3 > .erp-card { max-height: min(82vh, 900px); } -.cpg-dist-card { overflow-y: auto; overflow-x: hidden; } -/* 안쪽 목록은 스크롤바 자리를 항상 확보해 두어 눈에 보이게 */ -.cpg-dist-card .cpg-dist-list, +/* ══════════════════════════════════════════════════════════════ + 상자 계산 3열 — 프레임 높이/스크롤 (한 곳에서만 정의) + · .cpg-calc3 는 남은 화면 높이를 채우고 행 높이를 1fr 로 고정한다. + (기본 auto 행이면 카드가 화면 밖까지 늘어나 잘려 보인다) + · 카드는 넘치는 부분을 감추고, 안쪽 목록만 스크롤한다. + ══════════════════════════════════════════════════════════════ */ +.cpg-calc3 { grid-template-rows: minmax(0, 1fr); } +.cpg-calc3 > .erp-card { min-height: 0; overflow: hidden; } + +.cpg-calc-card .erp-table-wrap, .cpg-calc-sum .cpg-sum-scroll, -.cpg-calc-card .erp-table-wrap { +.cpg-dist-card .cpg-dist-list { + flex: 1 1 auto; + min-height: 0; + max-height: none; overflow-y: auto; + overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; } -/* 크롬/웨일에서 오버레이 스크롤바가 숨지 않도록 폭을 지정 */ -.cpg-dist-card .cpg-dist-list::-webkit-scrollbar, -.cpg-calc-sum .cpg-sum-scroll::-webkit-scrollbar, .cpg-calc-card .erp-table-wrap::-webkit-scrollbar, -.cpg-dist-card::-webkit-scrollbar { width: 10px; } -.cpg-dist-card .cpg-dist-list::-webkit-scrollbar-thumb, -.cpg-calc-sum .cpg-sum-scroll::-webkit-scrollbar-thumb, +.cpg-calc-sum .cpg-sum-scroll::-webkit-scrollbar, +.cpg-dist-card .cpg-dist-list::-webkit-scrollbar { width: 10px; } .cpg-calc-card .erp-table-wrap::-webkit-scrollbar-thumb, -.cpg-dist-card::-webkit-scrollbar-thumb { - background: var(--color-subtle-ash); - border-radius: 999px; +.cpg-calc-sum .cpg-sum-scroll::-webkit-scrollbar-thumb, +.cpg-dist-card .cpg-dist-list::-webkit-scrollbar-thumb { + background: var(--color-subtle-ash); border-radius: 999px; } -.cpg-dist-card .cpg-dist-list::-webkit-scrollbar-thumb:hover, -.cpg-dist-card::-webkit-scrollbar-thumb:hover { background: var(--color-midtone-gray); } +.cpg-dist-card .cpg-dist-list::-webkit-scrollbar-thumb:hover { background: var(--color-midtone-gray); } -/* ── 스크롤 최종 보정 — id 선택자 + !important 로 확정 ── */ -/* ③ 센터 목록은 카드 안에서만 스크롤 */ -#cpg-dist-list { - min-height: 0 !important; - overflow-y: auto !important; +/* 3열이 2열/1열로 접히면 행이 여러 개라 1fr 고정이 통하지 않는다. + 그때는 카드마다 최대 높이를 준다. */ +@media (max-width: 1500px) { + .cpg-calc3 { grid-template-rows: none; } + .cpg-calc3 > .erp-card { max-height: min(76vh, 820px); } } -.cpg-calc-card .erp-table-wrap { - max-height: 52vh !important; - overflow-y: auto !important; -} -.cpg-calc-sum .cpg-sum-scroll { - max-height: 52vh !important; - overflow-y: auto !important; -} -.cpg-calc3 > .erp-card { max-height: 86vh !important; } - -/* ③ 센터 분배 — 카드는 잘라내고 목록만 스크롤 */ -.cpg-dist-card { overflow: hidden !important; } -.cpg-dist-card .cpg-dist-list { - flex: 1 1 auto; - min-height: 0 !important; - overflow-y: auto !important; - overflow-x: hidden; -} -