From bd53533b77ce80056fab8fccb9f02ee982c495c1 Mon Sep 17 00:00:00 2001 From: king Date: Mon, 31 Aug 2026 12:40:02 +0900 Subject: [PATCH] =?UTF-8?q?style(cupang):=20=EC=84=BC=ED=84=B0=20=EB=B6=84?= =?UTF-8?q?=EB=B0=B0=20=ED=97=A4=EB=8D=94/=EB=AA=A9=EB=A1=9D=20=EA=B5=AC?= =?UTF-8?q?=EB=B6=84,=20=EB=B0=95=EC=8A=A4=20=EC=88=98=EB=9F=89=20?= =?UTF-8?q?=EC=9E=85=EB=A0=A5=EB=9E=80=20=EC=B6=95=EC=86=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 센터 이름과 담긴 품목이 같은 평면에 있어 경계가 흐렸다. 헤더를 바로 만들어 분리하고(담긴 센터는 검정 바 + 흰 배지) 품목은 패널 안쪽에서 구분선으로 나눈다. 박스 수량은 세 자리를 넘지 않으므로 입력란을 62px → 46px 로 줄이고, 자리만 차지하던 number 스피너를 숨겼다. 고정폭 글꼴로 자릿수 정렬, max=999·inputmode=numeric 추가. --- .../cupang/templates/cupang/box_calc.html | 4 +- .../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 | 50 ++++++++++++++++--- 8 files changed, 52 insertions(+), 14 deletions(-) diff --git a/app/modules/cupang/templates/cupang/box_calc.html b/app/modules/cupang/templates/cupang/box_calc.html index c28f5f8..8c2c921 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 %}
@@ -446,7 +446,7 @@ items += '
  • ' + '
    ' + '' + esc(labels[a.key] || a.key) + "" + - '' + + '' + '박스 · ' + (a.count * per) + "개" + '' + "
    " + diff --git a/app/modules/cupang/templates/cupang/box_rules.html b/app/modules/cupang/templates/cupang/box_rules.html index 8a59f6b..09a6721 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 b84dace..d632804 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 8706626..799d500 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 90607b1..10f5b69 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 5e60495..3a71c4c 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 4c9b40d..a410b24 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 15c7d08..e5eb2d9 100644 --- a/app/static/cupang.css +++ b/app/static/cupang.css @@ -705,16 +705,44 @@ body.cpg-dragging { cursor: grabbing; user-select: none; } .cpg-dist-center { border: 1px solid var(--color-subtle-ash); border-radius: 10px; - padding: 10px 12px; + overflow: hidden; + background: var(--color-canvas-white); } .cpg-dist-center.has-items { border-color: var(--color-rich-black); } + +/* 센터 헤더 = 회색 바, 아래 목록과 확실히 분리 */ .cpg-dist-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; - margin-bottom: 8px; - font-size: 14px; + padding: 7px 10px; + background: var(--color-ghost-gray); + border-bottom: 1px solid var(--color-subtle-ash); + font-size: 13px; +} +.cpg-dist-head > strong { + flex: 1 1 auto; min-width: 0; + font-size: 13px; font-weight: 700; letter-spacing: .02em; + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; +} +.cpg-dist-center.has-items .cpg-dist-head { + background: var(--color-rich-black); + border-bottom-color: var(--color-rich-black); + color: var(--color-canvas-white); +} +.cpg-dist-center.has-items .cpg-dist-head .erp-badge { + background: rgba(255, 255, 255, .14); + border-color: rgba(255, 255, 255, .28); + color: var(--color-canvas-white); +} +.cpg-dist-center.has-items .cpg-dist-close { + border-color: rgba(255, 255, 255, .35); + color: var(--color-canvas-white); + background: transparent; +} +.cpg-dist-center.has-items .cpg-dist-close:hover { + background: rgba(255, 255, 255, .16); } /* 드롭 대상은 센터 패널 전체 */ .cpg-dist-center { transition: background .15s ease, border-color .15s ease; } @@ -723,7 +751,7 @@ body.cpg-dragging { cursor: grabbing; user-select: none; } background: var(--color-ghost-gray); } .cpg-dist-hint { - margin: 0; + margin: 10px; padding: 10px 8px; border: 1.5px dashed var(--color-subtle-ash); border-radius: 8px; @@ -735,15 +763,25 @@ body.cpg-dragging { cursor: grabbing; user-select: none; } .cpg-dist-close { padding: 0 6px; line-height: 1.5; } .cpg-center-pick { margin-bottom: 10px; } .cpg-center-pick .erp-select { flex: 1 1 auto; min-width: 0; } -.cpg-dist-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } +.cpg-dist-items { list-style: none; margin: 0; padding: 4px 10px 6px; display: flex; flex-direction: column; } .cpg-dist-item { display: flex; align-items: center; gap: 6px; font-size: 13px; + padding: 5px 0; } +.cpg-dist-item + .cpg-dist-item { border-top: 1px solid var(--color-ghost-gray); } .cpg-dist-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.cpg-dist-qty { width: 62px; min-width: 0; text-align: right; padding: 2px 6px; } +/* 박스 수량: 최대 세 자리 → 좁게. 스피너는 자리만 차지해 숨긴다. */ +.cpg-dist-qty { + width: 46px; min-width: 0; flex: 0 0 auto; + text-align: center; padding: 2px 4px; + font-family: var(--font-geist-mono); + -moz-appearance: textfield; +} +.cpg-dist-qty::-webkit-outer-spin-button, +.cpg-dist-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cpg-dist-unit { font-size: 12px; color: var(--color-midtone-gray); } .cpg-dist-del { padding: 2px 8px; line-height: 1.4; }