feat: [부서관리] 기능 보완 - 필드 확장, 검색/필터, UI 개선

- Department 타입에 code, description, isActive, sortOrder 필드 추가
- DepartmentDialog: Zod + react-hook-form 폼 검증 (5개 필드)
- DepartmentToolbar: 상태 필터(전체/활성/비활성) + 검색 기능
- DepartmentTree: 트리 필터링 (검색어 + 상태)
- DepartmentTreeItem: 코드 Badge, 부서명 볼드, 설명 표시, 체크박스 크기 조정
- convertApiToLocal에서 누락 필드 매핑 복원

src/components/orders/actions.ts

@@ -1256,3 +1256,14 @@ export async function getQuotesForSelect(params?: {
     },
   };
 }
+
+/**
+ * 수주서 문서용 상세 데이터 조회
+ * BOM 기반 products, motors, bending_parts, subsidiary_parts 포함
+ */
+export async function getOrderDocumentDetail(orderId: string) {
+  return executeServerAction({
+    url: buildApiUrl(`/api/v1/qms/lot-audit/documents/order/${orderId}`),
+    errorMessage: '수주서 문서 데이터 조회에 실패했습니다.',
+  });
+}

src/components/orders/documents/OrderDocumentModal.tsx

@@ -12,7 +12,7 @@ import { ContractDocument } from "./ContractDocument";
 import { TransactionDocument } from "./TransactionDocument";
 import { PurchaseOrderDocument } from "./PurchaseOrderDocument";
 import { SalesOrderDocument } from "./SalesOrderDocument";
-import { OrderItem } from "../actions";
+import { OrderItem, getOrderDocumentDetail } from "../actions";
 import { getCompanyInfo } from "@/components/settings/CompanyInfoManagement/actions";
 
 // 문서 타입
