From 4835b2daafd1c92b573e936af963db389246e9b5 Mon Sep 17 00:00:00 2001
From: taekyoungc <ctk@wixon.co.kr>
Date: Fri, 3 Jul 2026 18:17:23 +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=20=EB=86=92=EC=9D=B4=EB=A5=BC=20?=
 =?UTF-8?q?=EC=A2=8C=EC=B8=A1(=EC=A7=80=EC=A0=95=ED=8C=90=EB=A7=A4?=
 =?UTF-8?q?=EC=86=8C=20=EC=A0=95=EB=B3=B4=20=ED=95=98=EB=8B=A8)=EC=97=90?=
 =?UTF-8?q?=20=EB=A7=9E=EC=B6=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

우측 컬럼 높이를 좌측 컬럼 offsetHeight(zoom 무관)에 동기화하고
표 래퍼를 flex-1로 채워, 표 하단이 지정판매소 정보 카드 하단과
정확히 정렬되게 한다. 초과 품목은 표 내부 스크롤(헤더·합계 고정).
1열로 쌓이는 좁은 화면에선 자동 높이.
---
 app/Views/bag/order_phone.php | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/app/Views/bag/order_phone.php b/app/Views/bag/order_phone.php
index 022cae3..f9f9342 100644
--- a/app/Views/bag/order_phone.php
+++ b/app/Views/bag/order_phone.php
@@ -22,7 +22,7 @@
 
     <div class="grid grid-cols-1 xl:grid-cols-3 gap-4 items-start">
       <!-- 좌측(좁게): 판매소 선택 → 접수정보 → 지정판매소 정보(+결제/가상계좌) -->
-      <div class="xl:col-span-1 space-y-3">
+      <div id="phone-left-col" class="xl:col-span-1 space-y-3">
         <div>
           <label class="block text-sm font-bold text-gray-700 mb-1">판매소 검색</label>
           <div class="relative">
@@ -134,8 +134,8 @@ foreach ($orderGroups as &$g) {
 }
 unset($g);
 ?>
-      <!-- 우측(넓게): 전화 주문접수표(일괄) — 최상단부터 -->
-      <div class="xl:col-span-2">
+      <!-- 우측(넓게): 전화 주문접수표(일괄) — 최상단부터, 좌측 컬럼 높이에 맞춤 -->
+      <div id="phone-right-col" class="xl:col-span-2 flex flex-col">
         <label class="block text-sm font-bold text-gray-700 mb-2">전화 주문접수표 (일괄)</label>
       <style>
         /* 그룹 헤더(rowspan/colspan) 경계선이 단가까지 이어지는 현상 방지 — 헤더 맨 아래 한 줄만 */
@@ -148,14 +148,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; }
+        /* 스크롤 시 2행 그룹 헤더 + 합계 행 고정. --hdr-row1-h는 JS가 첫 헤더행 높이로 설정.
+           표 높이는 JS가 좌측 컬럼 높이에 맞춰 우측 컬럼에 지정하고, 래퍼(flex-1)가 그 높이를 채운다. */
         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="phone-batch-wrap border border-gray-300 rounded-lg overflow-auto">
+      <div class="phone-batch-wrap flex-1 min-h-0 border border-gray-300 rounded-lg overflow-auto">
         <table class="w-full data-table text-sm phone-batch-table">
           <colgroup>
             <col style="width:8rem"/>     <!-- 구분: 최장 라벨("대형폐기물 스티커") 기준 고정폭 -->
@@ -467,6 +467,23 @@ unset($g);
     window.addEventListener('resize', setHeaderOffset);
     window.addEventListener('storage', function (e) { if (e.key === 'jrj_font_scale') setHeaderOffset(); });
   })();
+
+  // 전화 주문접수표(우측 컬럼) 높이를 좌측 컬럼(지정판매소 정보 하단까지)에 맞춘다.
+  // offsetHeight/offsetTop은 zoom과 무관한 레이아웃 px라 배율이 바뀌어도 정확하다.
+  (function () {
+    const leftCol = document.getElementById('phone-left-col');
+    const rightCol = document.getElementById('phone-right-col');
+    if (!leftCol || !rightCol) return;
+    function syncTableHeight() {
+      // 2열(나란히)일 때만 높이 맞춤. 1열로 쌓이면 자동 높이로 둔다.
+      const sideBySide = Math.abs(leftCol.offsetTop - rightCol.offsetTop) < 4;
+      rightCol.style.height = sideBySide ? (leftCol.offsetHeight + 'px') : '';
+    }
+    syncTableHeight();
+    window.addEventListener('resize', syncTableHeight);
+    window.addEventListener('storage', function (e) { if (e.key === 'jrj_font_scale') syncTableHeight(); });
+    if ('ResizeObserver' in window) { new ResizeObserver(syncTableHeight).observe(leftCol); }
+  })();
 })();
 </script>