style: 표/패널 UI 전면 통일 + 화면설명 드로어·글씨크기·탭 개선
표 디자인 - 모든 표를 가벼운 스타일로 통일(.data-table 경량화: 작은 회색 헤더·연한 구분선·hover) - 표/패널 바깥 테두리 둥글게(rounded-lg) 일괄 적용, 표 래퍼에 패딩 카드(p-4) 통일 - 표 헤더·데이터 정렬을 전 화면 좌측 기준으로 통일 - .data-table th/td text-align:left (전역), 흩어진 center/right 정렬 정리 - 재디자인 Tailwind 표(포장단위·단가·기본코드·담당자·업체·판매대행소·무료대상자·지정판매소)도 셀 좌측화 - 기본정보관리 등 나머지 소메뉴 표를 기본 코드 관리 스타일(가벼운 표·상태 pill)로 재디자인 워크스페이스/공통 - "이 화면 설명" → 새 탭 대신 우측 드로어 팝업(현재 화면과 동시에 보기, Esc·드래그 폭조절) - 상단바 글씨 크기 조절(A−/A+), 작업 내용에 zoom 적용 - 탭 최대치 도달 시 자동 삭제 대신 안내 토스트, "모두 닫기"(업무 현황 탭은 보존) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<span class="text-sm font-bold text-gray-700">지정판매소 판매</span>
|
||||
</section>
|
||||
|
||||
<div class="border border-gray-300 p-3 mt-2 bg-white space-y-3">
|
||||
<div class="border border-gray-300 rounded-lg p-3 mt-2 bg-white space-y-3">
|
||||
<form id="sale-save-form" action="<?= base_url('bag/sale/designated/save') ?>" method="POST">
|
||||
<?= csrf_field() ?>
|
||||
<input type="hidden" name="so_idx" id="save-so-idx" value=""/>
|
||||
@@ -18,7 +18,7 @@
|
||||
<option value="<?= esc(trim(($shop->ds_shop_no ?? '') . ' ' . ($shop->ds_name ?? '') . ' ' . ($shop->ds_rep_name ?? '') . ' ' . ($shop->ds_tel ?? '') . ' ' . ($shop->ds_addr ?? ''))) ?>"></option>
|
||||
<?php endforeach; ?>
|
||||
</datalist>
|
||||
<div id="shop-search-suggest" class="hidden absolute left-0 top-full mt-1 w-[36rem] max-w-full max-h-56 overflow-auto border border-gray-300 bg-white shadow-lg z-20"></div>
|
||||
<div id="shop-search-suggest" class="hidden absolute left-0 top-full mt-1 w-[36rem] max-w-full max-h-56 overflow-auto border border-gray-300 rounded-lg bg-white shadow-lg z-20"></div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-700 mb-1">봉투코드 입력(스캔)</label>
|
||||
@@ -35,7 +35,7 @@
|
||||
<div id="scan-message" class="text-sm text-gray-600"></div>
|
||||
|
||||
<div class="grid grid-cols-1 xl:grid-cols-5 gap-3">
|
||||
<section class="xl:col-span-2 border border-gray-300">
|
||||
<section class="xl:col-span-2 border border-gray-300 rounded-lg">
|
||||
<div class="px-3 py-2 border-b bg-gray-50 text-sm font-semibold text-gray-700">지정판매소 정보</div>
|
||||
<table class="w-full text-sm">
|
||||
<tr><th class="text-left px-3 py-1.5 w-28">판매소 코드</th><td id="shop-info-code" class="px-3 py-1.5">-</td></tr>
|
||||
@@ -46,17 +46,17 @@
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section class="xl:col-span-3 border border-gray-300">
|
||||
<section class="xl:col-span-3 border border-gray-300 rounded-lg">
|
||||
<div class="px-3 py-2 border-b bg-gray-50 text-sm font-semibold text-gray-700">주문 접수 리스트</div>
|
||||
<div class="max-h-56 overflow-auto">
|
||||
<table class="w-full data-table text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-14">번호</th>
|
||||
<th>판매소</th>
|
||||
<th class="w-28">접수일</th>
|
||||
<th class="w-28">배달일</th>
|
||||
<th class="w-16">상태</th>
|
||||
<th class="w-14 text-center">번호</th>
|
||||
<th class="text-left">판매소</th>
|
||||
<th class="w-28 text-center">접수일</th>
|
||||
<th class="w-28 text-center">배달일</th>
|
||||
<th class="w-16 text-center">상태</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="order-list-body"></tbody>
|
||||
@@ -79,14 +79,14 @@
|
||||
<table class="w-full data-table text-xs">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-28">출처</th>
|
||||
<th class="w-40">바코드(대표)</th>
|
||||
<th>봉투 종류</th>
|
||||
<th class="w-16">포장</th>
|
||||
<th class="w-10">수량</th>
|
||||
<th class="w-12">주문</th>
|
||||
<th class="w-14">상태</th>
|
||||
<th>비고(낱장범위 등)</th>
|
||||
<th class="w-28 text-left">출처</th>
|
||||
<th class="w-40 text-center">바코드(대표)</th>
|
||||
<th class="text-left">봉투 종류</th>
|
||||
<th class="w-16 text-center">포장</th>
|
||||
<th class="w-10 text-right">수량</th>
|
||||
<th class="w-12 text-center">주문</th>
|
||||
<th class="w-14 text-center">상태</th>
|
||||
<th class="text-left">비고(낱장범위 등)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dev-saleable-tbody">
|
||||
@@ -97,18 +97,18 @@
|
||||
</section>
|
||||
|
||||
<div class="grid grid-cols-1 xl:grid-cols-2 gap-3">
|
||||
<section class="border border-gray-300">
|
||||
<section class="border border-gray-300 rounded-lg">
|
||||
<div class="px-3 py-2 border-b bg-gray-50 text-sm font-semibold text-gray-700">판매 내역</div>
|
||||
<div class="max-h-72 overflow-auto">
|
||||
<table class="w-full data-table text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-14">선택</th>
|
||||
<th>봉투 종류</th>
|
||||
<th class="w-20">접수량</th>
|
||||
<th class="w-20">판매량</th>
|
||||
<th class="w-20">단가</th>
|
||||
<th class="w-24">판매금액</th>
|
||||
<th class="w-14 text-center">선택</th>
|
||||
<th class="text-left">봉투 종류</th>
|
||||
<th class="w-20 text-right">접수량</th>
|
||||
<th class="w-20 text-right">판매량</th>
|
||||
<th class="w-20 text-right">단가</th>
|
||||
<th class="w-24 text-right">판매금액</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="sale-items-body">
|
||||
@@ -118,16 +118,16 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="border border-gray-300">
|
||||
<section class="border border-gray-300 rounded-lg">
|
||||
<div class="px-3 py-2 border-b bg-gray-50 text-sm font-semibold text-gray-700">판매 상세 내역</div>
|
||||
<div class="max-h-72 overflow-auto">
|
||||
<table class="w-full data-table text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>봉투 종류</th>
|
||||
<th class="w-28">봉투 코드</th>
|
||||
<th class="w-16">수량</th>
|
||||
<th class="w-16">포장단위</th>
|
||||
<th class="text-left">봉투 종류</th>
|
||||
<th class="w-28 text-center">봉투 코드</th>
|
||||
<th class="w-16 text-right">수량</th>
|
||||
<th class="w-16 text-center">포장단위</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="scan-detail-body">
|
||||
|
||||
Reference in New Issue
Block a user