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

@@ -88,23 +88,23 @@
<?php if ($deleteMode): ?>
<form action="<?= base_url('bag/order/delete') ?>" method="post" class="mt-2 space-y-2">
<?= csrf_field() ?>
<div class="border border-gray-300 bg-white p-2 text-sm">
<div class="border border-gray-300 rounded-lg bg-white p-2 text-sm">
<span class="font-bold text-gray-700">발주월</span>
<span class="ml-2"><?= esc($defaultOrderMonth) ?></span>
<span class="text-gray-600 ml-2">왼쪽 목록에서 삭제할 발주를 선택한 뒤 「삭제 실행」을 누르세요.</span>
</div>
<div class="grid grid-cols-1 xl:grid-cols-12 gap-2">
<section class="xl:col-span-5 border border-gray-300 bg-white">
<section class="xl:col-span-5 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-[410px]">
<table class="w-full data-table text-sm">
<thead>
<tr>
<th class="w-10">선택</th>
<th class="w-28">발주일</th>
<th>제작업체</th>
<th>입고처</th>
<th class="w-16">상태</th>
<th class="w-10 text-center">선택</th>
<th class="w-28 text-center">발주일</th>
<th class="text-left">제작업체</th>
<th class="text-left">입고처</th>
<th class="w-16 text-center">상태</th>
</tr>
</thead>
<tbody>
@@ -171,7 +171,7 @@
<input type="hidden" name="order_return_month" value="<?= esc($orderReturnMonth) ?>" />
<?php endif; ?>
<div class="border border-gray-300 bg-white p-2">
<div class="border border-gray-300 rounded-lg bg-white p-2">
<div class="flex flex-wrap items-center gap-4 text-sm">
<div class="flex items-center gap-2">
<label for="bo_order_month_ui" class="font-bold text-gray-700">발주월</label>
@@ -189,16 +189,16 @@
</div>
<div class="grid grid-cols-1 xl:grid-cols-12 gap-2">
<section class="xl:col-span-5 border border-gray-300 bg-white">
<section class="xl:col-span-5 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-[410px]">
<table class="w-full data-table text-sm">
<thead>
<tr>
<th class="w-28">발주일</th>
<th>제작업체</th>
<th>입고처</th>
<th class="w-16">상태</th>
<th class="w-28 text-center">발주일</th>
<th class="text-left">제작업체</th>
<th class="text-left">입고처</th>
<th class="w-16 text-center">상태</th>
</tr>
</thead>
<tbody>
@@ -222,7 +222,7 @@
</div>
</section>
<section class="xl:col-span-7 border border-gray-300 bg-white">
<section class="xl:col-span-7 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"><?= $editMode ? '발주 변경 수정' : '발주 Form' ?></div>
<div class="p-2 space-y-2">
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
@@ -265,21 +265,21 @@
</div>
</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 order-input-table" id="order-item-table">
<thead>
<tr>
<th class="w-12">번호</th>
<th class="w-16">선택</th>
<th>품명</th>
<th class="w-24">수량</th>
<th class="w-24">단가</th>
<th class="w-24">낱장환산</th>
<th class="w-12 text-center">번호</th>
<th class="w-16 text-center">선택</th>
<th class="text-left">품명</th>
<th class="w-24 text-right">수량</th>
<th class="w-24 text-right">단가</th>
<th class="w-24 text-right">낱장환산</th>
<?php if ($editMode): ?>
<th class="w-24">선정수량</th>
<th class="w-20">LOT</th>
<th class="w-24 text-right">선정수량</th>
<th class="w-20 text-center">LOT</th>
<?php endif; ?>
<th class="w-28">금액</th>
<th class="w-28 text-right">금액</th>
</tr>
</thead>
<tbody id="selected-order-items-body"></tbody>
@@ -299,7 +299,7 @@
</table>
</div>
<div class="border border-gray-300 bg-gray-50 p-2 text-sm">
<div class="border border-gray-300 rounded-lg bg-gray-50 p-2 text-sm">
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-1">
<div class="flex items-center justify-between">
<span class="text-gray-700">품목 금액 합계</span>
@@ -331,19 +331,19 @@
</section>
</div>
<section class="border border-gray-300 bg-white">
<section 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">
<table class="w-full data-table text-sm order-reference-table">
<thead>
<tr>
<th class="w-12">번호</th>
<th class="w-20">선택</th>
<th>봉투 종류</th>
<th class="w-24">발주단가</th>
<th class="w-24">Box당 팩</th>
<th class="w-24">팩당 낱장</th>
<th class="w-28">1박스 총 낱장</th>
<th class="w-12 text-center">번호</th>
<th class="w-20 text-center">선택</th>
<th class="text-left">봉투 종류</th>
<th class="w-24 text-right">발주단가</th>
<th class="w-24 text-right">Box당 팩</th>
<th class="w-24 text-right">팩당 낱장</th>
<th class="w-28 text-right">1박스 총 낱장</th>
</tr>
</thead>
<tbody>