From faaadf85430023d257f2ff779c7c078285860baf Mon Sep 17 00:00:00 2001
From: taekyoungc <ctk@wixon.co.kr>
Date: Thu, 2 Jul 2026 13:58:56 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=A0=84=ED=99=94=20=EC=A3=BC=EB=AC=B8?=
 =?UTF-8?q?=EC=A0=91=EC=88=98=ED=91=9C(=EC=9D=BC=EA=B4=84)=20=EB=86=92?=
 =?UTF-8?q?=EC=9D=B4=20=EC=A0=9C=ED=95=9C=20+=20=ED=97=A4=EB=8D=94/?=
 =?UTF-8?q?=ED=95=A9=EA=B3=84=20=EA=B3=A0=EC=A0=95=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

표가 화면에 맞는 높이(약 52vh)로 표시되고 나머지 품목은 스크롤로 보이게
한다. 스크롤 시 2행 그룹 헤더는 상단에, 합계 행은 하단에 sticky로 고정.
- 2번째 헤더행 top 오프셋은 JS가 첫 헤더행 offsetHeight로 계산(zoom 무관).
- 컨테이너 padding 제거로 헤더 위쪽 틈으로 행이 비치는 현상 방지.
---
 app/Views/bag/order_phone.php | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/app/Views/bag/order_phone.php b/app/Views/bag/order_phone.php
index 250c259..4880fee 100644
--- a/app/Views/bag/order_phone.php
+++ b/app/Views/bag/order_phone.php
@@ -150,8 +150,14 @@ unset($g);
         /* 행·열 간격 축소 — 한 화면에 전체 품목이 보이도록 (피드백 #13) */
         table.phone-batch-table th, table.phone-batch-table td { padding: 0.2rem 0.35rem; }
         table.phone-batch-table .item-qty-input { padding-top: 0.1rem; padding-bottom: 0.1rem; }
+        /* 스크롤 시 2행 그룹 헤더 + 합계 행 고정. --hdr-row1-h는 JS가 첫 헤더행 높이로 설정. */
+        .phone-batch-wrap { max-height: 52vh; }
+        table.phone-batch-table thead th { position: sticky; z-index: 3; background: #f3f4f6; }
+        table.phone-batch-table thead tr:first-child th { top: 0; }
+        table.phone-batch-table thead tr:last-child th { top: var(--hdr-row1-h, 1.6rem); }
+        table.phone-batch-table tfoot td { position: sticky; bottom: 0; z-index: 2; background: #f9fafb; box-shadow: inset 0 1px 0 #e5e7eb; }
       </style>
-      <div class="border border-gray-300 rounded-lg p-2 overflow-auto">
+      <div class="phone-batch-wrap border border-gray-300 rounded-lg overflow-auto">
         <table class="w-full data-table text-sm phone-batch-table">
           <colgroup>
             <col style="width:8rem"/>     <!-- 구분: 최장 라벨("대형폐기물 스티커") 기준 고정폭 -->
@@ -448,6 +454,20 @@ unset($g);
 
   updateShopInfo();
   recalcAllRows();
+
+  // 스크롤 시 두 번째 헤더행이 첫 번째 헤더행 바로 아래에 붙도록 오프셋 계산.
+  // offsetHeight는 화면 zoom(텍스트 크기)과 무관한 레이아웃 px라 배율이 바뀌어도 정확하다.
+  (function () {
+    const tbl = document.querySelector('table.phone-batch-table');
+    if (!tbl) return;
+    const r1 = tbl.querySelector('thead tr:first-child');
+    function setHeaderOffset() {
+      if (r1) tbl.style.setProperty('--hdr-row1-h', r1.offsetHeight + 'px');
+    }
+    setHeaderOffset();
+    window.addEventListener('resize', setHeaderOffset);
+    window.addEventListener('storage', function (e) { if (e.key === 'jrj_font_scale') setHeaderOffset(); });
+  })();
 })();
 </script>