diff --git a/app/Views/bag/order_phone_manage.php b/app/Views/bag/order_phone_manage.php index df4392f..dc01feb 100644 --- a/app/Views/bag/order_phone_manage.php +++ b/app/Views/bag/order_phone_manage.php @@ -15,8 +15,8 @@ -
-
+
+
접수 리스트(전화)
@@ -43,7 +43,12 @@ -
+ + + +
지정판매소 정보
@@ -494,6 +499,74 @@ new ResizeObserver(function () { syncListHeight(); }).observe(detailCardEl); } + // ── 접수 리스트 ↔ 지정판매소 정보 사이 너비 조절(드래그 스플리터) ────── + // 손잡이를 접수 리스트 쪽(왼쪽)으로 끌면 리스트 폭이 줄고 지정판매소 정보 폭이 넓어진다. + const splitEl = document.getElementById('order-split'); + const listCardEl = document.getElementById('list-card'); + const splitHandleEl = document.getElementById('split-handle'); + const SPLIT_KEY = 'jrj_order_split_pct'; + const SPLIT_MIN = 25, SPLIT_MAX = 75, SPLIT_DEFAULT = 55.5; // 기본값 ≈ 기존 5:4 비율 + const xlMedia = window.matchMedia('(min-width: 1280px)'); + function clampPct(p) { return Math.min(SPLIT_MAX, Math.max(SPLIT_MIN, p)); } + function currentPct() { + const saved = parseFloat(localStorage.getItem(SPLIT_KEY) || ''); + return clampPct(isFinite(saved) ? saved : SPLIT_DEFAULT); + } + function applySplit(pct) { + if (!listCardEl) return; + if (xlMedia.matches) { + // 좌우 배치일 때만 폭 지정(세로로 쌓이는 좁은 화면에서는 전체폭 사용) + listCardEl.style.flex = '0 0 ' + pct + '%'; + listCardEl.style.maxWidth = pct + '%'; + } else { + listCardEl.style.flex = ''; + listCardEl.style.maxWidth = ''; + } + syncListHeight(); + } + if (splitHandleEl && splitEl && listCardEl) { + let dragging = false, rafId = 0, pendingPct = null; + function onMove(clientX) { + const rect = splitEl.getBoundingClientRect(); + if (rect.width <= 0) return; + pendingPct = clampPct((clientX - rect.left) / rect.width * 100); + if (!rafId) { + rafId = requestAnimationFrame(function () { + rafId = 0; + if (pendingPct != null) applySplit(pendingPct); + }); + } + } + function pointerMove(e) { if (dragging) { e.preventDefault(); onMove(e.clientX); } } + function pointerUp() { + if (!dragging) return; + dragging = false; + document.body.style.userSelect = ''; + document.body.style.cursor = ''; + window.removeEventListener('pointermove', pointerMove); + window.removeEventListener('pointerup', pointerUp); + if (pendingPct != null) localStorage.setItem(SPLIT_KEY, String(Math.round(pendingPct * 10) / 10)); + } + splitHandleEl.addEventListener('pointerdown', function (e) { + if (!xlMedia.matches) return; // 좁은 화면에서는 비활성 + e.preventDefault(); + dragging = true; + document.body.style.userSelect = 'none'; + document.body.style.cursor = 'col-resize'; + window.addEventListener('pointermove', pointerMove); + window.addEventListener('pointerup', pointerUp); + }); + // 더블클릭 시 기본 비율로 초기화 + splitHandleEl.addEventListener('dblclick', function () { + localStorage.removeItem(SPLIT_KEY); + applySplit(SPLIT_DEFAULT); + }); + // 브레이크포인트 전환 시 폭 지정 적용/해제 + (xlMedia.addEventListener ? xlMedia.addEventListener('change', function () { applySplit(currentPct()); }) + : xlMedia.addListener(function () { applySplit(currentPct()); })); + applySplit(currentPct()); + } + // ── 포장 명세 탭: 주문 품목을 박스/팩/낱장 단위 행으로 펼침 ────────── const packingBody = document.getElementById('packing-body'); const packingTotal = document.getElementById('packing-total');