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

@@ -44,7 +44,7 @@ $sheetTotalDiff = $sheetTotalActual - $sheetTotalQty;
?>
<div class="space-y-2">
<section class="border border-gray-300 bg-white p-2">
<section class="border border-gray-300 rounded-lg bg-white p-2">
<form method="get" class="flex flex-wrap items-end justify-between gap-2 text-sm">
<div class="flex flex-wrap items-end gap-2">
<label class="font-bold text-gray-700">실사기간</label>
@@ -74,17 +74,17 @@ $sheetTotalDiff = $sheetTotalActual - $sheetTotalQty;
</section>
<section class="grid grid-cols-1 xl:grid-cols-2 gap-2">
<div class="border border-gray-300 bg-white">
<div class="border border-gray-300 rounded-lg bg-white">
<div class="border-b border-gray-300 bg-gray-50 px-2 py-1 text-sm font-bold text-gray-700">실사 선별자</div>
<div class="overflow-auto max-h-[500px]">
<table class="w-full data-table text-sm">
<thead>
<tr>
<th class="w-24">실사일자</th>
<th>종류</th>
<th class="w-40">박스</th>
<th class="w-20">전산재고</th>
<th class="w-20">실사재고</th>
<th class="w-24 text-center">실사일자</th>
<th class="text-left">종류</th>
<th class="w-40 text-center">박스</th>
<th class="w-20 text-right">전산재고</th>
<th class="w-20 text-right">실사재고</th>
</tr>
</thead>
<tbody>
@@ -134,7 +134,7 @@ $sheetTotalDiff = $sheetTotalActual - $sheetTotalQty;
</div>
<div class="space-y-2">
<div class="border border-gray-300 bg-white">
<div class="border border-gray-300 rounded-lg bg-white">
<div class="border-b border-gray-300 bg-gray-50 px-2 py-1 text-sm font-bold text-gray-700">실사 선별 품목(선택 박스 조회)</div>
<form method="post" action="<?= base_url('bag/inventory/inspection-select/save') ?>" id="inspection-save-form">
<?= csrf_field() ?>
@@ -152,13 +152,13 @@ $sheetTotalDiff = $sheetTotalActual - $sheetTotalQty;
<table class="w-full data-table text-sm">
<thead>
<tr>
<th>팩코드</th>
<th class="w-16">포장량</th>
<th class="w-16">재고</th>
<th class="w-20">실사재고</th>
<th class="w-16">차이</th>
<th>낱장(시작)</th>
<th>낱장(끝)</th>
<th class="text-left">팩코드</th>
<th class="w-16 text-center">포장량</th>
<th class="w-16 text-right">재고</th>
<th class="w-20 text-right">실사재고</th>
<th class="w-16 text-right">차이</th>
<th class="text-center">낱장(시작)</th>
<th class="text-center">낱장(끝)</th>
</tr>
</thead>
<tbody>
@@ -224,17 +224,17 @@ $sheetTotalDiff = $sheetTotalActual - $sheetTotalQty;
</form>
</div>
<div class="border border-gray-300 bg-white">
<div class="border border-gray-300 rounded-lg bg-white">
<div class="border-b border-gray-300 bg-gray-50 px-2 py-1 text-sm font-bold text-gray-700">실사 선별 내용(선택 낱장 코드 조회)</div>
<div class="overflow-auto max-h-[240px]">
<table class="w-full data-table text-sm">
<thead>
<tr>
<th class="w-12">No</th>
<th>낱장</th>
<th class="w-16">전산</th>
<th class="w-16">실사</th>
<th class="w-16">차이</th>
<th class="w-12 text-center">No</th>
<th class="text-left">낱장</th>
<th class="w-16 text-right">전산</th>
<th class="w-16 text-right">실사</th>
<th class="w-16 text-right">차이</th>
</tr>
</thead>
<tbody>
@@ -268,7 +268,7 @@ $sheetTotalDiff = $sheetTotalActual - $sheetTotalQty;
</table>
</div>
</div>
<div class="border border-gray-300 bg-white p-2 text-sm text-gray-600">
<div class="border border-gray-300 rounded-lg bg-white p-2 text-sm text-gray-600">
실사 저장 시 차이수량이 즉시 장부 재고에 반영됩니다.
</div>
</div>
@@ -276,7 +276,7 @@ $sheetTotalDiff = $sheetTotalActual - $sheetTotalQty;
</div>
<div id="inspection-popup" class="fixed inset-0 bg-black/40 hidden items-center justify-center z-[999]">
<div class="bg-white border border-gray-400 w-[min(720px,95vw)] max-h-[90vh] overflow-auto p-4">
<div class="bg-white border border-gray-400 rounded-lg w-[min(720px,95vw)] max-h-[90vh] overflow-auto p-4">
<div class="flex items-center justify-between mb-3">
<h3 class="text-lg font-bold">실사 선별</h3>
<button type="button" id="close-inspection-popup" class="text-gray-600 hover:text-gray-900">닫기</button>
@@ -288,10 +288,10 @@ $sheetTotalDiff = $sheetTotalActual - $sheetTotalQty;
<input type="date" name="work_date" value="<?= esc($workDate) ?>" class="border border-gray-300 rounded px-2 py-1 text-sm">
</div>
<p class="text-red-600 font-semibold">바코드가 없는 봉투는 실사에서 제외 됩니다.</p>
<div class="overflow-auto border border-gray-300 max-h-[55vh]">
<div class="overflow-auto border border-gray-300 rounded-lg max-h-[55vh]">
<table class="w-full data-table text-sm">
<thead>
<tr><th>종류</th><th class="w-20">선택구분</th></tr>
<tr><th class="text-left">종류</th><th class="w-20 text-center">선택구분</th></tr>
</thead>
<tbody>
<?php foreach ($popupItems as $row): ?>