From 762a32e8f20e6c5a781dbfc4c515f67bb78c3fe5 Mon Sep 17 00:00:00 2001
From: taekyoungc <ctk@wixon.co.kr>
Date: Wed, 1 Jul 2026 15:38:28 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=A0=84=ED=99=94=EC=A0=91=EC=88=98=20?=
 =?UTF-8?q?=EC=A0=91=EC=88=98=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=86=92?=
 =?UTF-8?q?=EC=9D=B4=EB=A5=BC=20=EC=83=81=EC=84=B8=20=EC=B9=B4=EB=93=9C?=
 =?UTF-8?q?=EC=97=90=20JS=20=EB=8F=99=EA=B8=B0=ED=99=94(=ED=85=8D=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=A4=84=EC=9D=B4=EA=B8=B0=20=EC=8B=9C=20=EA=B3=B5?=
 =?UTF-8?q?=EB=B0=B1=20=EC=A0=9C=EA=B1=B0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 원인: 워크스페이스 탭(embed)의 '텍스트 줄이기'는 html에 zoom을 적용하는데,
  상세 카드(프로필+접수품목+포장명세+버튼)가 72vh보다 크면 리스트 스크롤이
  max-h-[72vh]로 잘려 카드보다 작아져 하단 공백 발생.
- 수정: 리스트 스크롤의 max-h-[72vh] 제거, offsetHeight(zoom 무관 레이아웃 px)로
  상세 카드 높이에 맞춰 리스트 스크롤 높이를 JS 동기화. 배율과 무관하게 두 카드가
  같은 높이가 되고, 행이 적으면 h-full로 채워지고 많으면 내부 스크롤.
- resize/storage(jrj_font_scale)/ResizeObserver로 재동기화.
---
 app/Views/bag/order_phone_manage.php | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/app/Views/bag/order_phone_manage.php b/app/Views/bag/order_phone_manage.php
index 63eacba..6fd04e7 100644
--- a/app/Views/bag/order_phone_manage.php
+++ b/app/Views/bag/order_phone_manage.php
@@ -18,7 +18,7 @@
 <div class="grid grid-cols-1 xl:grid-cols-9 gap-3 mt-2">
   <section class="xl:col-span-5 border border-gray-300 rounded-lg bg-white overflow-hidden flex flex-col">
     <div class="px-3 py-2 border-b border-gray-200 bg-gray-50 text-sm font-semibold text-gray-700">접수 리스트(전화)</div>
-    <div class="flex-1 min-h-0 max-h-[72vh] overflow-auto">
+    <div id="list-scroll" class="overflow-auto">
       <table class="w-full data-table text-sm h-full">
         <thead>
           <tr>
@@ -39,7 +39,7 @@
     </div>
   </section>
 
-  <section class="xl:col-span-4 border border-gray-300 rounded-lg bg-white overflow-hidden">
+  <section id="detail-card" class="xl:col-span-4 border border-gray-300 rounded-lg bg-white overflow-hidden">
     <div class="px-3 py-2 border-b border-gray-200 bg-gray-50 text-sm font-semibold text-gray-700">지정판매소 정보</div>
 
     <form id="order-detail-form" action="<?= base_url('bag/order/phone/manage/update') ?>" method="POST" class="p-3 space-y-3">
@@ -289,6 +289,25 @@
     }).join('');
 
     recalcTotals();
+    syncListHeight(); // 상세 카드 높이 확정 후 접수 리스트 높이를 맞춘다
+  }
+
+  // 접수 리스트 스크롤 높이를 지정판매소 정보(상세) 카드 높이에 맞춘다.
+  // offsetHeight는 화면 zoom(텍스트 줄이기)과 무관한 레이아웃 px라, 배율과 상관없이 두 카드가 같은 높이가 되고 하단 공백이 생기지 않는다.
+  const listScrollEl = document.getElementById('list-scroll');
+  const detailCardEl = document.getElementById('detail-card');
+  function syncListHeight() {
+    if (!listScrollEl || !detailCardEl) return;
+    const listCard = listScrollEl.closest('section');
+    const header = listCard ? listCard.firstElementChild : null;
+    listScrollEl.style.height = '0px';       // 리스트를 접어 상세 카드의 본래 높이를 측정
+    const target = detailCardEl.offsetHeight - (header ? header.offsetHeight : 0);
+    listScrollEl.style.height = Math.max(160, target) + 'px';
+  }
+  window.addEventListener('resize', syncListHeight);
+  window.addEventListener('storage', function (e) { if (e.key === 'jrj_font_scale') syncListHeight(); });
+  if ('ResizeObserver' in window && detailCardEl) {
+    new ResizeObserver(function () { syncListHeight(); }).observe(detailCardEl);
   }
 
   // ── 포장 명세 탭: 주문 품목을 박스/팩/낱장 단위 행으로 펼침 ──────────
@@ -415,6 +434,7 @@
     firstRow.classList.add('bg-blue-100');
     renderDetail(selectedId);
   }
+  syncListHeight();
 })();
 </script>