From 9f0a3f7f73491e88cb8b1acc8b9b30e34bb5d631 Mon Sep 17 00:00:00 2001
From: king <heoseungpil@gmail.com>
Date: Tue, 1 Sep 2026 20:11:43 +0900
Subject: [PATCH] =?UTF-8?q?style(cupang):=20=EC=83=81=EC=9E=90=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=20=EC=97=91=EC=85=80=20=EB=B2=84=ED=8A=BC=20=EC=B4=88?=
 =?UTF-8?q?=EB=A1=9D,=20=EB=A8=B8=EB=A6=AC=EA=B8=80=20=EC=95=88=20?=
 =?UTF-8?q?=EC=A4=84=EC=9E=84,=20=ED=96=89=20=ED=81=B4=EB=A6=AD=20?=
 =?UTF-8?q?=EC=B2=B4=ED=81=AC=20=ED=86=A0=EA=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 엑셀 다운로드 버튼 배경 #217346
- 표 머리글은 말줄임 없이 전체 표시(상자번호 열 74px)
- 행 클릭 시 상자 단위로 체크 색 토글 + 체크 개수 표시(세는 용도)

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../cupang/templates/cupang/box_calc.html     |  2 +-
 .../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 | 44 +++++++++++++++++--
 app/static/cupang.css                         | 25 ++++++++++-
 7 files changed, 69 insertions(+), 10 deletions(-)

