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:
taekyoungc
2026-06-11 17:26:36 +09:00
parent 912ffdbe23
commit a8afaf4af2
108 changed files with 1198 additions and 965 deletions

View File

@@ -2,7 +2,7 @@
<span class="text-sm font-bold text-gray-700">전화 주문 접수</span>
</section>
<div class="border border-gray-300 p-4 mt-2 bg-white">
<div class="border border-gray-300 rounded-lg p-4 mt-2 bg-white">
<?php if (session()->getFlashdata('success')): ?>
<div class="mb-3 border border-emerald-300 bg-emerald-50 text-emerald-800 px-3 py-2 rounded-sm text-sm">
<?= esc(session()->getFlashdata('success')) ?>
@@ -33,7 +33,7 @@
<label class="block text-sm font-bold text-gray-700 w-28">판매소 검색</label>
<div class="relative flex-1 min-w-[20rem]">
<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 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 bg-white shadow-lg z-30"></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>
</div>
</div>
@@ -61,7 +61,7 @@
</div>
</div>
<div class="border border-gray-300 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>
<table class="w-full text-sm">
<tr><th class="text-left w-28 py-1">접수번호</th><td class="py-1 text-gray-800 font-semibold"><?= esc((string) ($receiptNo ?? 1)) ?></td></tr>
@@ -73,7 +73,7 @@
</div>
<div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
<div class="border border-gray-300 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>
<table class="w-full text-sm">
<tr><th class="text-left w-28 py-1">코드</th><td id="shop-info-code" class="py-1 text-gray-700">-</td></tr>
@@ -85,7 +85,7 @@
</table>
</div>
<div class="border border-gray-300 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="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>
@@ -110,19 +110,19 @@
<label class="block text-sm font-bold text-gray-700">전화 주문접수표</label>
<button type="button" id="add-order-row" class="border border-gray-300 bg-white px-3 py-1 rounded-sm text-xs text-gray-700 hover:bg-gray-50">행 추가</button>
</div>
<div class="border border-gray-300 overflow-auto">
<div class="border border-gray-300 rounded-lg p-4 overflow-auto">
<table class="w-full data-table text-sm">
<thead>
<tr>
<th class="w-14">구분</th>
<th class="w-14 text-center">구분</th>
<th class="w-56">품목</th>
<th class="w-40">1박스(낱장/판매가)</th>
<th class="w-40">1팩(낱장/판매가)</th>
<th class="w-24">단가</th>
<th class="w-28">주문수량</th>
<th class="w-28">금액</th>
<th class="w-44">포장(박스/팩/낱장)</th>
<th class="w-20">삭제</th>
<th class="w-40 text-right">1박스(낱장/판매가)</th>
<th class="w-40 text-right">1팩(낱장/판매가)</th>
<th class="w-24 text-right">단가</th>
<th class="w-28 text-right">주문수량</th>
<th class="w-28 text-right">금액</th>
<th class="w-44 text-right">포장(박스/팩/낱장)</th>
<th class="w-20 text-center">삭제</th>
</tr>
</thead>
<tbody id="order-rows">