feat(WEB): 자재/영업/품질 모듈 기능 개선 및 문서 컴포넌트 추가
- 입고관리: 상세/목록 UI 개선, actions 로직 강화 - 재고현황: 상세/목록 개선, StockAuditModal 신규 추가 - 영업주문관리: 페이지 구조 개선, OrderSalesDetailEdit 기능 강화 - 주문: OrderRegistration 개선, SalesOrderDocument 신규 추가 - 견적: QuoteTransactionModal 기능 개선 - 품질: InspectionModalV2, ImportInspectionDocument 대폭 개선 - UniversalListPage: 템플릿 기능 확장 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
유병철
647
src/components/orders/documents/SalesOrderDocument.tsx
Normal file
647
src/components/orders/documents/SalesOrderDocument.tsx
Normal file
@@ -0,0 +1,647 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* 수주서 문서 컴포넌트
|
||||
* - 스크린샷 기반 디자인
|
||||
* - 제목 좌측, 결재란 우측
|
||||
* - 신청업체/신청내용/납품정보 3열 구조
|
||||
* - 스크린, 모터, 절곡물 테이블
|
||||
*/
|
||||
|
||||
import { getTodayString } from "@/utils/date";
|
||||
import { OrderItem } from "../actions";
|
||||
import { ProductInfo } from "./OrderDocumentModal";
|
||||
|
||||
interface SalesOrderDocumentProps {
|
||||
documentNumber?: string;
|
||||
orderNumber: string; // 로트번호
|
||||
certificationNumber?: string; // 인정번호
|
||||
orderDate?: string;
|
||||
client: string;
|
||||
siteName?: string;
|
||||
manager?: string;
|
||||
managerContact?: string;
|
||||
deliveryRequestDate?: string;
|
||||
expectedShipDate?: string;
|
||||
deliveryMethod?: string;
|
||||
address?: string;
|
||||
recipientName?: string;
|
||||
recipientContact?: string;
|
||||
shutterCount?: number;
|
||||
items?: OrderItem[];
|
||||
products?: ProductInfo[];
|
||||
remarks?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 수량 포맷 함수
|
||||
*/
|
||||
function formatQuantity(quantity: number, unit?: string): string {
|
||||
const countableUnits = ["EA", "SET", "PCS", "개", "세트", "BOX", "ROLL"];
|
||||
const upperUnit = (unit || "").toUpperCase();
|
||||
|
||||
if (countableUnits.includes(upperUnit)) {
|
||||
return Math.round(quantity).toLocaleString();
|
||||
}
|
||||
|
||||
const rounded = Math.round(quantity * 10000) / 10000;
|
||||
return rounded.toLocaleString(undefined, {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 4
|
||||
});
|
||||
}
|
||||
|
||||
export function SalesOrderDocument({
|
||||
documentNumber = "ABC123",
|
||||
orderNumber,
|
||||
certificationNumber = "-",
|
||||
orderDate = getTodayString(),
|
||||
client,
|
||||
siteName = "-",
|
||||
manager = "-",
|
||||
managerContact = "-",
|
||||
deliveryRequestDate = "-",
|
||||
expectedShipDate = "-",
|
||||
deliveryMethod = "상차",
|
||||
address = "-",
|
||||
recipientName = "-",
|
||||
recipientContact = "-",
|
||||
shutterCount = 0,
|
||||
items = [],
|
||||
products = [],
|
||||
remarks,
|
||||
}: SalesOrderDocumentProps) {
|
||||
// 스크린 제품만 필터링
|
||||
const screenProducts = products.filter(p =>
|
||||
p.productCategory?.includes("스크린") ||
|
||||
p.productName?.includes("스크린") ||
|
||||
p.productName?.includes("방화") ||
|
||||
p.productName?.includes("셔터")
|
||||
);
|
||||
|
||||
// 모터 아이템 필터링
|
||||
const motorItems = items.filter(item =>
|
||||
item.itemName?.toLowerCase().includes("모터") ||
|
||||
item.type?.includes("모터") ||
|
||||
item.itemCode?.startsWith("MT")
|
||||
);
|
||||
|
||||
// 브라켓 아이템 필터링
|
||||
const bracketItems = items.filter(item =>
|
||||
item.itemName?.includes("브라켓") ||
|
||||
item.type?.includes("브라켓")
|
||||
);
|
||||
|
||||
// 가이드레일 아이템 필터링
|
||||
const guideRailItems = items.filter(item =>
|
||||
item.itemName?.includes("가이드") ||
|
||||
item.itemName?.includes("레일") ||
|
||||
item.type?.includes("가이드")
|
||||
);
|
||||
|
||||
// 케이스 아이템 필터링
|
||||
const caseItems = items.filter(item =>
|
||||
item.itemName?.includes("케이스") ||
|
||||
item.itemName?.includes("셔터박스") ||
|
||||
item.type?.includes("케이스")
|
||||
);
|
||||
|
||||
// 하단마감재 아이템 필터링
|
||||
const bottomFinishItems = items.filter(item =>
|
||||
item.itemName?.includes("하단") ||
|
||||
item.itemName?.includes("마감") ||
|
||||
item.type?.includes("하단마감")
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="bg-white p-8 min-h-full text-[11px]">
|
||||
{/* 헤더: 수주서 제목 (좌측) + 결재란 (우측) */}
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
{/* 수주서 제목 (좌측) */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-widest mb-2">수 주 서</h1>
|
||||
<div className="text-[10px] space-y-1">
|
||||
<div className="flex gap-4">
|
||||
<span>문서번호: <strong>{documentNumber}</strong></span>
|
||||
<span>작성일자: <strong>{orderDate}</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 결재란 (우측) */}
|
||||
<table className="border border-gray-400 text-[10px]">
|
||||
<thead>
|
||||
<tr className="bg-gray-100">
|
||||
<th className="border-r border-gray-400 px-3 py-1">작성</th>
|
||||
<th className="border-r border-gray-400 px-3 py-1">승인</th>
|
||||
<th className="border-r border-gray-400 px-3 py-1">승인</th>
|
||||
<th className="px-3 py-1">승인</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-t border-gray-400">
|
||||
<td className="border-r border-gray-400 h-6 w-12 text-center text-[9px] text-gray-500">과장</td>
|
||||
<td className="border-r border-gray-400 h-6 w-12 text-center"></td>
|
||||
<td className="border-r border-gray-400 h-6 w-12 text-center"></td>
|
||||
<td className="h-6 w-12 text-center"></td>
|
||||
</tr>
|
||||
<tr className="border-t border-gray-400">
|
||||
<td className="border-r border-gray-400 h-6 w-12 text-center text-[9px]">홍길동</td>
|
||||
<td className="border-r border-gray-400 h-6 w-12 text-center text-[9px]">이름</td>
|
||||
<td className="border-r border-gray-400 h-6 w-12 text-center text-[9px]">이름</td>
|
||||
<td className="h-6 w-12 text-center text-[9px]">이름</td>
|
||||
</tr>
|
||||
<tr className="border-t border-gray-400">
|
||||
<td className="border-r border-gray-400 h-6 w-12 text-center text-[9px] text-gray-500">부서명</td>
|
||||
<td className="border-r border-gray-400 h-6 w-12 text-center text-[9px] text-gray-500">부서명</td>
|
||||
<td className="border-r border-gray-400 h-6 w-12 text-center text-[9px] text-gray-500">부서명</td>
|
||||
<td className="h-6 w-12 text-center text-[9px] text-gray-500">부서명</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 로트번호 / 인정번호 */}
|
||||
<div className="flex justify-end gap-8 mb-3 text-[10px]">
|
||||
<div className="flex items-center gap-2 border border-gray-400 px-3 py-1">
|
||||
<span className="bg-gray-100 px-2 py-0.5 font-medium">로트번호</span>
|
||||
<span>{orderNumber}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 border border-gray-400 px-3 py-1">
|
||||
<span className="bg-gray-100 px-2 py-0.5 font-medium">인정번호</span>
|
||||
<span>{certificationNumber}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 상품명/제품명 라인 */}
|
||||
<div className="flex gap-4 mb-3 text-[10px]">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">상품명</span>
|
||||
<span>{products[0]?.productCategory || "screen"}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">제품명</span>
|
||||
<span>{products[0]?.productName || "-"}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3열 섹션: 신청업체 | 신청내용 | 납품정보 */}
|
||||
<div className="border border-gray-400 mb-4">
|
||||
<div className="grid grid-cols-3">
|
||||
{/* 신청업체 */}
|
||||
<div className="border-r border-gray-400">
|
||||
<div className="bg-gray-200 text-center py-1 font-bold border-b border-gray-400">신청업체</div>
|
||||
<table className="w-full">
|
||||
<tbody>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="bg-gray-100 px-2 py-1 w-20 font-medium">수주일</td>
|
||||
<td className="px-2 py-1">{orderDate}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">업체명</td>
|
||||
<td className="px-2 py-1">{client}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">수주 담당자</td>
|
||||
<td className="px-2 py-1">{manager}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">담당자 연락처</td>
|
||||
<td className="px-2 py-1">{managerContact}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">배송지 주소</td>
|
||||
<td className="px-2 py-1">{address}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 신청내용 */}
|
||||
<div className="border-r border-gray-400">
|
||||
<div className="bg-gray-200 text-center py-1 font-bold border-b border-gray-400">신청내용</div>
|
||||
<table className="w-full">
|
||||
<tbody>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="bg-gray-100 px-2 py-1 w-20 font-medium">현장명</td>
|
||||
<td className="px-2 py-1">{siteName}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">납기요청일</td>
|
||||
<td className="px-2 py-1">{deliveryRequestDate}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">출고일</td>
|
||||
<td className="px-2 py-1">{expectedShipDate}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">셔터출수량</td>
|
||||
<td className="px-2 py-1">{shutterCount}개소</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium"> </td>
|
||||
<td className="px-2 py-1"> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 납품정보 */}
|
||||
<div>
|
||||
<div className="bg-gray-200 text-center py-1 font-bold border-b border-gray-400">납품정보</div>
|
||||
<table className="w-full">
|
||||
<tbody>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="bg-gray-100 px-2 py-1 w-20 font-medium">현장명</td>
|
||||
<td className="px-2 py-1">{siteName}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">인수담당자</td>
|
||||
<td className="px-2 py-1">{recipientName}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">인수자연락처</td>
|
||||
<td className="px-2 py-1">{recipientContact}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">배송방법</td>
|
||||
<td className="px-2 py-1">{deliveryMethod}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium"> </td>
|
||||
<td className="px-2 py-1"> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-[10px] mb-4">아래와 같이 주문하오니 품질 및 납기일을 준수하여 주시기 바랍니다.</p>
|
||||
|
||||
{/* 1. 스크린 테이블 */}
|
||||
<div className="mb-4">
|
||||
<p className="font-bold mb-2">1. 스크린</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className="border-r border-gray-400 px-1 py-1 w-8" rowSpan={2}>No</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1 w-16" rowSpan={2}>품류</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>부호</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1" colSpan={2}>오픈사이즈</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1" colSpan={2}>제작사이즈</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1 w-24" rowSpan={2}>가이드레일<br/>유형</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>샤프트<br/>(인치)</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>케이스<br/>(인치)</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1" colSpan={2}>모터</th>
|
||||
<th className="px-1 py-1 w-16" rowSpan={2}>마감</th>
|
||||
</tr>
|
||||
<tr className="bg-gray-50 border-b border-gray-400 text-[9px]">
|
||||
<th className="border-r border-gray-400 px-1">가로</th>
|
||||
<th className="border-r border-gray-400 px-1">세로</th>
|
||||
<th className="border-r border-gray-400 px-1">가로</th>
|
||||
<th className="border-r border-gray-400 px-1">세로</th>
|
||||
<th className="border-r border-gray-400 px-1">브라켓트</th>
|
||||
<th className="border-r border-gray-400 px-1">용량Kg</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{screenProducts.length > 0 ? (
|
||||
screenProducts.map((product, index) => (
|
||||
<tr key={index} className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">{index + 1}</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">{product.productCategory || "-"}</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">{product.code || "-"}</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">{product.openWidth || "-"}</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">{product.openHeight || "-"}</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">{product.openWidth || "-"}</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">{product.openHeight || "-"}</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center text-[9px]">백면형<br/>(120X70)</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">5</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">5</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">380X180</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">300</td>
|
||||
<td className="px-1 py-1 text-center">SUS마감</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={13} className="px-2 py-3 text-center text-gray-400">
|
||||
등록된 스크린 제품이 없습니다
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2. 모터 테이블 */}
|
||||
<div className="mb-4">
|
||||
<p className="font-bold mb-2">2. 모터</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-28">항목</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">구분</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-28">규격</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-14">수량</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-28">항목</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">구분</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-28">규격</th>
|
||||
<th className="px-2 py-1 w-14">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(motorItems.length > 0 || bracketItems.length > 0) ? (
|
||||
<>
|
||||
{/* 모터 행 */}
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1">모터(380V 단상)</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">모터 용량</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">{motorItems[0]?.spec || "KD-150K"}</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">{motorItems[0] ? formatQuantity(motorItems[0].quantity, motorItems[0].unit) : "6"}</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">모터(380V 단상)</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">모터 용량</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">{motorItems[1]?.spec || "KD-150K"}</td>
|
||||
<td className="px-2 py-1 text-center">{motorItems[1] ? formatQuantity(motorItems[1].quantity, motorItems[1].unit) : "6"}</td>
|
||||
</tr>
|
||||
{/* 브라켓트 행 */}
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">{bracketItems[0]?.spec || "380X180 [2-4\"]"}</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">{bracketItems[0] ? formatQuantity(bracketItems[0].quantity, bracketItems[0].unit) : "6"}</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">{bracketItems[1]?.spec || "380X180 [2-4\"]"}</td>
|
||||
<td className="px-2 py-1 text-center">{bracketItems[1] ? formatQuantity(bracketItems[1].quantity, bracketItems[1].unit) : "6"}</td>
|
||||
</tr>
|
||||
{/* 브라켓트 추가 행 (밑침통 영금) */}
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">밑침통 영금</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">{bracketItems[2]?.spec || "∠40-40 L380"}</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">{bracketItems[2] ? formatQuantity(bracketItems[2].quantity, bracketItems[2].unit) : "44"}</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1"></td>
|
||||
<td className="border-r border-gray-300 px-2 py-1"></td>
|
||||
<td className="border-r border-gray-300 px-2 py-1"></td>
|
||||
<td className="px-2 py-1 text-center"></td>
|
||||
</tr>
|
||||
</>
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={8} className="px-2 py-3 text-center text-gray-400">
|
||||
등록된 모터/브라켓 품목이 없습니다
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3. 절곡물 */}
|
||||
<div className="mb-4">
|
||||
<p className="font-bold mb-2">3. 절곡물</p>
|
||||
|
||||
{/* 3-1. 가이드레일 */}
|
||||
<div className="mb-3">
|
||||
<p className="text-[10px] font-medium mb-1">3-1. 가이드레일 - EGI 1.5ST + 마감재 EGI 1.1ST + 별도마감재 SUS 1.1ST</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-24">백면형 (120X70)</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-24">측면형 (120X120)</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
|
||||
<th className="px-2 py-1 w-12">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{guideRailItems.length > 0 ? (
|
||||
<>
|
||||
{/* 1행: L: 3,000 / 22 */}
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={4}>
|
||||
<div className="flex items-center justify-center h-20 border border-dashed border-gray-300">
|
||||
IMG
|
||||
</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">L: 3,000</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">22</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={4}>
|
||||
<div className="flex items-center justify-center h-20 border border-dashed border-gray-300">
|
||||
IMG
|
||||
</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">L: 3,000</td>
|
||||
<td className="px-2 py-1 text-center">22</td>
|
||||
</tr>
|
||||
{/* 2행: 하부BASE */}
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">하부BASE<br/>[130X80]</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">22</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center"></td>
|
||||
<td className="px-2 py-1 text-center"></td>
|
||||
</tr>
|
||||
{/* 3행: 빈 행 */}
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center"></td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center"></td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center"></td>
|
||||
<td className="px-2 py-1 text-center"></td>
|
||||
</tr>
|
||||
{/* 4행: 제품명 */}
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center bg-gray-100">제품명</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">KSS01</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center bg-gray-100">제품명</td>
|
||||
<td className="px-2 py-1 text-center">KSS01</td>
|
||||
</tr>
|
||||
</>
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-2 py-2 text-center text-gray-400">
|
||||
등록된 가이드레일이 없습니다
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 연기차단재 정보 */}
|
||||
<div className="mt-2 border border-gray-400">
|
||||
<table className="w-full text-[10px]">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
|
||||
<div className="font-medium">연기차단재(W50)</div>
|
||||
<div>• 가이드레일 마감재</div>
|
||||
<div className="text-red-600 font-medium">양측에 설치</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
|
||||
<div>EGI 0.8T +</div>
|
||||
<div>화이버글라스코팅직물</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400 w-20" rowSpan={2}>
|
||||
<div className="flex items-center justify-center h-10 border border-dashed border-gray-300">
|
||||
IMG
|
||||
</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 bg-gray-100">규격</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">3,000</td>
|
||||
<td className="px-2 py-1 text-center">4,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="border-r border-gray-300 px-2 py-1 bg-gray-100">수량</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">44</td>
|
||||
<td className="px-2 py-1 text-center">1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 text-[10px]">
|
||||
<span className="font-medium">• 별도 추가사항</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3-2. 케이스(셔터박스) */}
|
||||
<div className="mb-3">
|
||||
<p className="text-[10px] font-medium mb-1">3-2. 케이스(셔터박스) - EGI 1.5ST</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-24"> </th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-24">규격</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">길이</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">측면부</th>
|
||||
<th className="px-2 py-1 w-12">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{caseItems.length > 0 ? (
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={3}>
|
||||
<div className="flex items-center justify-center h-16 border border-dashed border-gray-300">
|
||||
IMG
|
||||
</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
|
||||
500X330<br/>(150X300,<br/>400K원)
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
|
||||
L: 4,000<br/>L: 5,000<br/>상부덮개<br/>(1219X389)
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
|
||||
3<br/>4<br/>55
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">500X355</td>
|
||||
<td className="px-2 py-1 text-center">22</td>
|
||||
</tr>
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-2 py-2 text-center text-gray-400">
|
||||
등록된 케이스가 없습니다
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 연기차단재 정보 */}
|
||||
<div className="mt-2 border border-gray-400">
|
||||
<table className="w-full text-[10px]">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
|
||||
<div className="font-medium">연기차단재(W50)</div>
|
||||
<div>• 판넬부, 전면부</div>
|
||||
<div className="text-red-600 font-medium">감싸에 설치</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
|
||||
<div>EGI 0.8T +</div>
|
||||
<div>화이버글라스코팅직물</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400 w-20" rowSpan={2}>
|
||||
<div className="flex items-center justify-center h-10 border border-dashed border-gray-300">
|
||||
IMG
|
||||
</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 bg-gray-100">규격</td>
|
||||
<td className="px-2 py-1 text-center">3,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="border-r border-gray-300 px-2 py-1 bg-gray-100">수량</td>
|
||||
<td className="px-2 py-1 text-center">44</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3-3. 하단마감재 */}
|
||||
<div className="mb-3">
|
||||
<p className="text-[10px] font-medium mb-1">3-3. 하단마감재 - 하단마감재(EGI 1.5ST) + 하단보강앨비(EGI 1.5ST) + 하단 보강철(EGI 1.1ST) + 하단 무게형 철(50X12T)</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
|
||||
<th className="px-2 py-1 w-12">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{bottomFinishItems.length > 0 ? (
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단마감재<br/>(60X40)</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">11</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단보강<br/>(60X17)</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">11</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단무게<br/>[50X12T]</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
|
||||
<td className="px-2 py-1 text-center">11</td>
|
||||
</tr>
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={9} className="px-2 py-2 text-center text-gray-400">
|
||||
등록된 하단마감재가 없습니다
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 특이사항 */}
|
||||
{remarks && (
|
||||
<div className="mb-4">
|
||||
<p className="font-bold mb-2">【 특이사항 】</p>
|
||||
<div className="border border-gray-400 p-3 min-h-[40px]">
|
||||
{remarks}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user