diff --git a/app/modules/cupang/templates/cupang/box_calc.html b/app/modules/cupang/templates/cupang/box_calc.html
index ad8e3b2..0010c26 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 %}<link rel="stylesheet" href="/static/cupang.css?v=20260903b" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903c" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
diff --git a/app/modules/cupang/templates/cupang/box_rules.html b/app/modules/cupang/templates/cupang/box_rules.html
index dfb8e53..707d33d 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=20260903b" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903c" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
diff --git a/app/modules/cupang/templates/cupang/centers.html b/app/modules/cupang/templates/cupang/centers.html
index 9a9badf..e4d1bb2 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=20260903b" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903c" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
diff --git a/app/modules/cupang/templates/cupang/index.html b/app/modules/cupang/templates/cupang/index.html
index 01f85e8..9334a10 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=20260903b" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903c" />{% 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 9db77dc..54dc8f3 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=20260903b" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903c" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
diff --git a/app/modules/cupang/templates/cupang/view.html b/app/modules/cupang/templates/cupang/view.html
index d707244..d382999 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 %}<link rel="stylesheet" href="/static/cupang.css?v=20260903b" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260903c" />{% endblock %}
 
 {% block content %}
 {# 출고 묶음 보기 — 상자 계산 화면과 같은 3열 구성. 읽기 전용(수정 없음). #}
@@ -49,7 +49,8 @@
       <div class="cpg-card-head">
         <h2>② 상자 목록</h2>
         <span class="erp-muted">상자마다 담긴 제품과 수량</span>
-        <a class="erp-btn erp-btn-ghost cpg-boxno-dl"
+        <span class="cpg-boxno-count" id="cpg-boxno-count">체크 0/{{ box_list|length }}</span>
+        <a class="erp-btn cpg-boxno-dl"
            href="/cupang/{{ shipment.id }}/boxes.xlsx">엑셀 다운로드</a>
       </div>
 
@@ -86,7 +87,7 @@
             <tbody>
               {% for b in box_list %}
                 {% for it in b['items'] %}
-                <tr class="{% if loop.first %}is-boxtop{% endif %}">
+                <tr data-box="{{ b.no }}" class="{% if loop.first %}is-boxtop{% endif %}">
                   {% if loop.first %}
                   <td class="cpg-boxno-cell" rowspan="{{ b['items']|length }}">{{ b.no }}</td>
                   {% endif %}
@@ -165,4 +166,41 @@
 
   </div><!-- /cpg-calc3 -->
 </section>
+
+<script>
+  // 상자 목록 행 클릭 → 체크 표시 토글(상자 단위). 세는 동안 눈으로 확인하려는 용도.
+  (function () {
+    var table = document.querySelector(".cpg-boxno-table");
+    var counter = document.getElementById("cpg-boxno-count");
+    if (!table) return;
+    var total = table.querySelectorAll("tbody tr[data-box]").length
+      ? new Set(Array.prototype.map.call(
+          table.querySelectorAll("tbody tr[data-box]"),
+          function (tr) { return tr.getAttribute("data-box"); }
+        )).size
+      : 0;
+
+    function refresh() {
+      if (!counter) return;
+      var done = new Set();
+      table.querySelectorAll("tbody tr.is-checked[data-box]").forEach(function (tr) {
+        done.add(tr.getAttribute("data-box"));
+      });
+      counter.textContent = "체크 " + done.size + "/" + total;
+      counter.classList.toggle("is-on", done.size > 0);
+    }
+
+    table.addEventListener("click", function (e) {
+      var tr = e.target.closest("tbody tr[data-box]");
+      if (!tr) return;
+      var no = tr.getAttribute("data-box");
+      var rows = table.querySelectorAll('tbody tr[data-box="' + no + '"]');
+      var on = !tr.classList.contains("is-checked");
+      rows.forEach(function (r) { r.classList.toggle("is-checked", on); });
+      refresh();
+    });
+
+    refresh();
+  })();
+</script>
 {% endblock %}
diff --git a/app/static/cupang.css b/app/static/cupang.css
index b4bb3ed..8dbb922 100644
--- a/app/static/cupang.css
+++ b/app/static/cupang.css
@@ -1400,7 +1400,17 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
 
 /* 출고 보기(읽기 전용) — ③ 하단 메타 정보 */
 /* ── 출고 보기 ② 상자 목록 — 상자번호 · 제품명 · 제품코드 · 수량 ── */
-.cpg-boxno-dl { margin-left: auto; font-size: 12px; padding: 4px 10px; }
+.cpg-boxno-dl {
+  font-size: 12px; padding: 4px 10px;
+  background: #217346; border-color: #217346; color: #fff;
+}
+.cpg-boxno-dl:hover { background: #1a5c38; border-color: #1a5c38; color: #fff; }
+.cpg-boxno-count {
+  margin-left: auto;
+  font-size: 12px; color: var(--color-midtone-gray);
+  font-family: var(--font-geist-mono);
+}
+.cpg-boxno-count.is-on { color: #217346; font-weight: 700; }
 .cpg-boxno-table { table-layout: fixed; width: 100%; }
 .cpg-boxno-table th, .cpg-boxno-table td {
   box-sizing: border-box;
@@ -1412,8 +1422,10 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
 .cpg-boxno-table thead th {
   position: sticky; top: 0; z-index: 2;
   background: var(--color-ghost-gray);
+  overflow: visible; text-overflow: clip;   /* 머리글은 줄여 쓰지 않는다 */
+  padding-left: 6px; padding-right: 6px;
 }
-.cpg-boxno-c-no { width: 66px; }
+.cpg-boxno-c-no { width: 74px; }
 .cpg-boxno-c-name { width: auto; }
 .cpg-boxno-c-code { width: 92px; }
 .cpg-boxno-c-qty { width: 58px; }
@@ -1425,6 +1437,15 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
 }
 .cpg-boxno-code { color: var(--color-midtone-gray); font-family: var(--font-geist-mono); }
 .cpg-boxno-table tbody tr.is-boxtop td { border-top: 1px solid var(--color-cloud-gray); }
+.cpg-boxno-table tbody tr { cursor: pointer; }
+.cpg-boxno-table tbody tr:hover td { background: var(--color-ghost-gray); }
+/* 클릭 = 셌다는 표시. 상자 단위로 함께 켜진다. */
+.cpg-boxno-table tbody tr.is-checked td {
+  background: #d8efe0;
+  color: #12502f;
+}
+.cpg-boxno-table tbody tr.is-checked .cpg-boxno-cell { color: #217346; }
+.cpg-boxno-table tbody tr.is-checked .cpg-boxno-code { color: #2f7a55; }
 
 .cpg-view-meta {
   margin: 12px 0 0; padding: 10px 12px;