@@ -54,6 +54,7 @@ export interface OrderDocumentData {
   recipientContact?: string;
   shutterCount?: number;
   fee?: number;
+  orderId?: number;
 }
 
 interface OrderDocumentModalProps {
@@ -79,6 +80,8 @@ export function OrderDocumentModal({
   data,
 }: OrderDocumentModalProps) {
   const [companyInfo, setCompanyInfo] = useState<CompanyInfo | null>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [orderDetail, setOrderDetail] = useState<Record<string, any> | null>(null);
 
   // 모달이 열릴 때 회사 정보 조회
   useEffect(() => {
@@ -97,6 +100,21 @@ export function OrderDocumentModal({
     }
   }, [open, companyInfo]);
 
+  // 수주서일 때 BOM 상세 데이터 로드
+  useEffect(() => {
+    if (!open || documentType !== 'salesOrder' || !data.orderId) {
+      setOrderDetail(null);
+      return;
+    }
+    getOrderDocumentDetail(String(data.orderId)).then((result) => {
+      if (result.success && result.data) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const raw = result.data as Record<string, any>;
+        setOrderDetail(raw?.data ?? raw);
+      }
+    });
+  }, [open, documentType, data.orderId]);
+
   const getDocumentTitle = () => {
     switch (documentType) {
       case "contract":
@@ -186,6 +204,12 @@ export function OrderDocumentModal({
             items={data.items || []}
             products={data.products}
             remarks={data.remarks}
+            productRows={orderDetail?.products || []}
+            motorsLeft={orderDetail?.motors?.left || []}
+            motorsRight={orderDetail?.motors?.right || []}
+            bendingParts={orderDetail?.bending_parts || []}
+            subsidiaryParts={orderDetail?.subsidiary_parts || []}
+            categoryCode={orderDetail?.category_code}
           />
         );
       default:

src/components/orders/documents/SalesOrderDocument.tsx

@@ -14,6 +14,51 @@ import { ProductInfo } from "./OrderDocumentModal";
 import { ConstructionApprovalTable } from "@/components/document-system";
 import { formatNumber } from '@/lib/utils/amount';
 
+// ===== 데이터 타입 =====
+
+interface MotorRow {
+  item: string;
+  type: string;
+  spec: string;
+  qty: number;
+}
+
+interface BendingItem {
+  name: string;
+  spec: string;
+  qty: number;
+}
+
+interface BendingGroup {
+  group: string;
+  items: BendingItem[];
+}
+
+interface SubsidiaryItem {
+  name: string;
+  spec: string;
+  qty: number;
+}
+
+interface ProductRow {
+  no: number;
+  floor?: string;
+  symbol?: string;
+  product_name?: string;
+  product_type?: string;
+  open_width?: number | string;
+  open_height?: number | string;
+  made_width?: number | string;
+  made_height?: number | string;
+  guide_rail?: string;
+  shaft?: string | number;
+  case_inch?: string | number;
+  bracket?: string;
+  capacity?: string | number;
+  finish?: string;
+  joint_bar?: number | null;
+}
+
 interface SalesOrderDocumentProps {
   documentNumber?: string;
   orderNumber: string;
@@ -34,61 +79,15 @@ interface SalesOrderDocumentProps {
   items?: OrderItem[];
   products?: ProductInfo[];
   remarks?: string;
+  // 실 데이터 props
+  productRows?: ProductRow[];
+  motorsLeft?: MotorRow[];
+  motorsRight?: MotorRow[];
+  bendingParts?: BendingGroup[];
+  subsidiaryParts?: SubsidiaryItem[];
+  categoryCode?: string;
 }
 
-// ===== 문서 전용 목데이터 (출고증과 동일 구조) =====
-
-const MOCK_SCREEN_ROWS = [
-  { no: 1, type: '이(마)', code: 'FA123', openW: 4300, openH: 4300, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
-  { no: 2, type: '이(마)', code: 'FA123', openW: 4300, openH: 4300, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
-];
-
-const MOCK_STEEL_ROWS = [
-  { no: 1, code: 'FA123', openW: 4300, openH: 3000, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, jointBar: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
-  { no: 2, code: 'FA123', openW: 4300, openH: 3000, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, jointBar: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
-];
-
-const MOCK_MOTOR_LEFT = [
-  { item: '모터', type: '380V 단상', spec: 'KD-150K', qty: 6 },
-  { item: '브라켓트', type: '-', spec: '380X180', qty: 6 },
-  { item: '앵글', type: '밑침통 영금', spec: '40*40*380', qty: 4 },
-];
-
-const MOCK_MOTOR_RIGHT = [
-  { item: '전동개폐기', type: '릴박스', spec: '-', qty: 1 },
-  { item: '전동개폐기', type: '매입', spec: '-', qty: 1 },
-];
-
-const MOCK_GUIDE_RAIL_ITEMS = [
-  { name: '항목명', spec: 'L: 3,000', qty: 22 },
-  { name: '하부BASE', spec: '130X80', qty: 22 },
-];
-
-const MOCK_GUIDE_SMOKE = { name: '연기차단재(W50)', spec: '2,438', qty: 4 };
-
-const MOCK_CASE_ITEMS = [
-  { name: '500X330', spec: 'L: 4,000', qty: 3 },
-  { name: '500X330', spec: 'L: 5,000', qty: 4 },
-  { name: '상부덮개', spec: '1219X389', qty: 55 },
-  { name: '측면부 (마구리)', spec: '500X355', qty: '500X355' },
-];
-
-const MOCK_CASE_SMOKE = { name: '연기차단재(W80)', spec: '3,000', qty: 4 };
-
-const MOCK_BOTTOM_SCREEN = [
-  { name: '하단마감재', spec: '60X40', l1: 'L: 3,000', q1: 6, name2: '하단마감재', spec2: '60X40', l2: 'L: 4,000', q2: 6 },
-  { name: '하단보강엘비', spec: '60X17', l1: 'L: 3,000', q1: 6, name2: '하단보강엘비', spec2: '60X17', l2: 'L: 4,000', q2: 6 },
-  { name: '하단보강평철', spec: '-', l1: 'L: 3,000', q1: 6, name2: '하단보강평철', spec2: '-', l2: 'L: 4,000', q2: 6 },
-  { name: '하단무게평철', spec: '50X12T', l1: 'L: 3,000', q1: 6, name2: '하단무게평철', spec2: '50X12T', l2: 'L: 4,000', q2: 6 },
-];
-
-const MOCK_BOTTOM_STEEL = { spec: '60X40', length: 'L: 3,000', qty: 22 };
-
-const MOCK_SUBSIDIARY = [
-  { leftItem: '감기사프트', leftSpec: '4인치 4500', leftQty: 6, rightItem: '각파이프', rightSpec: '6000', rightQty: 4 },
-  { leftItem: '조인트바', leftSpec: '300', leftQty: 6, rightItem: '환봉', rightSpec: '3000', rightQty: 5 },
-];
-
 // ===== 공통 스타일 =====
 const thBase = 'border-r border-gray-400 px-1 py-1';
 const tdBase = 'border-r border-gray-300 px-1 py-1';
@@ -114,10 +113,40 @@ export function SalesOrderDocument({
   items: _items = [],
   products = [],
   remarks,
+  productRows = [],
+  motorsLeft = [],
+  motorsRight = [],
+  bendingParts = [],
+  subsidiaryParts = [],
 }: SalesOrderDocumentProps) {
   const [bottomFinishView, setBottomFinishView] = useState<'screen' | 'steel'>('screen');
 
-  const motorRows = Math.max(MOCK_MOTOR_LEFT.length, MOCK_MOTOR_RIGHT.length);
+  const motorRows = Math.max(motorsLeft.length, motorsRight.length);
+
+  // 절곡물 그룹 데이터 추출
+  const guideRailItems = bendingParts.find(g => g.group === '가이드레일')?.items ?? [];
+  const caseItems = bendingParts.find(g => g.group === '케이스')?.items ?? [];
+  const bottomItems = bendingParts.find(g => g.group === '하단마감')?.items ?? [];
+  const smokeItems = bendingParts.find(g => g.group === '연기차단재')?.items ?? [];
+  const guideSmokeItems = smokeItems.filter(i => i.name.includes('레일') || i.name.includes('가이드'));
+  const caseSmokeItems = smokeItems.filter(i => i.name.includes('케이스'));
+  // 구분 불가한 연기차단재는 그대로 표시
+  const otherSmokeItems = smokeItems.filter(i =>
+    !i.name.includes('레일') && !i.name.includes('가이드') && !i.name.includes('케이스')
+  );
+
+  // 부자재 좌/우 2열 변환
+  const subsidiaryRows = [];
+  for (let i = 0; i < subsidiaryParts.length; i += 2) {
+    subsidiaryRows.push({
+      left: subsidiaryParts[i],
+      right: subsidiaryParts[i + 1] ?? null,
+    });
+  }
+
+  // 스크린/철재 제품 분리
+  const screenProducts = productRows.filter(p => p.product_type !== 'steel');
+  const steelProducts = productRows.filter(p => p.product_type === 'steel');
 
   return (
     <div className="bg-white p-8 min-h-full text-[11px]">
@@ -142,9 +171,9 @@ export function SalesOrderDocument({
             <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">로트번호</td>
             <td className="px-2 py-1 border-r border-gray-400">{orderNumber}</td>
             <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">제품명</td>
-            <td className="px-2 py-1 border-r border-gray-400">{products[0]?.productName || "-"}</td>
+            <td className="px-2 py-1 border-r border-gray-400">{products[0]?.productName || productRows[0]?.product_name || "-"}</td>
             <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">제품코드</td>
-            <td className="px-2 py-1 border-r border-gray-400">KWS01</td>
+            <td className="px-2 py-1 border-r border-gray-400">{productRows[0]?.product_name?.split(' ')[0] || "KWS01"}</td>
             <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">인정번호</td>
             <td className="px-2 py-1">{certificationNumber}</td>
           </tr>
@@ -198,7 +227,7 @@ export function SalesOrderDocument({
                 </tr>
                 <tr>
                   <td className="bg-gray-100 px-2 py-1 font-medium">셔터출수량</td>
-                  <td className="px-2 py-1">{shutterCount}개소</td>
+                  <td className="px-2 py-1">{shutterCount || productRows.length}개소</td>
                 </tr>
               </tbody>
             </table>
@@ -239,391 +268,383 @@ export function SalesOrderDocument({
       <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={`${thBase} w-8`} rowSpan={2}>No</th>
-                <th className={`${thBase} w-14`} rowSpan={2}>품류</th>
-                <th className={`${thBase} w-14`} rowSpan={2}>부호</th>
-                <th className={thBase} colSpan={2}>오픈사이즈</th>
-                <th className={thBase} colSpan={2}>제작사이즈</th>
-                <th className={`${thBase} w-16`} rowSpan={2}>가이드<br />레일</th>
-                <th className={`${thBase} w-14`} rowSpan={2}>사프트<br />(인치)</th>
-                <th className={`${thBase} w-14`} rowSpan={2}>케이스<br />(인치)</th>
-                <th className={thBase} 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={thBase}>가로</th>
-                <th className={thBase}>세로</th>
-                <th className={thBase}>가로</th>
-                <th className={thBase}>세로</th>
-                <th className={thBase}>브라켓트</th>
-                <th className={thBase}>용량Kg</th>
-              </tr>
-            </thead>
-            <tbody>
-              {MOCK_SCREEN_ROWS.map((row) => (
-                <tr key={row.no} className="border-b border-gray-300">
-                  <td className={tdCenter}>{row.no}</td>
-                  <td className={tdCenter}>{row.type}</td>
-                  <td className={tdCenter}>{row.code}</td>
-                  <td className={tdCenter}>{formatNumber(row.openW)}</td>
-                  <td className={tdCenter}>{formatNumber(row.openH)}</td>
-                  <td className={tdCenter}>{formatNumber(row.madeW)}</td>
-                  <td className={tdCenter}>{formatNumber(row.madeH)}</td>
-                  <td className={tdCenter}>{row.guideRail}</td>
-                  <td className={tdCenter}>{row.shaft}</td>
-                  <td className={tdCenter}>{row.caseInch}</td>
-                  <td className={tdCenter}>{row.bracket}</td>
-                  <td className={tdCenter}>{row.capacity}</td>
-                  <td className="px-1 py-1 text-center">{row.finish}</td>
+      {screenProducts.length > 0 && (
+        <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={`${thBase} w-8`} rowSpan={2}>No</th>
+                  <th className={`${thBase} w-14`} rowSpan={2}>품류</th>
+                  <th className={`${thBase} w-14`} rowSpan={2}>부호</th>
+                  <th className={thBase} colSpan={2}>오픈사이즈</th>
+                  <th className={thBase} colSpan={2}>제작사이즈</th>
+                  <th className={`${thBase} w-16`} rowSpan={2}>가이드<br />레일</th>
+                  <th className={`${thBase} w-14`} rowSpan={2}>사프트<br />(인치)</th>
+                  <th className={`${thBase} w-14`} rowSpan={2}>케이스<br />(인치)</th>
+                  <th className={thBase} colSpan={2}>모터</th>
+                  <th className="px-1 py-1 w-16" rowSpan={2}>마감</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
+                <tr className="bg-gray-50 border-b border-gray-400 text-[9px]">
+                  <th className={thBase}>가로</th>
+                  <th className={thBase}>세로</th>
+                  <th className={thBase}>가로</th>
+                  <th className={thBase}>세로</th>
+                  <th className={thBase}>브라켓트</th>
+                  <th className={thBase}>용량Kg</th>
+                </tr>
+              </thead>
+              <tbody>
+                {screenProducts.map((row) => (
+                  <tr key={row.no} className="border-b border-gray-300">
+                    <td className={tdCenter}>{row.no}</td>
+                    <td className={tdCenter}>{row.floor ?? '-'}</td>
+                    <td className={tdCenter}>{row.symbol ?? '-'}</td>
+                    <td className={tdCenter}>{row.open_width ? formatNumber(Number(row.open_width)) : '-'}</td>
+                    <td className={tdCenter}>{row.open_height ? formatNumber(Number(row.open_height)) : '-'}</td>
+                    <td className={tdCenter}>{row.made_width ? formatNumber(Number(row.made_width)) : '-'}</td>
+                    <td className={tdCenter}>{row.made_height ? formatNumber(Number(row.made_height)) : '-'}</td>
+                    <td className={tdCenter}>{row.guide_rail ?? '-'}</td>
+                    <td className={tdCenter}>{row.shaft ?? '-'}</td>
+                    <td className={tdCenter}>{row.case_inch ?? '-'}</td>
+                    <td className={tdCenter}>{row.bracket ?? '-'}</td>
+                    <td className={tdCenter}>{row.capacity ?? '-'}</td>
+                    <td className="px-1 py-1 text-center">{row.finish ?? '-'}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </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={`${thBase} w-8`} rowSpan={2}>No.</th>
-                <th className={`${thBase} w-14`} rowSpan={2}>부호</th>
-                <th className={thBase} colSpan={2}>오픈사이즈</th>
-                <th className={thBase} colSpan={2}>제작사이즈</th>
-                <th className={`${thBase} w-16`} rowSpan={2}>가이드<br />레일</th>
-                <th className={`${thBase} w-14`} rowSpan={2}>사프트<br />(인치)</th>
-                <th className={`${thBase} w-14`} rowSpan={2}>조인트바<br />(규격)</th>
-                <th className={`${thBase} w-14`} rowSpan={2}>케이스<br />(인치)</th>
-                <th className={thBase} 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={thBase}>가로</th>
-                <th className={thBase}>세로</th>
-                <th className={thBase}>가로</th>
-                <th className={thBase}>세로</th>
-                <th className={thBase}>브라켓트</th>
-                <th className={thBase}>용량Kg</th>
-              </tr>
-            </thead>
-            <tbody>
-              {MOCK_STEEL_ROWS.map((row) => (
-                <tr key={row.no} className="border-b border-gray-300">
-                  <td className={tdCenter}>{row.no}</td>
-                  <td className={tdCenter}>{row.code}</td>
-                  <td className={tdCenter}>{formatNumber(row.openW)}</td>
-                  <td className={tdCenter}>{formatNumber(row.openH)}</td>
-                  <td className={tdCenter}>{formatNumber(row.madeW)}</td>
-                  <td className={tdCenter}>{formatNumber(row.madeH)}</td>
-                  <td className={tdCenter}>{row.guideRail}</td>
-                  <td className={tdCenter}>{row.shaft}</td>
-                  <td className={tdCenter}>{row.jointBar}</td>
-                  <td className={tdCenter}>{row.caseInch}</td>
-                  <td className={tdCenter}>{row.bracket}</td>
-                  <td className={tdCenter}>{row.capacity}</td>
-                  <td className="px-1 py-1 text-center">{row.finish}</td>
+      {steelProducts.length > 0 && (
+        <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={`${thBase} w-8`} rowSpan={2}>No.</th>
+                  <th className={`${thBase} w-14`} rowSpan={2}>부호</th>
+                  <th className={thBase} colSpan={2}>오픈사이즈</th>
+                  <th className={thBase} colSpan={2}>제작사이즈</th>
+                  <th className={`${thBase} w-16`} rowSpan={2}>가이드<br />레일</th>
+                  <th className={`${thBase} w-14`} rowSpan={2}>사프트<br />(인치)</th>
+                  <th className={`${thBase} w-14`} rowSpan={2}>조인트바<br />(규격)</th>
+                  <th className={`${thBase} w-14`} rowSpan={2}>케이스<br />(인치)</th>
+                  <th className={thBase} colSpan={2}>모터</th>
+                  <th className="px-1 py-1 w-16" rowSpan={2}>마감</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
+                <tr className="bg-gray-50 border-b border-gray-400 text-[9px]">
+                  <th className={thBase}>가로</th>
+                  <th className={thBase}>세로</th>
+                  <th className={thBase}>가로</th>
+                  <th className={thBase}>세로</th>
+                  <th className={thBase}>브라켓트</th>
+                  <th className={thBase}>용량Kg</th>
+                </tr>
+              </thead>
+              <tbody>
+                {steelProducts.map((row) => (
+                  <tr key={row.no} className="border-b border-gray-300">
+                    <td className={tdCenter}>{row.no}</td>
+                    <td className={tdCenter}>{row.symbol ?? '-'}</td>
+                    <td className={tdCenter}>{row.open_width ? formatNumber(Number(row.open_width)) : '-'}</td>
+                    <td className={tdCenter}>{row.open_height ? formatNumber(Number(row.open_height)) : '-'}</td>
+                    <td className={tdCenter}>{row.made_width ? formatNumber(Number(row.made_width)) : '-'}</td>
+                    <td className={tdCenter}>{row.made_height ? formatNumber(Number(row.made_height)) : '-'}</td>
+                    <td className={tdCenter}>{row.guide_rail ?? '-'}</td>
+                    <td className={tdCenter}>{row.shaft ?? '-'}</td>
+                    <td className={tdCenter}>{row.joint_bar ?? '-'}</td>
+                    <td className={tdCenter}>{row.case_inch ?? '-'}</td>
+                    <td className={tdCenter}>{row.bracket ?? '-'}</td>
+                    <td className={tdCenter}>{row.capacity ?? '-'}</td>
+                    <td className="px-1 py-1 text-center">{row.finish ?? '-'}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </div>
-      </div>
+      )}
 
       {/* ========== 3. 모터 ========== */}
-      <div className="mb-4">
-        <p className="font-bold mb-2">3. 모터</p>
-        <div className="border border-gray-400">
-          <table className="w-full">
-            <thead>
-              <tr className="bg-gray-100 border-b border-gray-400">
-                <th className={`${thBase} w-20`}>항목</th>
-                <th className={`${thBase} w-20`}>구분</th>
-                <th className={`${thBase} w-20`}>규격</th>
-                <th className={`${thBase} w-10`}>수량</th>
-                <th className={`${thBase} w-20`}>항목</th>
-                <th className={`${thBase} w-20`}>구분</th>
-                <th className={`${thBase} w-20`}>규격</th>
-                <th className="px-1 py-1 w-10">수량</th>
-              </tr>
-            </thead>
-            <tbody>
-              {Array.from({ length: motorRows }).map((_, i) => {
-                const left = MOCK_MOTOR_LEFT[i];
-                const right = MOCK_MOTOR_RIGHT[i];
-                return (
-                  <tr key={i} className="border-b border-gray-300">
-                    <td className={tdBase}>{left?.item || ''}</td>
-                    <td className={tdBase}>{left?.type || ''}</td>
-                    <td className={tdBase}>{left?.spec || ''}</td>
-                    <td className={tdCenter}>{left?.qty ?? ''}</td>
-                    <td className={tdBase}>{right?.item || ''}</td>
-                    <td className={tdBase}>{right?.type || ''}</td>
-                    <td className={tdBase}>{right?.spec || ''}</td>
-                    <td className="px-1 py-1 text-center">{right?.qty ?? ''}</td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
+      {motorRows > 0 && (
+        <div className="mb-4">
+          <p className="font-bold mb-2">3. 모터</p>
+          <div className="border border-gray-400">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gray-100 border-b border-gray-400">
+                  <th className={`${thBase} w-20`}>항목</th>
+                  <th className={`${thBase} w-20`}>구분</th>
+                  <th className={`${thBase} w-20`}>규격</th>
+                  <th className={`${thBase} w-10`}>수량</th>
+                  <th className={`${thBase} w-20`}>항목</th>
+                  <th className={`${thBase} w-20`}>구분</th>
+                  <th className={`${thBase} w-20`}>규격</th>
+                  <th className="px-1 py-1 w-10">수량</th>
+                </tr>
+              </thead>
+              <tbody>
+                {Array.from({ length: motorRows }).map((_, i) => {
+                  const left = motorsLeft[i];
+                  const right = motorsRight[i];
+                  return (
+                    <tr key={i} className="border-b border-gray-300">
+                      <td className={tdBase}>{left?.item || ''}</td>
+                      <td className={tdBase}>{left?.type || ''}</td>
+                      <td className={tdBase}>{left?.spec || ''}</td>
+                      <td className={tdCenter}>{left?.qty ?? ''}</td>
+                      <td className={tdBase}>{right?.item || ''}</td>
+                      <td className={tdBase}>{right?.type || ''}</td>
+                      <td className={tdBase}>{right?.spec || ''}</td>
+                      <td className="px-1 py-1 text-center">{right?.qty ?? ''}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
         </div>
-      </div>
+      )}
 
       {/* ========== 4. 절곡물 ========== */}
-      <div className="mb-4">
-        <p className="font-bold mb-2">4. 절곡물</p>
+      {bendingParts.length > 0 && (
+        <div className="mb-4">
+          <p className="font-bold mb-2">4. 절곡물</p>
 
-        {/* 4-1. 가이드레일 */}
-        <div className="mb-3">
-          <p className="text-[10px] font-medium mb-1">4-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={`${thBase} w-32`}>백면형 (120X70)</th>
-                  <th className={`${thBase} w-24`}>항목</th>
-                  <th className={`${thBase} w-20`}>규격</th>
-                  <th className="px-1 py-1 w-14">수량</th>
-                </tr>
-              </thead>
-              <tbody>
-                {MOCK_GUIDE_RAIL_ITEMS.map((item, i) => (
-                  <tr key={i} className="border-b border-gray-300">
-                    {i === 0 && (
-                      <td className={tdCenter} rowSpan={MOCK_GUIDE_RAIL_ITEMS.length}>
-                        <div className={`${imgPlaceholder} h-20 w-full`}>IMG</div>
-                      </td>
-                    )}
-                    <td className={tdCenter}>{item.name}</td>
-                    <td className={tdCenter}>{item.spec}</td>
-                    <td className="px-1 py-1 text-center">{item.qty}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-
-          {/* 연기차단재 */}
-          <div className="mt-1 border border-gray-400">
-            <table className="w-full">
-              <thead>
-                <tr className="bg-gray-50 border-b border-gray-400 text-[10px]">
-                  <th className={`${thBase} w-32`}>&nbsp;</th>
-                  <th className={`${thBase} w-24`}>항목</th>
-                  <th className={`${thBase} w-20`}>규격</th>
-                  <th className="px-1 py-1 w-14">수량</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr className="border-b border-gray-300">
-                  <td className={tdCenter}>
-                    <div className={`${imgPlaceholder} h-14 w-full`}>IMG</div>
-                  </td>
-                  <td className={tdCenter}>{MOCK_GUIDE_SMOKE.name}</td>
-                  <td className={tdCenter}>{MOCK_GUIDE_SMOKE.spec}</td>
-                  <td className="px-1 py-1 text-center">{MOCK_GUIDE_SMOKE.qty}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-
-          <p className="mt-1 text-[10px]">
-            <span className="font-medium">* 가이드레일 마감재 <span className="text-red-600 font-bold">양측에</span> 설치</span> - EGI 0.8T + 화이버글라스코팅직물
-          </p>
-        </div>
-
-        {/* 4-2. 케이스(셔터박스) */}
-        <div className="mb-3">
-          <p className="text-[10px] font-medium mb-1">4-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={`${thBase} w-32`}>&nbsp;</th>
-                  <th className={`${thBase} w-24`}>항목</th>
-                  <th className={`${thBase} w-20`}>규격</th>
-                  <th className="px-1 py-1 w-14">수량</th>
-                </tr>
-              </thead>
-              <tbody>
-                {MOCK_CASE_ITEMS.map((item, i) => (
-                  <tr key={i} className="border-b border-gray-300">
-                    {i === 0 && (
-                      <td className={tdCenter} rowSpan={MOCK_CASE_ITEMS.length}>
-                        <div className={`${imgPlaceholder} h-24 w-full`}>IMG</div>
-                      </td>
-                    )}
-                    <td className={tdCenter}>{item.name}</td>
-                    <td className={tdCenter}>{item.spec}</td>
-                    <td className="px-1 py-1 text-center">{item.qty}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-
-          {/* 연기차단재 */}
-          <div className="mt-1 border border-gray-400">
-            <table className="w-full">
-              <thead>
-                <tr className="bg-gray-50 border-b border-gray-400 text-[10px]">
-                  <th className={`${thBase} w-32`}>&nbsp;</th>
-                  <th className={`${thBase} w-24`}>항목</th>
-                  <th className={`${thBase} w-20`}>규격</th>
-                  <th className="px-1 py-1 w-14">수량</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr className="border-b border-gray-300">
-                  <td className={tdCenter}>
-                    <div className={`${imgPlaceholder} h-14 w-full`}>IMG</div>
-                  </td>
-                  <td className={tdCenter}>{MOCK_CASE_SMOKE.name}</td>
-                  <td className={tdCenter}>{MOCK_CASE_SMOKE.spec}</td>
-                  <td className="px-1 py-1 text-center">{MOCK_CASE_SMOKE.qty}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-
-          <p className="mt-1 text-[10px]">
-            <span className="font-medium">* 전면부, 판넬부 <span className="text-red-600 font-bold">양측에</span> 설치</span> - EGI 0.8T + 화이버글라스코팅직물
-          </p>
-        </div>
-
-        {/* 4-3. 하단마감재 (토글: 스크린 / 절재) */}
-        <div className="mb-3">
-          <div className="flex items-center gap-2 mb-2">
-            <button
-              onClick={() => setBottomFinishView('screen')}
-              className={`px-3 py-1 text-[10px] font-bold border rounded ${
-                bottomFinishView === 'screen'
-                  ? 'bg-gray-800 text-white border-gray-800'
-                  : 'bg-white text-gray-600 border-gray-400 hover:bg-gray-100'
-              }`}
-            >
-              # 스크린의 경우
-            </button>
-            <button
-              onClick={() => setBottomFinishView('steel')}
-              className={`px-3 py-1 text-[10px] font-bold border rounded ${
-                bottomFinishView === 'steel'
-                  ? 'bg-gray-800 text-white border-gray-800'
-                  : 'bg-white text-gray-600 border-gray-400 hover:bg-gray-100'
-              }`}
-            >
-              # 절재의 경우
-            </button>
-          </div>
-
-          {bottomFinishView === 'screen' ? (
-            <>
-              <p className="text-[10px] font-medium mb-1">
-                4-3. 하단마감재 - 하단마감재(EGI 1.5ST) + 하단보강엘비(EGI 1.5ST) + 하단 보강평철(EGI 1.1ST) + 하단 무게평철(50X12T)
-              </p>
+          {/* 4-1. 가이드레일 */}
+          {guideRailItems.length > 0 && (
+            <div className="mb-3">
+              <p className="text-[10px] font-medium mb-1">4-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={`${thBase} w-20`}>항목</th>
-                      <th className={`${thBase} w-14`}>규격</th>
-                      <th className={`${thBase} w-16`}>길이</th>
-                      <th className={`${thBase} w-10`}>수량</th>
-                      <th className={`${thBase} w-20`}>항목</th>
-                      <th className={`${thBase} w-14`}>규격</th>
-                      <th className={`${thBase} w-16`}>길이</th>
-                      <th className="px-1 py-1 w-10">수량</th>
+                      <th className={`${thBase} w-32`}>&nbsp;</th>
+                      <th className={`${thBase} w-24`}>항목</th>
+                      <th className={`${thBase} w-20`}>규격</th>
+                      <th className="px-1 py-1 w-14">수량</th>
                     </tr>
                   </thead>
                   <tbody>
-                    {MOCK_BOTTOM_SCREEN.map((row, i) => (
+                    {guideRailItems.map((item, i) => (
                       <tr key={i} className="border-b border-gray-300">
-                        <td className={tdBase}>{row.name}</td>
-                        <td className={tdCenter}>{row.spec}</td>
-                        <td className={tdCenter}>{row.l1}</td>
-                        <td className={tdCenter}>{row.q1}</td>
-                        <td className={tdBase}>{row.name2}</td>
-                        <td className={tdCenter}>{row.spec2}</td>
-                        <td className={tdCenter}>{row.l2}</td>
-                        <td className="px-1 py-1 text-center">{row.q2}</td>
+                        {i === 0 && (
+                          <td className={tdCenter} rowSpan={guideRailItems.length}>
+                            <div className={`${imgPlaceholder} h-20 w-full`}>IMG</div>
+                          </td>
+                        )}
+                        <td className={tdCenter}>{item.name}</td>
+                        <td className={tdCenter}>{item.spec}</td>
+                        <td className="px-1 py-1 text-center">{item.qty}</td>
                       </tr>
                     ))}
                   </tbody>
                 </table>
               </div>
-            </>
-          ) : (
-            <>
-              <p className="text-[10px] font-medium mb-1">
-                4-3. 하단마감재 -EGI 1.5ST
+
+              {/* 가이드레일 연기차단재 */}
+              {guideSmokeItems.length > 0 && (
+                <div className="mt-1 border border-gray-400">
+                  <table className="w-full">
+                    <thead>
+                      <tr className="bg-gray-50 border-b border-gray-400 text-[10px]">
+                        <th className={`${thBase} w-32`}>&nbsp;</th>
+                        <th className={`${thBase} w-24`}>항목</th>
+                        <th className={`${thBase} w-20`}>규격</th>
+                        <th className="px-1 py-1 w-14">수량</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {guideSmokeItems.map((item, i) => (
+                        <tr key={i} className="border-b border-gray-300">
+                          {i === 0 && (
+                            <td className={tdCenter} rowSpan={guideSmokeItems.length}>
+                              <div className={`${imgPlaceholder} h-14 w-full`}>IMG</div>
+                            </td>
+                          )}
+                          <td className={tdCenter}>{item.name}</td>
+                          <td className={tdCenter}>{item.spec}</td>
+                          <td className="px-1 py-1 text-center">{item.qty}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+
+              <p className="mt-1 text-[10px]">
+                <span className="font-medium">* 가이드레일 마감재 <span className="text-red-600 font-bold">양측에</span> 설치</span> - EGI 0.8T + 화이버글라스코팅직물
               </p>
+            </div>
+          )}
+
+          {/* 4-2. 케이스(셔터박스) */}
+          {caseItems.length > 0 && (
+            <div className="mb-3">
+              <p className="text-[10px] font-medium mb-1">4-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={`${thBase} w-32`}>하단마감재</th>
-                      <th className={`${thBase} w-14`}>규격</th>
-                      <th className={`${thBase} w-16`}>길이</th>
-                      <th className="px-1 py-1 w-10">수량</th>
+                      <th className={`${thBase} w-32`}>&nbsp;</th>
+                      <th className={`${thBase} w-24`}>항목</th>
+                      <th className={`${thBase} w-20`}>규격</th>
+                      <th className="px-1 py-1 w-14">수량</th>
                     </tr>
                   </thead>
                   <tbody>
-                    <tr className="border-b border-gray-300">
-                      <td className={tdCenter}>
-                        <div className={`${imgPlaceholder} h-16 w-full`}>IMG</div>
-                      </td>
-                      <td className={tdCenter}>{MOCK_BOTTOM_STEEL.spec}</td>
-                      <td className={tdCenter}>{MOCK_BOTTOM_STEEL.length}</td>
-                      <td className="px-1 py-1 text-center">{MOCK_BOTTOM_STEEL.qty}</td>
-                    </tr>
+                    {caseItems.map((item, i) => (
+                      <tr key={i} className="border-b border-gray-300">
+                        {i === 0 && (
+                          <td className={tdCenter} rowSpan={caseItems.length}>
+                            <div className={`${imgPlaceholder} h-24 w-full`}>IMG</div>
+                          </td>
+                        )}
+                        <td className={tdCenter}>{item.name}</td>
+                        <td className={tdCenter}>{item.spec}</td>
+                        <td className="px-1 py-1 text-center">{item.qty}</td>
+                      </tr>
+                    ))}
                   </tbody>
                 </table>
               </div>
-            </>
+
+              {/* 케이스 연기차단재 */}
+              {caseSmokeItems.length > 0 && (
+                <div className="mt-1 border border-gray-400">
+                  <table className="w-full">
+                    <thead>
+                      <tr className="bg-gray-50 border-b border-gray-400 text-[10px]">
+                        <th className={`${thBase} w-32`}>&nbsp;</th>
+                        <th className={`${thBase} w-24`}>항목</th>
+                        <th className={`${thBase} w-20`}>규격</th>
+                        <th className="px-1 py-1 w-14">수량</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {caseSmokeItems.map((item, i) => (
+                        <tr key={i} className="border-b border-gray-300">
+                          {i === 0 && (
+                            <td className={tdCenter} rowSpan={caseSmokeItems.length}>
+                              <div className={`${imgPlaceholder} h-14 w-full`}>IMG</div>
+                            </td>
+                          )}
+                          <td className={tdCenter}>{item.name}</td>
+                          <td className={tdCenter}>{item.spec}</td>
+                          <td className="px-1 py-1 text-center">{item.qty}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+
+              <p className="mt-1 text-[10px]">
+                <span className="font-medium">* 전면부, 판넬부 <span className="text-red-600 font-bold">양측에</span> 설치</span> - EGI 0.8T + 화이버글라스코팅직물
+              </p>
+            </div>
+          )}
+
+          {/* 4-3. 하단마감재 */}
+          {bottomItems.length > 0 && (
+            <div className="mb-3">
+              <p className="text-[10px] font-medium mb-1">4-3. 하단마감재</p>
+              <div className="border border-gray-400">
+                <table className="w-full">
+                  <thead>
+                    <tr className="bg-gray-100 border-b border-gray-400">
+                      <th className={`${thBase} w-32`}>&nbsp;</th>
+                      <th className={`${thBase} w-24`}>항목</th>
+                      <th className={`${thBase} w-20`}>규격</th>
+                      <th className="px-1 py-1 w-14">수량</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {bottomItems.map((item, i) => (
+                      <tr key={i} className="border-b border-gray-300">
+                        {i === 0 && (
+                          <td className={tdCenter} rowSpan={bottomItems.length}>
+                            <div className={`${imgPlaceholder} h-16 w-full`}>IMG</div>
+                          </td>
+                        )}
+                        <td className={tdCenter}>{item.name}</td>
+                        <td className={tdCenter}>{item.spec}</td>
+                        <td className="px-1 py-1 text-center">{item.qty}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+
+          {/* 연기차단재 (구분 불가) */}
+          {otherSmokeItems.length > 0 && (
+            <div className="mb-3">
+              <p className="text-[10px] font-medium mb-1">연기차단재</p>
+              <div className="border border-gray-400">
+                <table className="w-full">
+                  <thead>
+                    <tr className="bg-gray-50 border-b border-gray-400 text-[10px]">
+                      <th className={`${thBase} w-24`}>항목</th>
+                      <th className={`${thBase} w-20`}>규격</th>
+                      <th className="px-1 py-1 w-14">수량</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {otherSmokeItems.map((item, i) => (
+                      <tr key={i} className="border-b border-gray-300">
+                        <td className={tdCenter}>{item.name}</td>
+                        <td className={tdCenter}>{item.spec}</td>
+                        <td className="px-1 py-1 text-center">{item.qty}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
           )}
         </div>
-      </div>
+      )}
 
       {/* ========== 5. 부자재 ========== */}
-      <div className="mb-4">
-        <p className="font-bold mb-2">5. 부자재</p>
-        <div className="border border-gray-400">
-          <table className="w-full">
-            <thead>
-              <tr className="bg-gray-100 border-b border-gray-400">
-                <th className={`${thBase} w-24`}>항목</th>
-                <th className={`${thBase} w-20`}>규격</th>
-                <th className={`${thBase} w-10`}>수량</th>
-                <th className={`${thBase} w-24`}>항목</th>
-                <th className={`${thBase} w-20`}>규격</th>
-                <th className="px-1 py-1 w-10">수량</th>
-              </tr>
-            </thead>
-            <tbody>
-              {MOCK_SUBSIDIARY.map((row, i) => (
-                <tr key={i} className="border-b border-gray-300">
-                  <td className={tdBase}>{row.leftItem}</td>
-                  <td className={tdCenter}>{row.leftSpec}</td>
-                  <td className={tdCenter}>{row.leftQty}</td>
-                  <td className={tdBase}>{row.rightItem}</td>
-                  <td className={tdCenter}>{row.rightSpec}</td>
-                  <td className="px-1 py-1 text-center">{row.rightQty}</td>
+      {subsidiaryParts.length > 0 && (
+        <div className="mb-4">
+          <p className="font-bold mb-2">5. 부자재</p>
+          <div className="border border-gray-400">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gray-100 border-b border-gray-400">
+                  <th className={`${thBase} w-24`}>항목</th>
+                  <th className={`${thBase} w-20`}>규격</th>
+                  <th className={`${thBase} w-10`}>수량</th>
+                  <th className={`${thBase} w-24`}>항목</th>
+                  <th className={`${thBase} w-20`}>규격</th>
+                  <th className="px-1 py-1 w-10">수량</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
+              </thead>
+              <tbody>
+                {subsidiaryRows.map((row, i) => (
+                  <tr key={i} className="border-b border-gray-300">
+                    <td className={tdBase}>{row.left?.name ?? ''}</td>
+                    <td className={tdCenter}>{row.left?.spec ?? ''}</td>
+                    <td className={tdCenter}>{row.left?.qty ?? ''}</td>
+                    <td className={tdBase}>{row.right?.name ?? ''}</td>
+                    <td className={tdCenter}>{row.right?.spec ?? ''}</td>
+                    <td className="px-1 py-1 text-center">{row.right?.qty ?? ''}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </div>
-      </div>
+      )}
 
       {/* ========== 특이사항 ========== */}
       {remarks && (
@@ -636,4 +657,4 @@ export function SalesOrderDocument({
       )}
     </div>
   );
-}
+}