fix: 전화 주문 접수 화면 2열 재배치(#19)

- 좌측(좁은 컬럼): 판매소 검색/선택 → 접수 정보 → 지정판매소 정보
  (결제/가상계좌를 지정판매소 정보 카드 안으로 병합)
- 우측(넓은 컬럼): 전화 주문접수표(일괄)를 최상단부터 표시
- 기존 결제/가상계좌가 있던 우측 자리를 접수표가 차지하도록 변경
This commit is contained in:
taekyoungc
2026-07-03 18:10:30 +09:00
parent 9d8e237eb0
commit 378dc4de38

View File

@@ -18,19 +18,22 @@
<?= csrf_field() ?> <?= csrf_field() ?>
<input type="hidden" name="return_to" value="bag/order/phone"/> <input type="hidden" name="return_to" value="bag/order/phone"/>
<div class="grid grid-cols-1 xl:grid-cols-3 gap-4"> <input type="hidden" name="so_delivery_date" value="<?= esc(date('Y-m-d', strtotime('+1 day'))) ?>"/>
<div class="xl:col-span-2 space-y-3">
<div class="flex flex-wrap items-center gap-2"> <div class="grid grid-cols-1 xl:grid-cols-3 gap-4 items-start">
<label class="block text-sm font-bold text-gray-700 w-28">판매소 검색</label> <!-- 좌측(좁게): 판매소 선택 → 접수정보 → 지정판매소 정보(+결제/가상계좌) -->
<div class="relative flex-1 min-w-[20rem]"> <div class="xl:col-span-1 space-y-3">
<input id="shop-search" class="border border-gray-300 rounded px-3 py-1.5 text-sm w-[34rem] max-w-full" type="text" autocomplete="off" placeholder="코드/사업자번호/대표자명/상호/전화/주소 중 하나 입력"/> <div>
<div id="shop-search-suggest" class="hidden absolute left-0 top-full mt-1 w-[48rem] max-w-[90vw] max-h-72 overflow-auto border border-gray-300 rounded-lg bg-white shadow-lg z-30"></div> <label class="block text-sm font-bold text-gray-700 mb-1">판매소 검색</label>
<div class="relative">
<input id="shop-search" class="border border-gray-300 rounded px-3 py-1.5 text-sm w-full" type="text" autocomplete="off" placeholder="코드/사업자번호/대표자명/상호/전화/주소"/>
<div id="shop-search-suggest" class="hidden absolute left-0 top-full mt-1 w-[28rem] max-w-[90vw] max-h-72 overflow-auto border border-gray-300 rounded-lg bg-white shadow-lg z-30"></div>
</div> </div>
</div> </div>
<div class="flex flex-wrap items-center gap-2"> <div>
<label class="block text-sm font-bold text-gray-700 w-28">판매소 선택 <span class="text-red-500">*</span></label> <label class="block text-sm font-bold text-gray-700 mb-1">판매소 선택 <span class="text-red-500">*</span></label>
<select id="shop-select" class="border border-gray-300 rounded px-3 py-1.5 text-sm w-[34rem] max-w-full" name="so_ds_idx" required> <select id="shop-select" class="border border-gray-300 rounded px-3 py-1.5 text-sm w-full" name="so_ds_idx" required>
<option value="">선택</option> <option value="">선택</option>
<?php foreach ($shops as $shop): ?> <?php foreach ($shops as $shop): ?>
<option <option
@@ -50,7 +53,6 @@
<?php endforeach; ?> <?php endforeach; ?>
</select> </select>
</div> </div>
</div>
<div class="border border-gray-300 rounded-lg p-2 bg-gray-50"> <div class="border border-gray-300 rounded-lg p-2 bg-gray-50">
<div class="text-sm font-bold text-gray-700 mb-2">접수 정보</div> <div class="text-sm font-bold text-gray-700 mb-2">접수 정보</div>
@@ -61,9 +63,7 @@
<tr><th class="text-left py-1">담당자</th><td class="py-1 text-gray-700"><?= esc((string) (session()->get('mb_name') ?? '담당자')) ?></td></tr> <tr><th class="text-left py-1">담당자</th><td class="py-1 text-gray-700"><?= esc((string) (session()->get('mb_name') ?? '담당자')) ?></td></tr>
</table> </table>
</div> </div>
</div>
<div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
<div class="border border-gray-300 rounded-lg p-2 bg-gray-50"> <div class="border border-gray-300 rounded-lg p-2 bg-gray-50">
<div class="text-sm font-bold text-gray-700 mb-2">지정판매소 정보</div> <div class="text-sm font-bold text-gray-700 mb-2">지정판매소 정보</div>
<table class="w-full text-sm"> <table class="w-full text-sm">
@@ -74,9 +74,7 @@
<tr><th class="text-left py-1">전화번호</th><td id="shop-info-tel" class="py-1 text-gray-700">-</td></tr> <tr><th class="text-left py-1">전화번호</th><td id="shop-info-tel" class="py-1 text-gray-700">-</td></tr>
<tr><th class="text-left py-1">주소</th><td id="shop-info-addr" class="py-1 text-gray-700">-</td></tr> <tr><th class="text-left py-1">주소</th><td id="shop-info-addr" class="py-1 text-gray-700">-</td></tr>
</table> </table>
</div> <div class="mt-3 pt-3 border-t border-gray-200">
<div class="border border-gray-300 rounded-lg p-2 bg-gray-50">
<div class="text-sm font-bold text-gray-700 mb-2">결제/가상계좌</div> <div class="text-sm font-bold text-gray-700 mb-2">결제/가상계좌</div>
<div class="flex flex-wrap items-center gap-2 mb-2"> <div class="flex flex-wrap items-center gap-2 mb-2">
<label class="block text-sm font-bold text-gray-700 w-24">결제구분 <span class="text-red-500">*</span></label> <label class="block text-sm font-bold text-gray-700 w-24">결제구분 <span class="text-red-500">*</span></label>
@@ -93,8 +91,7 @@
</div> </div>
</div> </div>
</div> </div>
</div><!-- /좌측 컬럼 -->
<input type="hidden" name="so_delivery_date" value="<?= esc(date('Y-m-d', strtotime('+1 day'))) ?>"/>
<?php <?php
// 일괄표: 봉투코드를 카테고리(일반용·재사용·음식물 스티커·대형폐기물 스티커)로 묶어 // 일괄표: 봉투코드를 카테고리(일반용·재사용·음식물 스티커·대형폐기물 스티커)로 묶어
@@ -137,7 +134,8 @@ foreach ($orderGroups as &$g) {
} }
unset($g); unset($g);
?> ?>
<div class="mt-4"> <!-- 우측(넓게): 전화 주문접수표(일괄) — 최상단부터 -->
<div class="xl:col-span-2">
<label class="block text-sm font-bold text-gray-700 mb-2">전화 주문접수표 (일괄)</label> <label class="block text-sm font-bold text-gray-700 mb-2">전화 주문접수표 (일괄)</label>
<style> <style>
/* 그룹 헤더(rowspan/colspan) 경계선이 단가까지 이어지는 현상 방지 — 헤더 맨 아래 한 줄만 */ /* 그룹 헤더(rowspan/colspan) 경계선이 단가까지 이어지는 현상 방지 — 헤더 맨 아래 한 줄만 */
@@ -237,7 +235,8 @@ unset($g);
</tfoot> </tfoot>
</table> </table>
</div> </div>
</div> </div><!-- /우측 컬럼 -->
</div><!-- /2열 그리드 -->
<div class="flex gap-2 pt-2"> <div class="flex gap-2 pt-2">
<button type="submit" class="bg-btn-search text-white px-6 py-1.5 rounded-sm text-sm shadow hover:opacity-90 transition">저장</button> <button type="submit" class="bg-btn-search text-white px-6 py-1.5 rounded-sm text-sm shadow hover:opacity-90 transition">저장</button>